Application of structured markup for HTML Web page table

before you talk about structured markup for a Web page, look at a few pictures first.

Html structure of the table

The so-called structure, as shown in the first image above, is to divide our table into three types: table header, body, footer. Thus, when we modify the part of the body of the table, it will not affect the other two parts, thus decoupling the coupling, convenient for our application.

Structured format

<table><thead>...</thead>--------Header Area <tbody>...</tbody>---------Table Body Area <tfoot>...< /tfoot>------------Footer Area </table>

Summary: By dividing the table into three parts, it is convenient for us to edit the table.

Html the title of the table

Each table has its own title, as shown in the second picture above, so how do you get the title to move with the content?

The title of the table

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

The property values under <caption> are:

Property name	Property value	Description
Align	Top	Title above the table
	Bottom	Title below the table

Summary: By setting the title of the table, you can make the title follow the table at any time.

Html Inline Format

What is a tabular format for inline formatting? What we usually see in Excel is to add a background color to the whole column, and that's what this is all about.

<colgroup>...<colgroup>

Property name	Property value	Description
Align	Left	On the left.
	Center	Examinations
	Right	On the right
valign	Right	On the right
	Top	Enter
	Middle	By the Middle
	Bottom	Lean down.
Span	Digital	Number of straight columns

Summary: By setting the tabular format of the table, we can deepen the color of the content we need, just for the column content.

The source code is as follows: