Table

Tables display data in the form of rows and columns.

<table>, <caption>

<table> is a block-level container tag, and all table content must be placed in this tag.

<table>
  ... ...
</table>

<caption> is always the first child element in <table>, which represents the title of the table. This element is optional.

<table>
  <caption>
    Sample table
  </caption>
</table>

<thead>, <tbody>, <tfoot>

<thead>, <tbody>, and <tfoot> are all block-level container elements, and they are all first-level child elements of <table>, representing the header, body and footer respectively.

<table>
  <thead>
    ... ...
  </thead>
  <tbody>
    ... ...
  </tbody>
  <tfoot>
    ... ...
  </tfoot>
</table>

All three elements are optional. If <thead> is used, then <tbody> and <tfoot> must be after <thead>. If <tbody> is used, then <tfoot> must be after <tbody>.

Multiple <tbody>s can be used inside a large table to represent multiple consecutive parts.

<colgroup>, <col>

<colgroup> is the first-level child element of <table>, used to contain the definition of a group of columns. <col> is a child element of <colgroup>, used to define a column of the table.

<table>
  <colgroup>
    <col />
    <col />
    <col />
  </colgroup>
</table>

The above code indicates that the table has 3 columns.

<col> is not only a single-use tag without an end tag, but also an empty element with no child elements. Its main function, in addition to declaring the structure of the table, can also add styles to the table.

<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 above code, <colgroup> declares that the table has three columns, and each column has its own class. You can use CSS to set styles for each class, which will take effect for the entire table.

<col> has a span attribute, the value is a positive integer, and the default is 1. If it is greater than 1, it means that the width of the column contains multiple consecutive columns.

<table>
  <colgroup>
    <col />
    <col span="2" />
    <col />
  </colgroup>
</table>

In the above code, the header of the table defines 3 columns, and the actual data has 4 columns. The second column of the header will span 2 consecutive columns.

<tr>

The <tr> tag represents a table row. If the table has <thead>, <tbody>, <tfoot>, then <tr> is placed in these container elements, otherwise it is placed directly at the next level of <table>.

<table>
  <tr>
    ...
  </tr>
  <tr>
    ...
  </tr>
  <tr>
    ...
  </tr>
</table>

The above code means that the table has 3 rows.

<th>, <td>

Both <th> and <td> are used to define table cells. Among them, <th> is the title cell, and <td> is the data cell.

<table>
  <tr>
    <th>student ID</th>
    <th>name</th>
  </tr>
  <tr>
    <td>001</td>
    <td>Zhang San</td>
  </tr>
  <tr>
    <td>002</td>
    <td>Li Si</td>
  </tr>
</table>

In the above code, there are three rows in the table. The first row is the header row, so <th> is used; the second and third rows are data rows, so <td> is used.

(1) colspan attribute, rowspan attribute

Cells may span multiple rows or columns. This must be set by the colspan property and the rowspan property. The former represents the number of columns the cell spans, and the latter represents the number of rows the cell spans. Their value is a non-negative integer, and the default is 1.

<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 above code, the first cell of the first row will span two columns.

(2) headers attribute

If the table is very large and there are many cells, it will be difficult to see which cell corresponds to which header in the source code. In this case, you can use the headers attribute.

<table>
  <tr>
    <th id="no">Student ID</th>
    <th id="names">Name</th>
  </tr>
  <tr>
    <td headers="no">001</td>
    <td headers="names">Zhang San</td>
  </tr>
  <tr>
    <td headers="no">002</td>
    <td headers="names">Li Si</td>
  </tr>
</table>

In the above code, the <th> of the title bar is set with the id attribute, and the headers attribute of the following <td> cell corresponds to the value of these id attributes, so these cells can be seen Which title bar corresponds to the grid.

The value of the headers attribute always corresponds to the value of the id attribute of the <th> tag. Since a cell can correspond to multiple title bars (in the case of inter-rows), the headers attribute can be a space-separated string corresponding to the value of multiple id attributes.

(3) scope property

The scope attribute is only supported by the <th> tag, and is generally not used in the <td> tag to indicate whether the <th> cell is the title of the column or the title of the column.

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Student ID</th>
    <th scope="col">Gender</th>
  </tr>
  <tr>
    <th scope="row">Zhang San</th>
    <td>001</td>
    <td>Male</td>
  </tr>
  <tr>
    <th scope="row">Li Si</th>
    <td>002</td>
    <td>Male</td>
  </tr>
</table>

In the above code, the title bar of the first row is all column headings, so the scope attribute of <th> is col, and the first column of the second and third rows is the row heading, so <th > The scopeproperty of thetag is row.

The scope attribute can take the following values.

-row: All cells in the row are related to the header cell. -col: All cells in the column are related to the header cell. -rowgroup: All cells of a row group composed of multiple rows are related to the header cell and can be used in conjunction with the rowspan attribute. -colgroup: All cells of a column group composed of multiple columns are related to the header cell and can be used in conjunction with the colspan attribute. -auto: The default value, which means it is determined by the browser.

The following is an example of the colgroup attribute and the rowgroup attribute.

<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 the above example, the scope attribute of the column heading "size" is colgroup, which means that the title cell corresponds to multiple columns (3 columns in this example); the scope attribute of the row heading is rowgroup, which means this The header cell corresponds to multiple rows (2 rows in this example).