This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

A basic HTML table has the following structure:

John Doe
    30
    Software Engineer
    USA
    [email protected]
  
  
    Jane Smith
    28
    Data Scientist
    Canada
    [email protected]
  
  . . .

Each element defines a table row, and each element defines a table cell (td stands for table data).

HTML Table Structure

Sometimes, you might want to add a table header that gives information about the type of data that the row or column contains. Table header is defined with the element.

HTML Table with Header

Name
    Age
    Occupation
    Country
    Email
  
  
    John Doe
    30
    Software Engineer
    USA
    [email protected]
  
  . . .

To create a vertical header, place the element as the first child element inside each table row:

HTML Table with Vertical Header

Name
    John Doe
    . . .
  
  
    Age
    30
    . . .
  
  . . .

➡️ View Code Demo

Table border

Previously, we used the attribute border="1" to add a border for the table. However, in practice, it is best to use CSS to control the appearance of the table like this:

table,
th,
td {
  border: 1px solid;
}

table

By default, the table has a double border. This is because both the table element (

) and each individual table cell (

) have their own borders. Using CSS, you may collapse them into one by setting a table-collapse property.
table {
  border-collapse: collapse;
}

table with collapsed border

Aside from this small detail, the table border acts exactly like the border of any other HTML components we've discussed so far. For instance, you can customize the border width, color, and radius:

➡️ View Code Demo

Cells that span multiple rows and columns

By default, each table cell occupies one row and one column, but in this case, Name, Age, and Occupation spans over two rows, and Contact Information spans over two columns for this table to make sense.

This effect can be achieved using the colspan and rowspan attributes.

border="1">
  
     rowspan="2">Name
     rowspan="2">Age
     rowspan="2">Occupation
     colspan="2">Contact Information
  
  
    Email
    Phone
  
  
    John Doe
    30
    Software Engineer
    [email protected]
    123-456-7890
  
  
    Jane Smith
    28
    Data Scientist
    [email protected]
    987-654-3210

➡️ View Code Demo

Styling your table

Just like any other block-level element, you can define the width and height of the table and table cells.

table,
th,
td {
  border: 1px solid;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  height: 50px;
}

table with customized size

As you can see, when there are extra spaces, the

will be vertically centered and horizontally left-aligned. The will be centered both vertically and horizontally.

You can customize the alignment using text-align and vertical-align properties. text-align changes the horizontal alignment, and vertical-align changes the vertical alignment.

th,
td {
  height: 50px;

  text-align: center;
  vertical-align: center;
}

table with all cells centered

We will discuss more about how to align elements later.

Further readings

If you found this guide helpful, follow us on social media for more tips, tutorials, and updates on web development:

🔹 TheDevSpace | LinkedIn

🔹 TheDevSpace | X

🔹 TheDevSpace | Threads

Let's stay connected! 🚀