Working with HTML Tables

What Is an HTML Table?

Basic Structure of an HTML Table

HTML Table Elements

An HTML tables ↗ is built using a set of specific HTML elements that define the table’s structure:

<table>: This tag defines the entire table.
<tr>: This stands for table row and is used to define a row within the table.
<th>: Stands for table header and is used to define a header cell (typically bold and centered by default).
<td>: This defines a table data cell. It holds the actual content for each row and column in the table.
<thead>, <tbody>, <tfoot>: These are optional elements used to group the table header, body, and footer respectively, which can help with styling and organizing content.

The `<thead>` section (Header)

Consistency Across Rows

If a row has fewer <td> or <th> elements than another row, it might cause layout issues or misalignment in the table.
If a row has more <td> or <th> elements, the table structure might appear broken or incorrectly formatted.

Example:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>25</td>
      <td>Canada</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">End of Table</td>
    </tr>
  </tfoot>
</table>

html

Adding Row and Column Spans

You can merge or span cells across multiple rows or columns using the colspan and rowspan attributes.

colspan: This attribute allows a cell to span across multiple columns.
rowspan: This attribute allows a cell to span across multiple rows.

Example:

<table>
  <tr>
    <th rowspan="2">Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td colspan="2">Information</td>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
    <td>USA</td>
  </tr>
</table>

html

In this example, the first <th> (Name) spans two rows, and the second row’s <td> spans two columns.

Table Styling

Tables can be styled using CSS to improve their appearance. Here are some common styles to apply:
For more details: MDN CSS Table Styling ↗

Basic Styling

<table style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr>
      <th style="border: 1px solid black; padding: 8px; text-align: left;">Name</th>
      <th style="border: 1px solid black; padding: 8px; text-align: left;">Age</th>
      <th style="border: 1px solid black; padding: 8px; text-align: left;">Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid black; padding: 8px;">John Doe</td>
      <td style="border: 1px solid black; padding: 8px;">30</td>
      <td style="border: 1px solid black; padding: 8px;">USA</td>
    </tr>
  </tbody>
</table>

html

External CSS Styling

It’s recommended to separate styles from content by using external or internal CSS:

<head>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }

    th {
      background-color: #f2f2f2;
    }

    tr:nth-child(even) {
      background-color: #f9f9f9;
    }

    tr:hover {
      background-color: #e2e2e2;
    }
  </style>
</head>

html

border-collapse: Makes the table borders collapse into a single line.
nth-child(even): Adds a background color to every even row for a striped effect.
:hover: Changes the background color when the user hovers over a row.

Advanced Table Features

Accessibility

For better accessibility, use the <caption> tag to add a title to the table, and <th> for headers with the scope attribute.

<table>
  <caption>Employee Information</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
      <th scope="col">Department</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>Marketing</td>
    </tr>
  </tbody>
</table>

html

Basic Table Styling

To start, define a basic style for the table to make it more readable:

/* Basic table styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 18px;
    text-align: left;
}

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 12px;
}

th {
    background-color: #f4f4f4;
}

css

2. Adding Striped Rows

Striped rows improve readability by making it easier to differentiate between consecutive rows.

/* Zebra striping */
tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

css

3. Hover Effects

Adding a hover effect highlights the row when a user hovers over it, improving user interaction.

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

css

4. Styling Borders and Spacing

Borders can be customized for a cleaner look.

/* Customize border style */
table {
    border-spacing: 0;
}

td, th {
    border: 1px solid #ccc;
}

css

5. Responsive Table Styling

For smaller screens, tables should be scrollable or adapt properly.

/* Responsive table */
@media screen and (max-width: 600px) {
    table {
        width: 100%;
        display: block;
        overflow-x: auto;
    }
}

css

6. Highlighting Columns

You can highlight specific columns for emphasis.

/* Highlight first column */
td:first-child, th:first-child {
    background-color: #f4f4f4;
    font-weight: bold;
}

css

7. Rounded Corners

Applying rounded corners can soften the table’s appearance.

/* Rounded corners */
table {
    border-radius: 8px;
    overflow: hidden;
}

css

8. Adding Shadows

Shadows can add depth to the table.

/* Table shadow effect */
table {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

css

Fixing the header row ensures it remains visible when scrolling.

/* Fixed header */
th {
    position: sticky;
    top: 0;
    background: white;
    z-index: 2;
}

css

10. Custom Fonts and Alignment

Using custom fonts and alignment enhances readability.

/* Custom font and text alignment */
table {
    font-family: 'Arial', sans-serif;
}

th {
    text-align: center;
}

css