A brief discussion on html table tag _HTML/Xhtml_web page production

WBOY
Release: 2016-05-16 16:42:14
Original
1504 people have browsed it

Mainly discuss its structure and some important properties. I'm going to introduce it in a slowly improving way.
1) The basic structure is as follows: represents a row in the table, represents a column in a row. Speaking of a column, you can actually
imagine it as a cell in word. is actually a cell, but it is used as a table title. From a semantic point of view,
says: indicates the data unit in the table, and indicates the title of a column or row in the table.

Copy code
The code is as follows:


< tr>



2) A title may be a row title or a column title. How to distinguish it? You need to use the scope attribute scope=row/col.


Copy code
The code is as follows:




< /table>

3) The table also has its own title, after dividing the table into multiple logical areas, you can use CSS to better
control the performance.




Copy code
The code is as follows:


Copy code
The code is as follows:





Table title
< ;/th>


4) Give the table Add introduction summary attribute

Copy code
The code is as follows:





Table title


5) Table border model and cell default padding.
Table borders can be displayed in two ways: separated and merged. border-collapse: separate/collapse The default style of IE6 is
separate, which looks three-dimensional. In fact, it's just that each cell has its own independent border. Merging is a shared border.
table { border-collapse: collapse; }
There is a 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:



< /tr>

Table title


6) Add some rows and columns. And add an id to each
.

Copy code
The code is as follows:






< ;th scope="col" id="databirthday">date of birth



td>wuhan
yichang
Table title
Name Address
ewee
hubei
19870102

419880103

19870205



7) Logically divide the table











>
This essay of mine only briefly talks about the structure of the table, I hope it will be useful.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Table title
Name Address Date of birth
ewee
hubei
19870102 td>
wuhan
419880103
yichang
19870205