HTML Tables

Keywords

tables, html, html tables, dataidea, data science, web development, website

Photo by DATAIDEA

Tables

HTML tables are used to display data in a tabular format, which is organized into rows and columns. Tables are an essential tool for presenting structured data clearly and concisely. Understanding how to create and format tables is crucial for web development.

Basic Structure of an HTML Table

An HTML table is created using the <table> element. Inside the table, rows are defined using the <tr> (table row) element, headers using the <th> (table header) element, and data cells using the <td> (table data) element.

Example:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Output:

Header 1 Header 2
Data 1 Data 2

In this example, the table has one header row and one data row.

Table Elements and Attributes

1. Table Headers

Table headers are defined using the <th> element. Headers are typically displayed in bold and centered text.

<tr>
  <th>Header 1</th>
  <th>Header 2</th>
</tr>

2. Table Rows

Table rows are defined using the <tr> element. Each row contains header or data cells.

<tr>
  <td>Data 1</td>
  <td>Data 2</td>
</tr>

3. Table Data

Table data cells are defined using the <td> element. These cells hold the actual data.

<td>Data 1</td>
<td>Data 2</td>

4. Table Caption

The <caption> element provides a title or caption for the table, which is typically displayed above the table.

<table>
  <caption>Table Title</caption>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
Result:
Table Title
Header 1 Header 2
Data 1 Data 2

5. Table Sectioning Elements

Tables can be divided into sections using the <thead>, <tbody>, and <tfoot> elements for better structure and styling.

  • <thead>: Contains the header rows.
  • <tbody>: Contains the body rows.
  • <tfoot>: Contains the footer rows.
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
    </tr>
  </tfoot>
</table>

Result

Header 1 Header 2
Data 1 Data 2
Data 3 Data 4
Footer 1 Footer 2

6. Colspan and Rowspan

  • colspan: Merges multiple columns into a single cell.
  • rowspan: Merges multiple rows into a single cell.
<table>
  <tr>
    <th>Header 1</th>
    <th colspan="2">Merged Header 2 and 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td rowspan="2">Merged Data 1 and 2</td>
    <td>Data 4</td>
    <td>Data 5</td>
  </tr>
  <tr>
    <td>Data 6</td>
    <td>Data 7</td>
  </tr>
</table>
Result
Header 1 Merged Header 2 and 3
Data 1 Data 2 Data 3
Merged Data 1 and 2 Data 4 Data 5
Data 6 Data 7

Example of a Fully Utilized HTML Table

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Table Example</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
    caption {
      caption-side: top;
      font-size: 1.5em;
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <table>
    <caption>Employee Data</caption>
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Age</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>Manager</td>
        <td>45</td>
        <td>$100,000</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>Developer</td>
        <td>30</td>
        <td>$90,000</td>
      </tr>
      <tr>
        <td>Sam Brown</td>
        <td>Designer</td>
        <td>25</td>
        <td>$70,000</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">Total Employees</td>
        <td>3</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

Result:

<!DOCTYPE html> HTML Table Example
Employee Data
Name Position Age Salary
John Doe Manager 45 $100,000
Jane Smith Developer 30 $90,000
Sam Brown Designer 25 $70,000
Total Employees 3

Conclusion

HTML tables are a powerful way to present data in a structured and readable format. By understanding the various table elements and attributes, you can create complex and visually appealing tables that enhance the presentation of your data. Properly using table sectioning elements and attributes like colspan and rowspan allows for more flexible and dynamic table layouts.

Back to top