More on Tables

In the previous tutorial, we learned how to create a basic table in HTML. In this tutorial, we will learn how to create more complex tables using HTML.

Let's take a closer look at HTML tables and delve into some more aspects of using tables in HTML.

Adding Captions

To add a title to your table, you can use the <caption> element. This element helps both in terms of SEO and accessibility.

<table>
  <caption>
    Student Details
  </caption>
  <!-- Rest of the table here -->
</table>

Table Headers and Footers

Besides <th> for individual header cells, HTML tables allow you to group header or footer content using <thead> and <tfoot>.

<table>
  <thead>
    <!--  header content -->
  </thead>
  <tfoot>
    <!-- footer content -->
  </tfoot>
  <tbody>
    <!-- body content -->
  </tbody>
</table>

Column Groups

You can use the <colgroup> and <col> elements to apply styles to an entire column in an HTML table.

<table>
  <colgroup>
    <col style="background-color:yellow" />
  </colgroup>
  <!-- rest of the table -->
</table>

Accessibility in Tables

To make your tables more accessible, you can use the scope attribute in <th> elements to specify if they are headers for columns, rows, or groups of columns or rows.

<th scope="col">Name</th>
<th scope="col">Age</th>

Sample HTML Table

Here is a sample HTML table that demonstrates the use of the above features:

<table border="1">
  <!-- Caption -->
  <caption>
    Employee Information
  </caption>

  <!-- Table Header -->
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Position</th>
      <th>Salary</th>
    </tr>
  </thead>

  <!-- Table Body -->
  <tbody>
    <tr>
      <td>1</td>
      <td>Alice</td>
      <td>Developer</td>
      <td>$80,000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Bob</td>
      <td>Designer</td>
      <td>$70,000</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Carol</td>
      <td>Manager</td>
      <td>$90,000</td>
    </tr>
  </tbody>

  <!-- Table Footer -->
  <tfoot>
    <tr>
      <td colspan="3">Total Employees</td>
      <td>3</td>
    </tr>
  </tfoot>
</table>

In this tutorial, we learned how to create more complex tables using HTML. We explored adding captions, headers, footers, column groups, and accessibility features to our tables. These features help in structuring and styling tables effectively, making them more accessible and user-friendly.

CoderrShyam