A Table displays data in rows and columns.

<table>, <caption>

The <table> tag is a block-level container that must enclose all the table content.

1
2
3
<table>
  ... ...
</table>

The <caption>, which is always the first child element of <table>, provides the table’s title. This element is optional.

1
2
3
<table>
  <caption>Example Table</caption>
</table>

<thead>, <tbody>, and <tfoot>

The <thead>, <tbody>, and <tfoot> elements are block-level container elements that are direct children of <table>, representing the table’s header, body, and footer, respectively.

1
2
3
4
5
<table>
  <thead>... ...</thead>
  <tbody>... ...</tbody>
  <tfoot>... ...</tfoot>
</table>

These three elements are optional. If <thead> is used, <tbody> and <tfoot> must follow it. If <tbody> is used, <tfoot> must follow <tbody>.

For large tables, you can use multiple <tbody> elements to represent different sections of the table.

<colgroup> and <col>

The <colgroup> element is a child of the <table> tag and is used to group a set of column definitions. The <col> element, which is a child of <colgroup>, defines a single column in the table.

1
2
3
4
5
6
7
<table>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
</table>

In the code above, the table is defined with three columns.

The <col> element is a self-closing tag and does not have a closing counterpart. It is also an empty element, meaning it has no child elements. Its main purpose is to declare the table structure and apply styles.

1
2
3
4
5
6
7
8
9
10
11
12
<table>
  <colgroup>
    <col class="c1">
    <col class="c2">
    <col class="c3">
  </colgroup>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

In the example above, the <colgroup> defines three columns, each with its own class. CSS can be used to style each column based on its class, affecting the entire table.

The <col> element has a span attribute, which defaults to 1. If set to a value greater than 1, it indicates that the column spans multiple columns.

1
2
3
4
5
6
7
<table>
  <colgroup>
    <col>
    <col span="2">
    <col>
  </colgroup>
</table>

In this example, the table header defines three columns, but the second column spans across two columns in the actual table data.

<tr>

The <tr> tag represents a table row. If the table includes <thead>, <tbody>, or <tfoot>, the <tr> elements are placed within these sections. Otherwise, they are placed directly within the <table> element.

1
2
3
4
5
<table>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
</table>

The code above shows a table with three rows.

<th> and <td>

The <th> and <td> tags define cells in a table. <th> is used for header cells, while <td> is used for data cells.

1
2
3
4
5
6
7
8
9
10
11
<table>
  <tr>
    <th>Student ID</th><th>Name</th>
  </tr>
  <tr>
    <td>001</td><td>John Doe</td>
  </tr>
  <tr>
    <td>002</td><td>Jane Smith</td>
  </tr>
</table>

In the example above, the table has three rows. The first row is the header row, so it uses <th>. The second and third rows are data rows, so they use <td>.

(1) colspan and rowspan Attributes

Cells may span multiple rows or columns, which is set using the colspan and rowspan attributes. colspan specifies the number of columns a cell spans, while rowspan specifies the number of rows. Their default value is 1.

1
2
3
4
5
6
7
8
<table>
  <tr>
    <td colspan="2">A</td><td>B</td>
  </tr>
  <tr>
    <td>A</td><td>B</td><td>C</td>
  </tr>
</table>

In the example above, the first cell in the first row spans two columns.

(2) headers Attribute

For large tables, it might be unclear which headers correspond to which cells. The headers attribute can help by linking cells to their headers.

1
2
3
4
5
6
7
8
9
10
11
<table>
  <tr>
    <th id="no">Student ID</th><th id="names">Name</th>
  </tr>
  <tr>
    <td headers="no">001</td><td headers="names">John Doe</td>
  </tr>
  <tr>
    <td headers="no">002</td><td headers="names">Jane Smith</td>
  </tr>
</table>

In this example, the <th> elements have id attributes, and the headers attribute of the <td> elements refers to these id values, indicating which headers they correspond to.

The headers attribute value matches the id of <th> elements. It can also be a space-separated list of id values if a cell corresponds to multiple headers.

(3) scope Attribute

The scope attribute is used only with <th> tags, not <td>, to indicate whether the <th> cell is a row or column header.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Student ID</th>
    <th scope="col">Gender</th>
  </tr>
  <tr>
    <th scope="row">John Doe</th>
    <td>001</td>
    <td>Male</td>
  </tr>
  <tr>
    <th scope="row">Jane Smith</th>
    <td>002</td>
    <td>Female</td>
  </tr>
</table>

In this example, the header cells in the first row have scope="col" because they are column headers. The first cell in the second and third rows has scope="row" as it is a row header.

The scope attribute can have the following values:

  • row: The header applies to all cells in the row.
  • col: The header applies to all cells in the column.
  • rowgroup: The header applies to a group of rows, used with rowspan.
  • colgroup: The header applies to a group of columns, used with colspan.
  • auto: Default value, where the browser decides.

Here’s an example using colgroup and rowgroup:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<table>
  <thead>
    <tr>
      <th scope="col">Poster Name</th>
      <th scope="col">Color</th>
      <th colspan="3" scope="colgroup">Size</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3" scope="rowgroup">Zodiac</th>
      <th scope="row">Full color</th>
      <td>A2</td>
      <td>A3</td>
      <td>A4</td>
    </tr>
    <tr>
      <th scope="row">Black and white</th>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
    </tr>
    <tr>
      <th scope="row">Sepia</th>
      <td>A3</td>
      <td>A4</td>
      <td>A5</td>
    </tr>
  </tbody>
</table>

In this example, the header “Size” with scope="colgroup" spans multiple columns (3 columns), and the row header “Zodiac” with scope="rowgroup" spans multiple rows (3 rows).

The rendered result looks like this:

Poster Name Color Size
Zodiac Full color A2 A3 A4
Black and white A1 A2 A3
Sepia A3 A4 A5

Link to original article:

https://wangdoc.com/html/table