HTML Tables

by

HTML Tables: Tables allow for the creation of grids in which information can be displayed in rows and columns, making them an essential tool for tasks ranging from displaying simple data to creating complex layouts.

In this article, we’ll explore HTML tables in-depth, from their basic structure to more advanced techniques for styling and responsiveness.

Basic Table Structure

HTML tables are constructed using a set of specific tags that define the table’s structure. Here are the essential tags you’ll need

  • <table>: This tag defines the table itself and contains all other table elements.
  • <tr>: Stands for “table row” and is used to create rows within the table.
  • <th>: Represents table headers, used to label columns or rows. They are typically bold and centered by default.
  • <td>: Represents table data cells, which contain the actual content of the table.

Example –

In this example, we have a table with two rows and two columns, with the first row serving as table headers and the second row containing data.

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

HTML5 New Table Elements

HTML5 introduced new table elements, including <thead>, <tbody>, and <tfoot>.

<thead> Element: The <thead> element is used to group the header content of a table. It is placed inside the <table> element and typically contains one or more <tr> elements with <th> elements

<tbody> Element: The <tbody> element groups the main content of a table, which typically consists of data cells. While it’s not mandatory, using <tbody> enhances the readability and accessibility of your HTM

<tfoot> Element: The <tfoot> element is used to group the footer content of a table, typically containing summaries or totals

<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>Total 1</td>
      <td>Total 2</td>
    </tr>
  </tfoot>
</table>

HTML Table Caption

A table caption in HTML is used to provide a title or a brief description for a table. It helps users, including those with visual impairments, understand the purpose or context of the table’s content. The <caption> element is used to create a table caption.

Example –

In this example, the <caption> element contains the text “Quarterly Sales Data.” When the table is rendered, this text will be displayed as a title or caption above the table. The caption is typically centered and may be styled differently from the table’s data cells to make it stand out.

<table>
    <caption>Quarterly Sales Data</caption>
    <tr>
        <th>Quarter</th>
        <th>Sales Amount</th>
    </tr>
    <tr>
        <td>Q1</td>
        <td>$10,000</td>
    </tr>
    <tr>
        <td>Q2</td>
        <td>$12,500</td>
    </tr>
</table>

HTML Table Attributes

HTML tables can be customized and styled using various attributes. Here are some of the commonly used attributes for HTML tables:

  • border
  • width
  • height
  • align
  • cellspacing
  • cellpading
  • calspan
  • rowspan

You can see this example how these attributes are used in this table

<table border="1" width="50%" align="center" cellpadding="5" cellspacing="0">
    <caption>Sample Table</caption>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
   <tr>
        <td colspan="2">Row 2, Merged Cells</td>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
 
</table>

Table Border

The border of an HTML table refers to the visible lines or boundaries that separate the various elements within the table, such as rows and cells.

You can add a border attribute to the <table> element to specify the width of the table’s border.

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
    <tr>
        <td>Data 3</td>
        <td>Data 4</td>
    </tr>
</table>

Table width and Height

In HTML, you can specify the width and height of a table using the width and height attributes for the <table> element.

These attributes allow you to control the dimensions of the entire table. You can specify these dimensions in various units such as pixels, percentages, or other length units.

<table width="400" height="200" border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
    <tr>
        <td>Data 3</td>
        <td>Data 4</td>
    </tr>
</table>

Table Alignment

In HTML, the align attribute is used to specify the horizontal alignment of content within a table cell. It has been deprecated in HTML5 and its usage is no longer recommended. Instead, CSS should be used to control the alignment of elements

align attribute has the following values –

  • left
  • center
  • right
<table border="1" align="center">
    <tr>
        <td align="left">Left-aligned cell</td>
        <td align="center">Center-aligned cell</td>
        <td align="right">Right-aligned cell</td>
    </tr>
</table>

Table cell spacing

In HTML, the cellspacing attribute is used to control the space between the cells in an HTML table.

It determines the amount of space or padding that should be placed between adjacent table cells, both horizontally and vertically.

The cellspacing attribute is applied to the <table> element and accepts a numerical value as its attribute value.

This value specifies the amount of space, measured in pixels or other length units, to be added between adjacent cells

Example –

In this example, the cellpadding attribute is set to “10”. As a result, each cell in the table will have 10 pixels of padding between its content and the cell’s border. This creates space within the cells, pushing the text or other content away from the cell’s edges.

<table cellspacing="10">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

Table cell padding

HTML cell padding refers to the space between the content of a table cell and the cell’s border.

It is used to control the amount of empty space (padding) around the content within a table cell.

Cell padding is specified using the cellpadding attribute in the HTML <table> element.

Example –

In this example, the cellpadding attribute is set to “10”. As a result, each cell in the table will have 10 pixels of padding between its content and the cell’s border. This creates space within the cells, pushing the text or other content away from the cell’s edges.

<table cellpadding="10">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

 

Table colspan

In HTML, the “row span” attribute is used to specify how many rows a table cell should span in a table. It allows you to create cells that occupy more than one row in a table, effectively merging rows together.

The rowspan attribute is applied to a <td> (table cell) or <th> (table header cell) element within a table row. It takes a numeric value as its argument, indicating the number of rows the cell should span.

Example –

In the example above, the second cell in the first row has a rowspan of 2, so it spans two rows. This means that it covers the space of both the first and second rows in the table. As a result, the table structure appears as if it has two rows in the first column and three rows in the second column.

<table border="1">
  <tr>
    <td>Row 1, Cell 1</td>
    <td rowspan="2">Row 1, Cell 2 (spanning 2 rows)</td>
    <td>Row 1, Cell 3</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 3</td>
  </tr>
  <tr>
    <td>Row 3, Cell 1</td>
    <td>Row 3, Cell 2</td>
    <td>Row 3, Cell 3</td>
  </tr>
</table>

 

Table rowspan

In the context of HTML tables, the “rowspan” attribute is used to specify how many rows a table cell should span or cover vertically in a table.

This attribute allows you to create cells that occupy more than one row in a table, essentially merging rows together.

The rowspan attribute is applied to a <td> (table cell) or <th> (table header cell) element within a table row and determines how many rows the cell should extend across.

Example –

In this example, the first cell in the first row has a rowspan of 2, so it spans two rows. This means that it occupies the space of both the first and second rows in the table. As a result, the table appears as if it has only two rows in the first column and three rows in the second column.

<table border="1">
  <tr>
    <td rowspan="2">Cell 1 (spanning 2 rows)</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
  </tr>
</table>