详解HTML表格

(编辑：jimmy 日期: 2025/1/7 浏览：3 次 )

作用：数据的展示，表格应用场景.

<table>表格 <tr>行 <td>单元格

格式：

<table>

　　<caption>...</caption><!-表格标题，居中显示-->

　　<tr>

　　　　<th>...</th>...　<!-表格头，内容居中，加粗显示-->　

　　</tr>

　　<tr>

　　　　<td>...</td>...

　　</tr>

</table>

表格结构标签：加载一部分显示一部分更加便利.

划分三部分：表头（thead），主体（tbody），脚注（tfoot）这三个标签不能影响布局

<table>

　　<caption>...</caption>

　　<thead>

　　<tr>

　　　　<th>...</th>...　<!-表格头，内容居中，加粗显示-->　

　　</tr>

　　</thead>

　　<tbody>

　　<tr>

　　　　<td>...</td>...

　　</tr>

　　</tbody>

　　<tfoot>

　　<tr>

　　　　<td>...</td>...

　　</tr>

　　</tfoot>

</table>

table标签属性

tr 标签属性

<table>


　　<tr>

　　　　<td colspan="2"> ...</td>

　　　　<td> ...</td>

　　</tr>

　　 <tr>

　　　　<td>...</td>

　　　　<td>...</td>

　　　　<td>...</td>

　　</tr>

</table>

<table>

　　<tr>

　　　　<td> ...</td>

　　　　<td rowspan="2"> ...</td>

　　</tr>

　　 <tr>

　　　　<td>...</td>

　　　　<td>...</td>

　　　　<td>...</td>

　　</tr>

</table>

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

<table>

　　<tr>

　　　　<td> ...</td>

　　　　<td>　　

　　　　　　<table>

　　　　　　　　<tr>

　　　　　　　　　　<td> ...</td>

　　　　　　　　　　<td>.</td>

　　　　　　　　</tr>

　　　　　　</table>

　　　　</td>

　　</tr>

</table>

1.尽量少的使用表格嵌套。

2.尽量少的使用表格跨行跨列。

增加代码的整体维护成本。

使用表格进行网页结构布局一般不设置border

上一篇：html实现a元素href的URL链接自动刷新或新窗口打开功能
下一篇：html解决table设置宽度无效的问题