What are the elements of a table in HTML?

 Table Elements in HTML

The elements of a table in HTML create tables with the <table> element, which acts as a container for all table content. Within the <table> element, you define rows using the <tr> (table row) element. Each row contains cells, which can be either header cells defined by the <th> (table header) element or data cells defined by the <td> (table data) element.

<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Row 1, Data 1</td>
    <td>Row 1, Data 2</td>
  </tr>
  <tr>
    <td>Row 2, Data 1</td>
    <td>Row 2, Data 2</td>
  </tr>
</table>

This code extracts a table with two header cells in the first row and two data cells in the subsequent rows. The <th> elements are  displayed in bold and centered by browsers. The <td> elements contain the actual data of the table.

Table Structure Elements (<thead>, <tbody>, <tfoot>)

 Longer tables, you can improve their structure and semantics by using the <thead> (table header), <tbody> (table body), and <tfoot> (table footer) elements.

• <thead>: This element is used to group the header rows of a table. It typically contains the <th> elements that describe the columns.
• <tbody>: This element encloses the main content rows of the table. It contains the <td> elements holding the data. Browsers often automatically insert the <tbody> element even if it’s not clearly specified.
• <tfoot>: This element is used to group the footer rows of a table. It can contain summary information or navigation related to the table.

<table>
  <thead>
    <tr>
      <th></th>
      <th>Column Heading 1</th>
      <th>Column Heading 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Row Heading 1</th>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <th>Row Heading 2</th>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td colspan="2">Summary or additional info</td>
    </tr>
  </tfoot>
</table>

Table Attributes: colspan and rowspan

The colspan and rowspan attributes are used on <th> and <td> elements to make a single cell span across multiple columns or rows, respectively.

• colspan: Specifies the number of columns a cell should span.
• rowspan: Specifies the number of rows a cell should span.

<table>
  <tr>
    <th></th>
    <th colspan="2">Headings Spanning Two Columns</th>
  </tr>
  <tr>
    <th>Row Heading 1</th>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <th rowspan="2">Row Headings Spanning Two Rows</th>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
  <tr>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
</table>

In this example, the “Headings Spanning Two Columns” header cell occupies two column widths due to colspan=”2″. The “Row Headings Spanning Two Rows” header cell extends down across two rows because of rowspan=”2″. When using colspan and rowspan, you omit the <td> or <th> elements that would have normally occupied the spanned area.

scope attribute in Table element

The scope attribute is used on <th> elements to clearly define which cells the header cell relates to, improving accessibility for users with assistive technologies like screen readers. The scope attribute can take the following values:

<table>
  <thead>
    <tr>
      <td></td>
      <th scope="col">Saturday</th>
      <th scope="col">Sunday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Tickets sold:</th>
      <td>120</td>
      <td>135</td>
    </tr>
    <tr>
      <th scope="row">Total sales:</th>
      <td>$600</td>
      <td>$675</td>
    </tr>
  </tbody>
</table>

In this example, the scope=”col” on “Saturday” and “Sunday” <th> elements indicates that they are headers for their particular columns. The scope=”row” on “Tickets sold:” and “Total sales:” <th> elements indicates that they are headers for their particular rows. This helps screen readers correctly associate data cells with their corresponding headers.

By using these elements and attributes correctly, you can create well-structured, semantically meaningful, and accessible HTML tables for displaying tabular data. Remember that in HTML5, tables should primarily be used for displaying data, and CSS should be used for page layout.

HTML5 Topics