In HTML tables, headers are typically defined using the <th> (table header) element. The <th> element is used to represent header cells in a table, and it is commonly placed within the <tr> (table row) element.
Here's an example of how to use <th> for table headers:
<!DOCTYPE html>
<html>
<head>
<title>Table with Headers</title>
<style>
/* Optional CSS for better styling */
table {
border-collapse: collapse;
width: 50%;
margin: 20px;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1,1</td>
<td>Data 1,2</td>
</tr>
<tr>
<td>Data 2,1</td>
<td>Data 2,2</td>
</tr>
</table>
</body>
</html>
In this example:
- The <th> elements are used within the first <tr> to define the table headers.
- The CSS style inside the <style> tag provides additional styling, including borders, padding, and text alignment.
Headers are typically bold and centered by default, but you can apply additional styling using CSS to meet your design preferences. The use of <th> helps screen readers and browsers identify that the content in those cells represents headers rather than regular data. It's also a semantic way to structure the information in your table.
Tags:
HTML