View video tutorial
HTML Table Headers
HTML
An HTML <table> can have a header <th> tag to represent columns.
Table header
➔ Table header is defined by <th> tag.
➔ Each table header represents a columns data.
➔ Column data or cell are defined by <td> tag
Syntax
<thead>
<tr>
<th>Name</th>
<th>Size</th>
<th>Country</th>
</tr>
</thead>
Fruit Table
| Fruit | Size | Country |
|---|---|---|
| Apple | Large | Germany |
| Apple | Large | USA |
| Berry | Small | Canada |
| Cherry | Small | UK |
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #00000055;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>Fruit Table Example</h2>
<table class="table1">
<thead>
<tr>
<th>Fruit</th>
<th>Size</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Large</td>
<td>Germany</td>
</tr>
<tr>
<td>Apple</td>
<td>Large</td>
<td>USA</td>
</tr>
<tr>
<td>Berry</td>
<td>Small</td>
<td>Canada</td>
</tr>
<tr>
<td>Cherry</td>
<td>Small</td>
<td>UK</td>
</tr>
</tbody>
</table>
</body>
</html>
Click on the "See output" button to see how it works.