详解HTML表格

作用：数据的展示，表格应用场景.
<table>表格 <tr>行 <td>单元格

格式：

1. <table>
3. 　　<caption>...</caption><!-表格标题，居中显示-->
5. 　　<tr>
7. 　　　　<th>...</th>...　<!-表格头，内容居中，加粗显示-->　
9. 　　</tr>
11. 　　<tr>
13. 　　　　<td>...</td>...
15. 　　</tr>
17. </table>

复制代码

表格结构标签：加载一部分 显示一部分 更加便利.
划分三部分：表头（thead），主体（tbody），脚注（tfoot）这三个标签不能影响布局

1. <table>
3. 　　<caption>...</caption>
5. 　　<thead>
7. 　　<tr>
9. 　　　　<th>...</th>...　<!-表格头，内容居中，加粗显示-->　
11. 　　</tr>
13. 　　</thead>
15. 　　<tbody>
17. 　　<tr>
19. 　　　　<td>...</td>...
21. 　　</tr>
23. 　　</tbody>
25. 　　<tfoot>
27. 　　<tr>
29. 　　　　<td>...</td>...
31. 　　</tr>
33. 　　</tfoot>
35. </table>

复制代码

table标签属性

tr 标签属性

1. <table>
3. 　　<tr>
5. 　　　　<td colspan="2"> ...</td>
7. 　　　　<td> ...</td>
9. 　　</tr>
11. 　　 <tr>
13. 　　　　<td>...</td>
15. 　　　　<td>...</td>
17. 　　　　<td>...</td>
19. 　　</tr>
21. </table>

复制代码

1. <table>
3. 　　<tr>
5. 　　　　<td> ...</td>
7. 　　　　<td rowspan="2"> ...</td>
9. 　　</tr>
11. 　　 <tr>
13. 　　　　<td>...</td>
15. 　　　　<td>...</td>
17. 　　　　<td>...</td>
19. 　　</tr>
21. </table>

复制代码

说明：1.完整表格结构 2.放到<td>标签中

1. <table>
3. 　　<tr>
5. 　　　　<td> ...</td>
7. 　　　　<td>　　
9. 　　　　　　<table>
11. 　　　　　　　　<tr>
13. 　　　　　　　　　　<td> ...</td>
15. 　　　　　　　　　　<td>.</td>
17. 　　　　　　　　</tr>
19. 　　　　　　</table>
21. 　　　　</td>
23. 　　</tr>
25. </table>

复制代码

1.尽量少的使用表格嵌套。
2.尽量少的使用表格跨行跨列 。
增加代码的整体维护成本 。
使用表格进行网页结构布局一般不设置border
到此这篇关于详解HTML表格的文章就介绍到这了,更多相关HTML表格内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章，希望大家以后多多支持中国红客联盟！