HTML Tables:


HTML Table Basics to Advanced

HTML tables are used to organize data into rows and columns. They can be styled and enhanced for layout, comparison, or data presentation.


Basic Table Structure

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Role</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john@example.com</td>
    <td>Admin</td>
  </tr>
</table>

Tags Used:

  • <table> - defines the table container
  • <tr> - table row
  • <th> - table header cell (bold and centered by default)
  • <td> - table data cell

Adding a Caption

<table>
  <caption>Employee Directory</caption>
  <!-- table content -->
</table>

The <caption> adds a title above the table (by default) that describes the table's purpose.


Merging Cells


Column Span (colspan)

<table border="1">
  <tr>
    <th colspan="2">Full Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>30</td>
  </tr>
</table>

Row Span (rowspan)

<table border="1">
  <tr>
    <th rowspan="2">Department</th>
    <th colspan="2">Employees</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>ID</th>
  </tr>
</table>

Table Structure with <thead>, <tbody>, <tfoot>

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Qty</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>5</td>
      <td>$10.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total</td>
      <td>$50.00</td>
    </tr>
  </tfoot>
</table>
  • <thead> - header section (for column headings)
  • <tbody> - main data section
  • <tfoot> - footer section (for totals, summaries)

Advanced Styling with CSS

<style>
  table {
    border-collapse: collapse;
    width: 100%;
    font-family: Arial, sans-serif;
    margin: 20px 0;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
  }
  th {
    background-color: #4CAF50;
    color: white;
    position: sticky;
    top: 0;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  tr:hover {
    background-color: #e9e9e9;
  }
  caption {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 10px;
  }
</style>

Responsive Table Example

<div style="overflow-x: auto;">
  <table>
    <!-- Wide table content -->
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Department</th>
      <th>Salary</th>
      <th>Join Date</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
    <!-- More rows -->
  </table>
</div>

Best Practices

  • Use tables for tabular data, not for page layout
  • Always include proper header cells (<th>)
  • Use semantic structure (<thead>, <tbody>, <tfoot>)
  • Make tables responsive for mobile devices
  • Ensure sufficient contrast for readability
  • Add captions for complex tables
  • Use CSS for styling instead of HTML attributes
  • Consider accessibility (screen readers)
  • Keep tables simple - break complex data into multiple tables if needed

Accessibility Considerations

<table aria-describedby="table-desc">
  <caption id="table-desc">Quarterly Sales Report 2023</caption>
  <thead>
    <tr>
      <th scope="col">Quarter</th>
      <th scope="col">Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Q1</th>
      <td>$10,000</td>
    </tr>
  </tbody>
</table>

Key accessibility features:

  • aria-describedby links to descriptive text
  • scope attributes define header relationships
  • Proper <caption> for table description
  • Clear row and column headers