Table Alignment

By now you should be familiar with the HTML tables, their different parts, and with the process of sizing the tables according to the requirements. It is also necessary to learn how to align the content in the HTML tables. There exist various CSS properties that will give your HTML tables a structured look. In this section, you will learn about the alignment of the tables and their content.

Table Alignment

HTML tables can be aligned horizontally inside the outer container with the help of the align attribute. However, the align attribute is deprecated in HTML5, so you should not use it to align the table. Instead, use other new CSS properties like position, float, etc.

Syntax:

<table align = "left | center | right">

Content Alignment

In HTML5, there are two different ways to align the content of the cells of the HTML table:

• Horizontal Alignment

• Vertical Alignment

Horizontal Alignment

The content of the cells in the HTML table can be horizontally aligned using the text-align CSS property. As you know, the elements like <th> and <td> contain all the content of the table. So you can use the text-align property to set the horizontal alignment of the <th> and <td> elements.

Syntax:

text-align: left | center | right | justify;

For example, if you want to right-align the content of the <td> element, use the following syntax:

td {
  text-align: right;
}

Vertical Alignment

The content of the cells in the HTML table can also be vertically aligned using the vertical-align CSS property. You can use the vertical-align property to set the vertical alignment of the <th> and <td> elements.

Syntax:

vertical-align: top | middle | bottom | baseline;

For example, if you want to bottom-align the content of the <th> element, use the following syntax:

th {
   vertical-align: bottom;
}

Example

Now, let's consider an example in which all the above-mentioned CSS properties are explained on a table in HTML.

HTML:

<table>
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Age</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>Alex</td>
          <td>Johnson</td>
          <td>34</td>
        </tr>

        <tr>
          <td>Marina</td>
          <td>Joseph</td>
          <td>40</td>
        </tr>

        <tr>
          <td>Michael</td>
          <td>Peterson</td>
          <td>32</td>
        </tr>
      </tbody>
</table>

CSS:

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

table {
  width: 60%;
}

td {
  height: 60px;
}

th {
  height: 40px;
}

The table itself:

As you can see in the table above, by default the content of the <th> elements is center-aligned, whereas the content of the <td> elements is left-aligned. Now, let's change the alignment using the CSS properties as presented below and observe the output.

CSS:

th {
  text-align: left;
}

td {
  vertical-align: bottom;
}

Output:

As shown in the output above, the text-align: left on the <th> elements forces the content to be left-aligned. And, the vertical-align on the <td> elements forces the content to be bottom-aligned.

Conclusion

Now you should know how to change the alignment of the table and its content. Remember that the align attribute is not supported by HTML5, so you should avoid using it. To change the alignment of the content inside the HTML table you can use the text-align and vertical-align properties. Also, by default the content of the <th> element is center-aligned and the content of the <td> element is left-aligned.