作用:数据的展示,表格应用场景.
<table>表格 <tr>行 <td>单元格
![](/d/20211016/f26db246e46ed69de2f080f5a94ffea8.gif)
格式:
<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>
![](/d/20211016/8f88f700b14fd47f7586ac386044655a.gif)
table标签属性
![](/d/20211016/3444957e775806aa8ab8bb78c97eeb53.gif)
![](/d/20211016/285769617042d24920862010fc5b3aed.gif)
tr 标签属性
![](/d/20211016/4a9a98d2e90d62fba385303dec8e33fc.gif)
![](/d/20211016/aa68f5f09d4c2eebdb5a189ae2ceb106.gif)
![](/d/20211016/4aa45e50fdf6bf5d7697e796a8982a06.gif)
<table>
<tr>
<td colspan="2"> ...</td>
<td> ...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
![](/d/20211016/7c0643c8c150d6c3a6627f5d2eab7b64.gif)
![](/d/20211016/6612bedb2e5e68e002e1d750cbbed30d.gif)
<table>
<tr>
<td> ...</td>
<td rowspan="2"> ...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
![](/d/20211016/53003b109e86d3bdf97783cd05f569ab.gif)
![](/d/20211016/d0beba946c1becd27fe7d17a4d6e4c60.gif)
说明:1.完整表格结构 2.放到<td>标签中
<table>
<tr>
<td> ...</td>
<td>
<table>
<tr>
<td> ...</td>
<td>.</td>
</tr>
</table>
</td>
</tr>
</table>
1.尽量少的使用表格嵌套。
2.尽量少的使用表格跨行跨列 。
增加代码的整体维护成本 。
使用表格进行网页结构布局一般不设置border
到此这篇关于详解HTML表格的文章就介绍到这了,更多相关HTML表格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!