HTML Tables

Basic Table Structure

A basic HTML table consists of the following elements:

• <table>: The container for the entire table
• <tr>: Table row
• <th>: Table header cell (typically bold and centered)
• <td>: Table data cell

Basic Table Example:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>28</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>32</td>
    <td>Canada</td>
  </tr>
</table>

Table Sections

HTML tables can be divided into three sections for better organization and styling:

• <thead>: Table header section (contains header rows)
• <tbody>: Table body section (contains data rows)
• <tfoot>: Table footer section (contains footer rows)

Example with Table Sections:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product A</td>
      <td>$10.00</td>
      <td>2</td>
      <td>$20.00</td>
    </tr>
    <tr>
      <td>Product B</td>
      <td>$15.00</td>
      <td>1</td>
      <td>$15.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total</td>
      <td>$35.00</td>
    </tr>
  </tfoot>
</table>

Using these sections helps browsers render tables more efficiently and allows for better styling with CSS.

Table Attributes

Cell Spanning

Cells can span multiple rows or columns using the rowspan and colspan attributes:

• colspan: Specifies the number of columns a cell should span
• rowspan: Specifies the number of rows a cell should span

Example with Cell Spanning:

<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Contact Info</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>555-1234</td>
    <td>john@example.com</td>
  </tr>
  <tr>
    <td rowspan="2">Jane Smith</td>
    <td>555-5678</td>
    <td>jane@example.com</td>
  </tr>
  <tr>
    <td>555-8765</td>
    <td>jane.smith@work.com</td>
  </tr>
</table>

Table Caption

The <caption> element provides a title or explanation for a table:

<table>
  <caption>Monthly Savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$150</td>
  </tr>
</table>

Column Groups

The <colgroup> and <col> elements are used to define groups of columns for formatting purposes:

<table>
  <colgroup>
    <col style="background-color: #f8f9fa">
    <col span="2" style="background-color: #e9ecef">
  </colgroup>
  <tr>
    <th>Product</th>
    <th>Q1 Sales</th>
    <th>Q2 Sales</th>
  </tr>
  <tr>
    <td>Product A</td>
    <td>$10,000</td>
    <td>$12,000</td>
  </tr>
  <tr>
    <td>Product B</td>
    <td>$8,000</td>
    <td>$9,500</td>
  </tr>
</table>

This allows you to apply styles to entire columns without having to specify the style for each cell in the column.

Styling Tables with CSS

Modern table design relies heavily on CSS for styling. Here are some common CSS properties used with tables:

/* Basic table styling */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* Zebra striping for rows */
tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Hover effect */
tr:hover {
  background-color: #f1f1f1;
}

/* Responsive tables */
@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  
  table thead {
    display: none;
  }
  
  table tr {
    margin-bottom: 10px;
    display: block;
    border-bottom: 2px solid #ddd;
  }
  
  table td {
    display: block;
    text-align: right;
    border-bottom: 1px dotted #ccc;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
  
  table td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

Accessibility Considerations

Making tables accessible is crucial for users with disabilities, especially those using screen readers:

1. Use Table Headers

Always use <th> elements for header cells and specify the scope attribute:

<th scope="col">Name</th> 
<th scope="row">Total</th> 

2. Associate Data Cells with Headers

For complex tables, use id and headers attributes to associate data cells with their headers:

<th id="name">Name</th>
<th id="age">Age</th>
<td headers="name">John</td>
<td headers="age">25</td>

3. Provide a Caption or Summary

Use the <caption> element to provide a title for the table, and consider adding a summary of the table's structure for complex tables:

<table>
  <caption>Employee Information</caption>
  
</table>

Best Practices for HTML Tables

• Use tables for tabular data only: Don't use tables for layout purposes.
• Keep tables simple: Complex tables are difficult to understand and maintain.
• Use appropriate table sections: Organize your table with <thead>, <tbody>, and <tfoot>.
• Include proper headers: Always use <th> elements for header cells.
• Make tables responsive: Ensure tables work well on mobile devices.
• Consider accessibility: Follow accessibility guidelines for tables.
• Use CSS for styling: Keep presentation separate from structure.
• Avoid excessive spanning: Too many merged cells can make tables confusing.
• Provide context: Use captions to explain what the table represents.