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