More on Tables

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

Adding a Caption

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>
     
</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>
     
  </thead>
  <tfoot>
    
  </tfoot>
  <tbody>
    
  </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>
  
</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 an example HTML table with all the important elements:

        <table border="1">
    <caption>Employee Information</caption>

    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Position</th>
            <th>Salary</th>
        </tr>
    </thead>

    <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>

    <tfoot>
        <tr>
            <td colspan="3">Total Employees</td>
            <td>3</td>
        </tr>
    </tfoot>
</table>