HTML Tables

What is an HTML Table?

An HTML table is a structured way to display data in rows and columns, similar to a spreadsheet. Tables in HTML are created using the <table> element, along with related tags for defining rows, headers and cells.

Tables are ideal for presenting data like statistics, comparisons, schedules and other structured information.

Importance of HTML Tables

1. Organized Data Display
   • Helps organize complex data into a readable format.
2. Accessibility
   • Screen readers can interpret tables, making data accessible to visually impaired users when properly formatted.
3. Customizable Styling
   • CSS can enhance tables visually to match website design.
4. Versatility
   • Suitable for reports, invoices, schedules and many other use cases.

Basic Syntax of an HTML Table

A table is created using a combination of key elements:

1. <table>: Defines the table.
2. <tr>: Represents a table row.
3. <th>: Defines a table header cell (bold and centered by default).
4. <td>: Represents a table data cell.

Example:

<table>
  <tr>
    <th>Student Name</th>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>Math</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>Science</td>
    <td>95</td>
  </tr>
</table>

Output:

Student Name	Subject	Marks
John Doe	Math	90
Jane Smith	Science	95

Key HTML Table Elements

<caption>

• Provides a title or brief description of the table.It is placed immediately after the opening <table> tag.

Example:

<table>
  <caption>Class Performance</caption>
  <!-- Table rows and data -->
</table>

<thead>

• Groups the header row(s) of the table.

<tbody>

• Groups the main body of the table.

<tfoot>

• Groups footer content, typically used for summaries or totals.

Example with Semantic Tags:

<table>
  <caption>Monthly Sales Report</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Product</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>Books</td>
      <td>$500</td>
    </tr>
    <tr>
      <td>February</td>
      <td>Electronics</td>
      <td>$1,200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total</td>
      <td>$1,700</td>
    </tr>
  </tfoot>
</table>

Output:

Month	Product	Sales
January	Books	$500
February	Electronics	$1,200
Total		$1,700

Adding Borders and Styling to Tables

HTML tables can be styled using CSS for better readability and presentation.

Example with Borders:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

<table>
  <caption>Employee Attendance</caption>
  <tr>
    <th>Employee Name</th>
    <th>Days Present</th>
    <th>Days Absent</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>20</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>18</td>
    <td>4</td>
  </tr>
</table>

Output: A clean, bordered table with styled headers.

Merging Cells: colspan and rowspan

colspan

• Merges multiple columns into one.

Example:

<table>
  <tr>
    <th colspan="3">Merged Header</th>
  </tr>
  <tr>
    <td>Row 1</td>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

rowspan

• Merges multiple rows into one.

Example:

<table>
  <tr>
    <td rowspan="2">Merged Row</td>
    <td>Row 1 Data</td>
  </tr>
  <tr>
    <td>Row 2 Data</td>
  </tr>
</table>

Responsive Tables

Tables can become challenging to read on smaller devices. Using CSS, you can make tables responsive.

Example:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  @media screen and (max-width: 600px) {
    table, thead, tbody, th, td, tr {
      display: block;
    }
    td {
      text-align: right;
      padding-left: 50%;
      position: relative;
    }
    td::before {
      content: attr(data-label);
      position: absolute;
      left: 10px;
      text-align: left;
    }
  }
</style>

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Item">Apples</td>
      <td data-label="Price">$2</td>
      <td data-label="Quantity">10</td>
    </tr>
    <tr>
      <td data-label="Item">Oranges</td>
      <td data-label="Price">$3</td>
      <td data-label="Quantity">5</td>
    </tr>
  </tbody>
</table>

Best Practices for Creating HTML Tables

1. Use Semantic Tags
   • Always use <thead>, <tbody> and <tfoot> for structured content.
2. Add Descriptions
   • Use <caption> to explain the table’s purpose.
3. Ensure Accessibility
   • Use the scope attribute in <th> elements for screen readers.
4. Minimize Complexity
   • Avoid overly complex nesting of tables.
5. Make It Responsive
   • Use CSS for better readability on smaller screens.