HTML5: Table
The role of a table is to display two-dimensional data. In HTML5, you are no longer allowed to use tables to control the layout of page content. Instead, you can use the new CSS table feature (CSS is not involved here and will be introduced later ). The following describes the HTML elements used to create tables.
Basic elements of table creation include table, tr, and td.
Table indicates the table in the HTML document. It supports the border attribute and is used to define the border width of the table;
Tr indicates the rows in the table;
Td indicates the cells in the table, including the following attributes:
1) colspan: specifies the number of columns that a cell can span;
2) rowspan: specifies the number of rows that a cell can span;
3) headers: Specifies the headers related to cells. This attribute does not produce any visual changes in normal browsers, but can be used by screen readers.
| Apples |
Green |
Medium |
| Oranges |
Orange |
Large |
A table with two or three rows is defined above. The advantage of using a table is that the browser ensures that the column width meets the widest content, so that the Row Height can satisfy the highest cell. You can add borders to a table by using the border attribute of the table element.
| Apples |
Green |
Medium |
| Oranges |
Orange |
Large |
The default border of the browser is not very beautiful. CSS is usually used to reset the border style for various elements. An irregular table uses the colspan and rowspan attributes of cells to construct an irregular table so that some rows or columns of the table span multiple cells. The following is an example of a cell that spans multiple columns:
| Month |
Savings |
| January |
| February |
The following is an example of a cell that spans multiple rows:
| Month |
Savings |
| January |
$100.00 |
$50 |
| February |
$10.00 |
The th element of the table header is used to add a table header. It can be used to differentiate data and describe data. The th element supports the following attributes:
1) colspan: specifies the number of columns that a cell can span;
2) rowspan: specifies the number of rows that a cell can span;
3) scope: defines how to associate the header data with the unit data;
3) headers: A list of header cell IDs separated by spaces to provide header information for data cells. This attribute does not produce any visual changes in normal browsers, but can be used by screen readers.
| Rank |
Name |
Color |
Size |
| Favorite: |
Apples |
Green |
Medium |
| 2nd Favorite: |
Oranges |
Orange |
Large |
| 3rd Favorite: |
Pomegranate |
A kind of greeny-red |
Varies from medium to large |
You can mix th and td in a row. The headers attribute of td can be used to associate a cell with a table header. The association is mainly used by screen readers and other disability-assisted technologies to simplify table processing. The headers attribute can be the id attribute value of one or more th cells:
| Name |
Email |
Phone |
Address |
| George Bush |
[Email protected] |
+ 789451236 |
Th Avenue New York, USA |
To construct a complex table header, use the colspan and rowspan attributes of th to construct a complex table header.
| Company in USA |
| Name |
Addr |
| Apple, Inc. |
1 Infinite Loop Cupertino, CA 95014 |
| Google, Inc. |
1600 Amphitheatre Parkway Mountain View, CA 94043 |
To add a structure to a table, you can use thead, tbody, and tfoot elements to add a structure to the table. This makes it easier to add CSS styles to each part of the table.
1) table topic
The tbody element indicates all rows that constitute the table topic, excluding the header row (expressed by thead element) and Table foot row (expressed by tfoot element ).
Note that most browsers automatically insert tbody elements when processing table elements.
2) Table Header
The thead element is used to mark the title row of a table. Without thead, all tr elements are considered part of the table body.
3) Add a footer
The tfoot element is used to mark the rows that make up the table feet. Before HTML5, The tfoot element can only appear before the tbody element, while in HTML5, The tfoot element can be placed behind the tbody.
The following is a comprehensive example using the tbody, thead, and tfoot elements.
| Rank |
Name |
Color |
Size |
| Rank |
Name |
Color |
Size |
| Favorite: |
Apples |
Green |
Medium |
| 2nd Favorite: |
Oranges |
Orange |
Large |
| 3rd Favorite: |
Pomegranate |
A kind of greeny-red |
Varies from medium to large |
You can use the caption element to add titles to a table to define a title for the table and associate it with the table.
Results of the 2011 Fruit Survey
| Rank |
Name |
Color |
Size |
| Rank |
Name |
Color |
Size |
| Favorite: |
Apples |
Green |
Medium |
| 2nd Favorite: |
Oranges |
Orange |
Large |
| 3rd Favorite: |
Pomegranate |
A kind of greeny-red |
Varies from medium to large |
A table can only contain one caption element. It does not need to be the first element of the table, but is always displayed above the table. Column grouping in a table, because tables are created by rows, column operations are not convenient, for example, defining a style for a column in a table. You can use the colgroup element to specify the group of columns.
| ISBN |
Title |
Price |
| 3476896 |
My first HTML |
$53 |
| 2489604 |
My first CSS |
$47 |
In the preceding example, two columns are specified. The first column contains the first two columns, the second column contains the remaining one, and different styles are specified for different groups. The span attribute of colgroup specifies the extended columns. If the span attribute is not specified, you can specify one or more col elements. The following example achieves the same effect as the preceding example.
| ISBN |
Title |
Price |
| 3476896 |
My first HTML |
$53 |
| 2489604 |
My first CSS |
$47 |
