On HTML table tag

Time:2021-9-24

This paper mainly discusses its structure and some important properties. I will introduce it in a slowly improving way.
1) The basic structure is as follows: < tr > represents a row in a table, < td > represents a column in a row. Say a column, actually
Think of it as a cell in word< Th > is actually a cell, but it is used as a table title. Semantically
Say: < td > indicates the data unit in the table, < th > indicates the title of a column or row in the table.

Copy code

The code is as follows:

<table>
<tr><th></th></tr>
<tr><td><td></tr>
</table>

2) A title may be a row title or a column title. How to distinguish? The scope attribute scope = row / COL is required.

Copy code

The code is as follows:

<table>
<tr><th scope=”col”></th></tr>
<tr><td><td></tr>
</table>

3) The table also has its own title < caption >

Copy code

The code is as follows:

<table>
< caption > table title < / caption >
<tr><th scope=”col”></th></tr>
<tr><td><td></tr>
</table>

4) Add a profile summary attribute to the table

Copy code

The code is as follows:

< table summary = “this is a brief introduction to the contents of a table” >
< caption > table title < / caption >
<tr><th scope=”col”></th></tr>
<tr><td><td></tr>
</table>

5) Table border model and cell default padding.
Table borders can be displayed in two ways: split and merge. Border collapse: separate / collapse IE6 the default style is
Separated, looks like three-dimensional. In fact, each cell has its own border. Merging is a shared border.
table { border-collapse: collapse; }
There is blank space between cells by default. You can use border spacing to control it. Because IE6 does not support it, it is rarely used. IE6
Use cellspacing.

Copy code

The code is as follows:

< table summary = “this is a brief introduction to the contents of a table” cellspacing = “0” >
< caption > table title < / caption >
<tr><th scope=”col”></th></tr>
<tr><td><td></tr>
</table>

6) Add some rows and columns. And add an ID to each < th >.

Copy code

The code is as follows:

< table summary = “this is a brief introduction to the contents of a table” cellspacing = “0” >
< caption > table title < / caption >
<tr>
< th scope = “col” > name < / th >
< th scope = “col” > address < / th >
< th scope = “col” > date of birth < / th >
</tr>
<tr>
<td>ewee<td>
<td>hubei<td>
<td>19870102<td>
</tr>
<tr>
<td>rewe<td>
<td>wuhan<td>
<td>419880103<td>
</tr>
<tr>
<td>ertww<td>
<td>yichang<td>
<td>19870205<td>
</tr>
</table>

7) Logical division of the table < thead > < tbody > < tFoot >, after dividing the table into multiple logical areas, CSS can be better used
Control performance.

Copy code

The code is as follows:

< table summary = “this is a brief introduction to the contents of a table” cellspacing = “0” >
< caption > table title < / caption >
<thead>
<tr>
< th scope = “col” > name < / th >
< th scope = “col” > address < / th >
< th scope = “col” > date of birth < / th >
</tr>
</thead>
<tbody>
<tr>
<td>ewee<td>
<td>hubei<td>
<td>19870102<td>
</tr>
<tr>
<td>rewe<td>
<td>wuhan<td>
<td>419880103<td>
</tr>
<tr>
<td>ertww<td>
<td>yichang<td>
<td>19870205<td>
</tr>
<tbody>
</table>

My essay only briefly talks about the structure of tables, hoping to be useful.

Recommended Today

OC basis

IOS development interview essential skills chart.png What are objects and what are the objects in OC? An object is an instance of a class; Is an instance created through a class, which is generally called an instance object; Common objects in OC include instance objects, class objects, and metaclass objects; What is a class? What […]