MakeW3web

Table Elements

HTML table elements are used to create and structure tables in a web page. Here's a list of the primary table elements along with their purpose and example usage:

  1. `<table>`: Represents the container for the entire table structure. All other table elements must be placed inside the `<table>` element.

Example:

<table>
  <!-- Other table elements go here -->
</table>
  1. `<thead>`: Represents the header section of a table. This section typically contains the column headings and can be used for styling purposes. Although not required, using `<thead>` helps improve the table's structure and accessibility.


Example:

<table>
  <thead>
    <!-- Column headings go here -->
  </thead>
  <!-- Other table elements go here -->
</table>
  1. `<tbody>`: Represents the body section of a table, where the actual data rows are placed. This section is optional, but it can be helpful for organizing and styling the table.

Example:

<table>
  <thead>
    <!-- Column headings go here -->
  </thead>
  <tbody>
    <!-- Data rows go here -->
  </tbody>
</table>
  1. `<tfoot>`: Represents the footer section of a table, typically used for summary rows, such as totals. This section is optional but can be useful for structuring and styling the table.

Example:

<table>
  <thead>
    <!-- Column headings go here -->
  </thead>
  <tbody>
    <!-- Data rows go here -->
  </tbody>
  <tfoot>
    <!-- Footer row goes here -->
  </tfoot>
</table>
  1. `<tr>` (Table Row): Represents a row within the table. Each row should be enclosed within a `<tr>` element.

Example:

<tbody>
  <tr>
    <!-- Data cells go here -->
  </tr>
</tbody>
  1. `<th>` (Table Header): Represents a header cell within the table. Header cells are used to label columns and are typically styled differently from data cells.

Example:

<tr>
  <th>Header 1</th>
  <th>Header 2</th>
</tr>
  1. `<td>` (Table Data): Represents a data cell within the table. These cells hold the actual data or content for each row and column.

Example:

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

Here's a complete example using all of the table elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table Elements Example</title>
</head>
<body>
    <h1>Table Elements</h1>
    
    <table>
        <thead>
            <tr>
                <th>Product</th>
                <th>Price</th>
                <th>Quantity</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Apples</td>
                <td>$1.00</td>
                <td>5</td>
            </tr>
            <tr>
                <td>Oranges</td>
                <td>$1.50</td>
                <td>3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Total</td>
                <td>$6.50</td>
                <td>8</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

Using these table elements, you can create tables.

Was this page helpful?