HTML Table Headers 🎯

Welcome to your comprehensive guide on HTML Table Headers! In this lesson, we'll explore the essentials of table headers, their structure, and how to create them using HTML. Let's get started! 📝

Understanding Table Headers 💡

HTML tables are used to organize data in a structured format. Table headers provide context to the table data, making it more accessible and user-friendly. They are essential for SEO (Search Engine Optimization) as well.

A table header consists of two main types:

<th> - table header cell
<caption> - table caption (optional)

Creating a Basic Table 📝

Before diving into table headers, let's first create a basic HTML table:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Table</title>
</head>
<body>
  <table>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
    <!-- Add more rows as needed -->
  </table>
</body>
</html>

In the above example, <th> tags are used to create table headers. The data is contained within <td> (table data) tags.

Table Headers in Action 💡

Let's add table headers to a more complex table for better understanding:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Table with Headers</title>
</head>
<body>
  <table>
    <caption>Student Scorecard</caption>
    <thead>
      <tr>
        <th>Student Name</th>
        <th>Subject 1</th>
        <th>Subject 2</th>
        <th>Subject 3</th>
        <th>Total Score</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>85</td>
        <td>90</td>
        <td>80</td>
        <td>255</td>
      </tr>
      <!-- Add more rows as needed -->
    </tbody>
  </table>
</body>
</html>

In this example, the table has a caption, <caption>, and a header section, <thead>, that contains the table headers for each column. The data is contained within <tbody> (table body) and <td> tags.

Styling Table Headers 💡

You can style your table headers using CSS. Here's an example:

css

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
  color: #333;
}

In this example, table headers have a light grey background color and dark text for better readability.

Quiz 💡

This concludes our HTML Table Headers tutorial. We hope you found it informative and practical! As you continue your coding journey, remember to keep exploring, experimenting, and learning. Happy coding! 🚀