HTML Table Tag: How to Build Tables with Its Elements

You use the HTML <table> tag to display structured data in rows and columns, using table elements such as <tr> and <td>. It helps you organize information on a webpage.

What the <table> Tag Does

The <table> tag creates a grid of rows and columns. It holds data in an easy-to-read format.

Tables show data with clear labels and values and use them to organize information that has a natural grid structure.

Here is a basic structure of the table:

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

You can use tables to show data, like prices or schedules. But don’t use them to control page layout.

Add a caption to the table tag with the <caption> tag. That describes the table and places it right after the opening <table> tag.

<table>
  <caption>Monthly Sales Report</caption>
  ...
</table>

HTML tables use sections to organize content and improve styles. These elements group rows for better structure.

• <thead>
• <tbody>
• <tfoot>

Let’s take each one in-depth.

The <thead> Tag in HTML Tables

The <thead> tag holds the header part of a table. It contains rows with headings for each column. This helps browsers know which part is the table’s header.

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
</table>

Wrap header rows with <thead>. It groups header cells for styles and scripts.

The <tbody> Tag in HTML Tables

The <tbody> tag holds the main content of a table. It contains rows with the actual data. This part comes after <thead> and before <tfoot>.

<table>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>$1</td>
    </tr>
  </tbody>
</table>

This wraps the main data rows with <tbody> and keeps content organized and separate from headers and footers.

The <tfoot> Tag in HTML Tables

The <tfoot> tag contains the table’s footer and includes rows with totals or summary information. It is placed after <tbody> in the code but appears at the bottom of the table when shown.

<table>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$100</td>
    </tr>
  </tfoot>
</table>

It wraps summary or footer rows with <tfoot>. It helps repeat footers on long tables in print or style them consistently.

Row and Cell Elements with Attributes in Table

The tables include rows and cells. You define them with specific tags that structure and organize the data.

• The <tr> tag means table row. You can use it to create a row in a table. Each row holds one or more cells.
• The <td> tag means table data which creates a regular cell in a row. You place <td> inside a <tr> to hold your content.
• The <th> tag means table header. You also put it inside a <tr>, but it creates a header cell. and browsers usually display header cells in bold and center their text. You use <th> cells in the first row to describe each column.

Here is an example:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
  </tr>
</table>

In this example:

• The first <tr> holds two <th> cells that label the columns.
• The next two <tr> rows hold <td> cells with the data.

Not that:

• Always wrap your rows (<tr>) inside <thead> or <tbody> for better structure.
• You can combine <th> and <td> cells in any row.
• Use CSS to control styles.

Customize Table Rows and Cells with Attributes

You can customize rows and cells in a table with different attributes. These control the layout, alignment, and spaces.

The colspan and rowspan

Use these attributes to merge cells across multiple columns or rows. colspan allows one cell to stretch across several columns.

<td colspan="2">Merged Cell</td>

This cell spans two columns in the same row.

The rowspan allows one cell to stretch across several rows.

<td rowspan="2">Merged Cell</td>

This cell spans two rows in the same column.

The Aligning Content:

To control text alignment inside a cell, use the align attribute (not recommended in modern HTML) or better—use CSS.

<td style="text-align: center;">Centered</td>

You can set the alignment to left, center, or right.

Set Width and Height:

You can control the size of a cell using either HTML attributes or CSS (CSS is preferred for modern websites).

With HTML attributes:

<td width="100">Fixed Width</td>
<td height="50">Fixed Height</td>

With CSS:

<td style="width: 100px;">Fixed Width</td>
<td style="height: 50px;">Fixed Height</td>

• Use CSS for styling whenever possible. HTML attributes like width and height are outdated and not supported in strict HTML5.
• Merged cells (colspan or rowspan) can affect table layout, so plan them carefully to keep the structure consistent.
• You can also use padding and background styles with CSS to enhance the appearance of each cell.

How to Style Tables with CSS

Borders:

Use border to define cell lines.

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Padding and Spacing:

Add space inside cells with padding.

td {
  padding: 10px;
}

Zebra Striping Rows:

Alternate row colors

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

Hover Effects:

Highlight a row on hover.

tr:hover {
  background-color: #ddd;
}

Semantic and Accessibility Considerations for HTML Table Tag

Use <scope> on <th>:

The scope defines whether a header is for a row or column.

<th scope="col">Product</th>
<th scope="row">January</th>

ARIA Attributes:

Add ARIA roles and labels for complex tables.

<table role="grid">
  ...
</table>

How to Make Responsive Tables

Wrap the table in a container with overflow.

<div style="overflow-x: auto;">
  <table>...</table>
</div>

Use CSS to stack cells or hide columns.

@media screen and (max-width: 600px) {
  td:nth-of-type(2) {
    display: none;
  }
}

Examples of Table Tag in HTML

Simple data table:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
  </tr>
</table>

This table has two columns labeled “Name” and “Age” with header cells (<th>). The next row contains data cells (<td>) with the values “Alice” and “30”.

Table with Headers and Footers:

<table>
  <caption>Sales Report</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$1000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$1000</td>
    </tr>
  </tfoot>
</table>

This table includes a caption titled “Sales Report” to describe its purpose. It organizes data into a header (<thead>) and body (<tbody>) with footer (<tfoot>) sections for clarity.

Table with merged cells:

<table>
  <tr>
    <th>Product</th>
    <th colspan="2">Details</th>
  </tr>
  <tr>
    <td>Phone</td>
    <td>Black</td>
    <td>64GB</td>
  </tr>
</table>

The first row uses a header cell with colspan="2" to merge two columns under “Details.” This shows that the next row’s two cells, “Black” and “64GB,” both belong to the Details category.

Responsive Table:

<div style="overflow-x: auto;">
  <table>
    <tr>
      <th>Item</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
    <tr>
      <td>Chair</td>
      <td>Wooden seat</td>
      <td>$50</td>
    </tr>
  </table>
</div>

The table shows three columns: Item, Description, and Price, with header cells in the first row. The data row lists a “Chair” with a “Wooden seat” costing “$50.”

The Difference Between <th> and <td> in HTML Table

• <th> defines a header cell with bold text.
• <td> defines a standard data cell.

Here is a table that shows you key differences:

Use <th> for headers to describe the meaning of data. Use <td> for the actual data values.

Wrapping Up

In this article, you learned what the HTML table element is and how to use it to organize data.

Here is a quick recap:

• The <table> tag creates rows and columns for data.
• Add attributes like colspan and rowspan to merge cells.
• Style tables with CSS for borders and spaces.
• Ensure accessibility with scope and ARIA roles.
• Make tables responsive with scrollable containers and media queries.

FAQs

  
<table border="1">
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Book</td>
    <td>$10</td>
  </tr>
</table>

<table border="1">
  <tr>
    <th colspan="2">Merged Column Header</th>
  </tr>
  <tr>
    <td rowspan="2">Merged Row Cell</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 2</td>
  </tr>
</table>

.table-container {
  overflow-x: auto;
}

<div class="table-container">
  <table>
    <!-- table rows here -->
  </table>
</div>

Similar Reads