HTML Table Headers

HTML Table Headers with examples is the topic of today’s post. For educational purposes.

Table headers in HTML are used to define the headers for rows and columns in a table. The <th> tag is used to define table headers, while the <td> tag is used to define standard table cells.

Table headers are important because they provide context for the data in a table. They make it clear which column or row a piece of data belongs to, which can be especially important when dealing with complex data sets. Headers also help with accessibility, as they provide additional information for users who rely on assistive technologies such as screen readers.

Tables in HTML can have headers for every column or row, or for multiple columns and rows at the same time.



EMAILNAMECONTACT
8:45
9:15
10:50
11:30
12:45
17:00
MONTUEWEDTHUFRI
8:45
9:15
10:50
11:30
12:45
SEPTEMBER

HTML Table Headers <th>

The headers of tables or Html table headers are determined through the use of <th> elements. TH elements refer to table cells.

Here is an example of table headers in HTML:

Example: 

<!DOCTYPE html> <html> <body> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> </table> </body> </html>

Vertical Table Headers

HTML table headers utilize the first column to display the table headers, and the first cell specifies the table header:

Example: 

<!DOCTYPE html> <html> <body> <table> <tr> <th>Header 1</th> <td>Row 1, Column 1</td> </tr> <tr> <th>Header 2</th> <td>Row 2, Column 1</td> </tr> <tr> <th>Header 3</th> <td>Row 3, Column 1</td> </tr> </table> </body> </html>

Header for Multiple Columns

Using HTML table headers, you can have headers spanning multiple columns.

NameAge
SamCurran26
TomHenry48

You can achieve this by using the colspan attribute on the <th> element:

Example: 

<!DOCTYPE html> <html> <body> <table> <tr> <th colspan="2">Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> </table> </body> </html>

A more detailed explanation of colspan and rowspan is located in the chapter titled Table colspan & rowspan.


Align Table Headers

HTML Table headers are designed to be bold and centered:

FirstnameLastnameAge
SamCurran26
TomHenry48

If you want to align the table headers to the left, apply the CSS text-align property:

Example: 

<!DOCTYPE html> <html> <body><style> th { text-align: left; } </style><table> <tr> <th>Header 1</th> <td>Row 1, Column 1</td> </tr> <tr> <th>Header 2</th> <td>Row 2, Column 1</td> </tr> <tr> <th>Header 3</th> <td>Row 3, Column 1</td> </tr> </table> </body> </html>

Table Caption

HTML table headers can include captions that serve as headings for the entire table.

MonthlyExpenses
June$250
May$350

Table captions can be added using the <caption> tag:

Example: 

<!DOCTYPE html> <html> <body> <table> <caption>Table of Employee Information</caption> <tr> <th>Name</th> <th>Position</th> <th>Department</th> </tr> <tr> <td>Johnny</td> <td>Manager</td> <td>Sales</td> </tr> <tr> <td>William</td> <td>Engineer</td> <td>Engineering</td> </tr> </table> </body> </html>

IMPORTANT: The <caption> tag must be included following the <table> tag.

You can add CSS styles to the <caption> tag just like any other HTML element. Here’s an example:

Example: 

<!DOCTYPE html> <html> <head> <style> caption { text-align: center; font-weight: bold; font-size: 1.2em; margin-top: 20px; } </style> </head> <body> <table> <caption>Table of Employee Information</caption> <tr> <th>Name</th> <th>Position</th> <th>Department</th> </tr> <tr> <td>Johnny</td> <td>Manager</td> <td>Sales</td> </tr> <tr> <td>William</td> <td>Engineer</td> <td>Engineering</td> </tr> </table> </body> </html>

HTML Table Headers Web development Uses

HTML Table Headers are an essential part of web development and are commonly used in many types of websites, including e-commerce sites, financial applications, and data analysis tools. Here are some of the most common uses of table headers in HTML:

  • Table headers can help organize data in a clear and structured way, making it easier for users to read and understand the information.
  • Table headers are often used to sort data in ascending or descending order based on the values in the column. This can be useful for users who want to quickly find the information they need.
  • Table headers can also be used to filter data based on specific criteria. For example, a table of products could be filtered by category or price range using the table headers.
  • By using table headers to provide additional information for users who rely on assistive technologies, such as screen readers, you can make your website more accessible to a wider audience.
  • Well-designed table headers can make the table content more visually appealing and easier to navigate, which can improve the overall user experience of your website.
If this article was informative enough to fulfill your educational desires, do subscribe to our Newsletter below in order to be in touch with the technical information on this site.
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon

Leave a Reply

Your email address will not be published. Required fields are marked *