HTML Tables

Creating HTML Tables

HTML tables are used to display data in a structured, tabular format (rows and columns).

Note: Tables should be used for presenting tabular data, not for page layout. Use CSS (like Flexbox or Grid) for creating page layouts.

Basic Table Structure

The fundamental elements for creating a table are:

• <table>: The container for the entire table.
• <tr>: Defines a table row.
• <td>: Defines a table data cell (contains the actual data).
• <th>: Defines a table header cell (used for column or row titles).

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Simple Table</title>
  <meta charset="UTF-8">
  <style>
    /* Basic styling for clarity */
    table, th, td {
      border: 1px solid black;
      border-collapse: collapse; /* Merge borders */
      padding: 8px; /* Add space inside cells */
      text-align: left; /* Align text */
    }
    th {
      background-color: #f2f2f2; /* Light gray background for headers */
      font-weight: bold;
    }
  </style>
</head>
<body>

<h2>Student Scores</h2>

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>92</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>78</td>
  </tr>
</table>

</body>
</html>

Explanation:

• The <table> element wraps everything.
• Each <tr> defines a horizontal row.
• The first <tr> contains <th> (header) cells, which browsers typically display as bold and centered by default (though we override alignment with CSS here).
• Subsequent <tr> elements contain <td> (data) cells.
• The CSS provides basic borders, padding, and alignment for readability.

Styling Tables with CSS

Styling tables using HTML attributes like border, width, cellpadding, or cellspacing is deprecated and should not be used. Always use CSS for styling.

Common CSS properties for tables:

• border: Adds borders to table, th, and td elements.
• border-collapse: collapse;: Merges adjacent cell borders into a single border.
• border-spacing: Controls the space between cell borders (only works if border-collapse is separate, which is the default).
• padding: Adds space between the cell content and its border (th, td).
• text-align: Aligns text within cells (left, center, right).
• vertical-align: Aligns content vertically within cells (top, middle, bottom).
• width: Sets the width of the table or specific columns.
• background-color: Sets background colors, often used for headers or alternating rows (tr:nth-child(even)).

Example CSS for a styled table:

/* Apply styles to a specific table using an ID or class */
#data-table {
  width: 100%; /* Make table fill container width */
  border-collapse: collapse; /* Clean, single borders */
  margin-bottom: 20px; /* Space below the table */
  font-family: sans-serif;
}

#data-table th,
#data-table td {
  border: 1px solid #ddd; /* Lighter borders */
  padding: 12px; /* More padding */
  text-align: left;
}

#data-table th {
  background-color: #4CAF50; /* Green background for headers */
  color: white; /* White text for headers */
  font-weight: bold;
}

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

#data-table tr:hover {
  background-color: #f1f1f1; /* Highlight row on hover */
}

To use these styles, add id="data-table" to your <table> tag.

Spanning Columns and Rows

Sometimes, a cell needs to occupy the space of multiple columns or rows.

colspan Attribute:

Use colspan="number" on a <td> or <th> to make it span across multiple columns.

<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Contact</th> <!-- Spans 2 columns -->
  </tr>
  <tr>
    <td>John Doe</td>
    <td>Email</td> <!-- Column 2 -->
    <td>Phone</td> <!-- Column 3 -->
  </tr>
</table>

rowspan Attribute:

Use rowspan="number" on a <td> or <th> to make it span across multiple rows.

<table>
  <tr>
    <th>Name:</th>
    <td>John Doe</td>
  </tr>
  <tr>
    <th rowspan="2">Phone:</th> <!-- Spans 2 rows -->
    <td>555-1234</td>
  </tr>
  <tr> <!-- Note: This row only needs one <td> because the first column is spanned -->
    <td>555-5678</td>
  </tr>
</table>

Table Caption

The <caption> element provides a title or description for the table. It improves accessibility and context.

It should be placed immediately after the opening <table> tag.

<table>
  <caption>Monthly Sales Report</caption>
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$10,000</td>
  </tr>
</table>

Semantic Table Structure: thead, tbody, tfoot

For more complex tables, you can group rows into logical sections using:

• <thead>: Groups the header content (usually contains <tr> with <th> cells).
• <tbody>: Groups the main body content (contains <tr> with <td> cells).
• <tfoot>: Groups the footer content (e.g., totals, summaries).

Benefits:

• Semantics & Accessibility: Clearly defines the different parts of the table for assistive technologies.
• Styling: Allows applying specific styles to the header, body, or footer.
• Scrolling: Some browsers allow the table body (<tbody>) to scroll independently while keeping the header (<thead>) and footer (<tfoot>) visible.

<table>
  <caption>Invoice Summary</caption>
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>2</td>
      <td>$50.00</td>
    </tr>
    <tr>
      <td>Gadget B</td>
      <td>1</td>
      <td>$75.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total</td>
      <td>$175.00</td>
    </tr>
  </tfoot>
</table>

Note: Even if you use <thead>, <tbody>, and <tfoot>, you still need <tr> elements inside them to define the rows.

Accessibility Considerations

To make tables more accessible, especially complex ones:

• Use <th> for header cells.
• Use the scope attribute on <th> cells to explicitly associate them with the data they describe (scope="col" for column headers, scope="row" for row headers).
• Use <caption> to provide a table title.
• Ensure good color contrast between text and background.
• Avoid using tables for layout.

<table>
  <caption>User Data</caption>
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th> <!-- Could be <th> if it's a row header -->
      <td>Alice</td>
      <td>alice@example.com</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Bob</td>
      <td>bob@example.com</td>
    </tr>
  </tbody>
</table>

Chapter Summary

• Use <table> to define a table for tabular data.
• Use <tr> to define table rows.
• Use <td> for data cells and <th> for header cells.
• Use CSS properties like border, padding, text-align, border-collapse for styling (avoid deprecated HTML attributes).
• Use colspan and rowspan attributes to merge cells.
• Use <caption> for a table title.
• Use <thead>, <tbody>, and <tfoot> to structure table content semantically.
• Use the scope attribute on <th> elements for improved accessibility.

HTML Table Tags Reference

Tag	Description
<table>	Defines the container for an HTML table.
<tr>	Defines a row within a table.
<td>	Defines a standard data cell within a table row.
<th>	Defines a header cell within a table row. Use scope attribute for accessibility.
<caption>	Defines the title or caption of the table.
<thead>	Groups the header content (rows) in a table.
<tbody>	Groups the main body content (rows) in a table.
<tfoot>	Groups the footer content (rows) in a table.
<colgroup>	Specifies a group of one or more columns for formatting (less common).
<col>	Specifies column properties within a <colgroup> (less common).