Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to construct HTML5 tables". Xiaobian shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to construct HTML5 tables" can help you solve the problem.

HTML5: Form Construction Form

The basic elements of a table include: table, tr, and td.

table represents a table in an HTML document, supports the border attribute, and is used to define the width of the table border;

tr represents a row in a table;

td represents a cell in a table and includes the following attributes:

1) colspan: Specify the number of columns that the cell can span;

2) rowspan: specifies the number of rows that cells can span;

Apples Green Medium Oranges Orange Large

The above defines a table with two rows and three columns. The advantage of using tables is that the browser will ensure that the column width meets the widest content and the row height meets the highest cell.

table borders

Use the border attribute of the table element to add borders to tables.

Apples Green Medium Oranges Orange Large

The default borders of browsers are not pretty, and CSS is often needed to style the borders for various elements.

irregular form

Using the colspan and rowspan properties of cells, you can construct an irregular table so that certain rows or columns of the table span multiple cells. Here is an example of a cell spanning multiple columns:

Month Savings January February

Here is an example of a cell that spans multiple rows:

Month Savings January $100.00 $50 February $10.00 header

The th element is used to add a header to a table and can be used to distinguish between data and descriptions of data. The th element supports the following attributes:

1) colspan: Specify the number of columns that the cell can span;

2) rowspan: specifies the number of rows that cells can span;

scope: defines the method of associating header data with unit data;

3) headers: A list of header cell IDs separated by spaces that provide header information for data cells. This attribute does not produce any visual changes in normal browsers, but can be used by screen readers.

RankName ColorSize Favorite: ApplesGreenMedium 2nd Favorite: OrangesOrangeLarge 3rd Favorite: PomegranateA kind of greeny-red Varies from medium to large

You can mix th and td in one line.

Associating Cells with Headers

Use the headers attribute of td to associate cells with headers, primarily for screen readers and other disability assistive 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 someone@example.com +789451236 Fifth Avenue New York,USA Construct Complex Headers

Complex headers can be constructed using the colspan and rowspan attributes of th.

Company in USA NameAddr Apple, Inc. 1 Infinite Loop Cupertino, CA 95014 Google, Inc. 1600 Amphitheatre Parkway Mountain View, CA 94043

Add structure to tables

You can use the thead, tbody, and tfoot elements to add structure to a table, which makes it easier to add CSS styles to various parts of the table.

1) Form subject

The tbody element represents all the rows that make up the subject of the table, excluding the header row (represented by the ad element) and the table foot row (represented by the tfoot element).

Note that most browsers automatically insert tbody elements when they process table elements.

2) Table header

The thead element is used to mark the header row of the table. Without the thead element, all tr elements are considered part of the table body.

3) Add footnote

The tfoot element is used to mark the rows that make up the table foot. Before HTML5, tfoot elements could only appear before tbody elements, but in HTML5 tfoot elements are allowed to appear after tbody elements.

Here is a synthesis example using tbody, thead, and tfoot elements.

RankNameColorSize RankNameColorSize Favorite: ApplesGreenMedium 2nd Favorite: OrangesOrangeLarge 3rd Favorite: PomegranateA kind of greeny-red Varies from medium to large Add a title to a table

Use the caption element to define a title for a table and associate it with the table.

Results of the 2011 Fruit Survey RankNameColorSize RankNameColorSize Favorite: ApplesGreenMedium 2nd Favorite: OrangesOrangeLarge 3rd Favorite: PomegranateA kind of greeny-red Varies from medium to large

A table can contain only one caption element, not necessarily the first element of the table, but always at the top of the table.

column grouping

In tables, because tables are organized by rows, it is not convenient to operate columns, such as defining styles for a column of a table. You can use the colgroup element to specify the grouping of columns

#colgroup1{background-color: red} #colgroup2{background-color: green; font-size=small} ISBN Title Price 3476896 My first HTML $53 2489604 My first CSS $47

The example above specifies two column groups, the first containing the first two columns and the second containing the remaining one column, and specifies different styles for different groups. The span attribute of colgroup specifies how many columns to extend, or one or more col elements if you do not specify the span attribute. The following example achieves the same effect as the above example.

#colgroup1{background-color: red} #col3{background-color: green; font-size=small} ISBN Title Price 3476896 My first HTML $53 2489604 My first CSS $47 That's all for "How to build HTML5 tables." Thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.