Table Headers in HTML

Table Headers in HTML with Examples

In this article, I am going to discuss Table Headers in HTML with Examples. Please read our previous article where we discussed Table Sizes in HTML with Examples. At the end of this article, you will learn everything about HTML Table Headers with Examples.

Table Headers in HTML

In Html a table header is defined using a <th> tag where <th> stands for table header. Each <th> element represents one table cell. For better understanding, please have a look at the below example.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  background-color:lightyellow;
  padding:5px;
}
</style>
</head>
<body>

<br>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jack</td>
    <td>Efron</td>
    <td>33</td>
  </tr>
  <tr>
    <td>Alex</td>
    <td>Roberts</td>
    <td>23</td>
  </tr>
</table>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Table Headers in HTML with Examples

Vertical Table Headers in HTML

To define the first column as a table header we need to represent the first cell of each row by an <th> element. For better understanding, please have a look at the below example.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<br>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <td>Jack</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
      <td>Anderson</td>
    <td>Marrye</td>
  </tr>
  <tr>
    <th>Age</th>  
    <td>49</td>
    <td>28</td>
  </tr>
</table>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Vertical Table Headers in HTML

Align Table Headers in HTML

By default, the alignment of the table header is center but we can change the alignment by using CSS text-align property. For better understanding, please have a look at the below example.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  background-color:lightblue;
  padding:5px;
}
th{
text-align:left;}
</style>
</head>
<body>

<br>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jack</td>
    <td>Efron</td>
    <td>33</td>
  </tr>
  <tr>
    <td>Alex</td>
    <td>Roberts</td>
    <td>23</td>
  </tr>
</table>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Align Table Headers in HTML

Table Header for Multiple Column in HTML

We can use a single header for multiple columns by using the colspan attribute inside the table header element. For better understanding, please have a look at the below example.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  background-color:lightblue;
  padding:5px;
}

</style>
</head>
<body>

<br>

<table style="width:100%">
  <tr>
    <th COLSPAN="2">Full Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jack</td>
    <td>Efron</td>
    <td>33</td>
  </tr>
  <tr>
    <td>Alex</td>
    <td>Roberts</td>
    <td>23</td>
  </tr>
</table>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Table Header for Multiple Column in HTML

Table Caption in HTML

We can also give captions to the HTML table which serves as a heading for the entire table. A <caption> tag is used to add a caption to a table. For better understanding, please have a look at the below example.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  background-color:lightgreen;
  padding:8px;
}
th{
text-align:left;}
</style>
</head>
<body>

<br>

<table style="width:100%">
<caption>Student Details </caption>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jack</td>
    <td>Efron</td>
    <td>13</td>
  </tr>
  <tr>
    <td>Alex</td>
    <td>Roberts</td>
    <td>15</td>
  </tr>
</table>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Table Headers in HTML with Examples

In the next article, I am going to discuss Table Colspan and Rowspan in HTML with Examples. Here, in this article, I try to explain Table Headers in HTML with Examples and I hope you enjoy this article.

Leave a Reply

Your email address will not be published.