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.
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.
|
| | < /table>
3) The table also has its own title
4) Give the table Add introduction summary attribute
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.
6) Add some rows and columns. And add an id to each .
Table title
Name |
Address | < ;th scope="col" id="databirthday">date of birth
ewee | | hubei |
| 19870102 |
|
td>wuhan
| 419880103 |
|
yichang
| 19870205 |
|
7) Logically divide the table , after dividing the table into multiple logical areas, you can use CSS to better control the performance.
Copy code | |