HTML tables are commonly used for displaying tabular data in a structured manner. Tables are made up of rows and columns, and often include table headers to provide additional information about the data. In this article, we’ll discuss HTML table headers and how they can be used to enhance the readability and organization of tables.
Vertical Table Headers
By default, HTML table headers are displayed horizontally at the top of each column. However, it is also possible to display headers vertically along the side of a table. This can be achieved using the scope
attribute with a value of "row"
or "col"
, depending on the orientation of the header. For example:
html
<table> <thead> <tr> <th scope="col">Product</th> <th scope="col">Price</th> <th scope="col">Quantity</th> </tr> </thead> <tbody> <tr> <th scope="row">Apples</th> <td>$1.00</td> <td>10</td> </tr> <tr> <th scope="row">Bananas</th> <td>$0.50</td> <td>20</td> </tr> </tbody> </table>
In the example above, the first column headers are displayed vertically using the scope
attribute with a value of "row"
. This makes it easier for the user to associate each row with its corresponding product.
Aligned Table Headers
Another way to enhance the organization of table headers is to align them with their corresponding data. This can be achieved using the align
attribute with a value of "left"
, "center"
, or "right"
. For example:
html
<table> <thead> <tr> <th align="left">Product</th> <th align="center">Price</th> <th align="right">Quantity</th> </tr> </thead> <tbody> <tr> <td align="left">Apples</td> <td align="center">$1.00</td> <td align="right">10</td> </tr> <tr> <td align="left">Bananas</td> <td align="center">$0.50</td> <td align="right">20</td> </tr> </tbody> </table>
In the example above, each header is aligned with its corresponding data using the align
attribute. This helps to visually organize the table and makes it easier for the user to read.
Multiple Table Headers
In some cases, a table may require multiple levels of headers to provide additional information about the data. This can be achieved using the th
element with the scope
attribute set to "colgroup"
or "rowgroup"
. For example:
html
<table> <thead> <tr> <th rowspan="2">Product</th> <th colspan="2">Price</th> </tr> <tr> <th>Regular</th> <th>Sale</th> </tr> </thead> <tbody> <tr> <th scope="row">Apples</th> <td>$1.00</td> <td>$0.90</td> </tr> <tr> <th scope="row">Bananas</th> <td>$0.50</td> <td>$0.40</td>