7.30前端之Html表格
时间:2021-07-30
本文章向大家介绍7.30前端之Html表格,主要包括7.30前端之Html表格使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
涉及到的标签
-
<table>
-
<tr>
-
<th>
-
<td>
实现列排序、行排序、一列多值排序、一行多值排序等
标签逻辑
-
<table>
包裹内的内容是表格内容 -
<tr>
定义表头 -
<th>
是表头 -
<td>
是值
带边框属性的表格实例
<table border="1">
<tr>
<th>key</th>
<th>value</th>
</tr>
<tr>
<td>帅气逼人</td>
<td>的你</td>
</tr>
</table>
不带边框的表格实例
<table border="0">
<tr>
<th>key</th>
<th>value</th>
</tr>
<tr>
<td>帅气逼人</td>
<td>的你</td>
</tr>
</table>
<table>
<tr>
<th>key</th>
<th>value</th>
</tr>
<tr>
<td>帅气逼人</td>
<td>的你</td>
</tr>
</table>
垂直标题表格实例
<table border="1">
<tr>
<th>key</th>
<td>帅气逼人,的你</td>
</tr>
<tr>
<td>value</td>
<td>是真的帅气,真的逼人</td>
</tr>
</table>
带标题的表格--->用到新的标签<caption>
在表头元素前加上caption元素
<table border="1">
<caption>帅气逼人表</caption>
<tr>
<th>人名</th>
<th>长相程度</th>
</tr>
<td>Lucifer</td>
<td>和我一样</td>
</table>
单行跨格两列--->使用新标签<colspan>
<table border="1">
<caption>帅气逼人表</caption>
<tr>
<th>人名</th>
<th colspan="2">长相程度</th>
</tr>
<td>Lucifer</td>
<td>和我一样</td>
<td>真的帅气</td>
</table>
单列跨格两行--->使用新标签<rowspan>
<table border="1">
<tr>
<th rowspan="2">key</th>
<td>帅气逼人,的你</td>
</tr>
<tr>
<td>没人比你帅气</td>
</tr>
<tr>
<th>value</th>
<td>是真的帅气,真的逼人</td>
</tr>
</table>
要注意区分单列跨两行和单行跨两列的区别:
单行跨两列:
-
给
<th>
标签添加元素colspan -
在一个表头下写两个
<td>
值即可
单列跨两行:
-
给
<th>
标签添加元素rowspan -
要添加两行要令其表头填写
<td>
-
不需要重写
<th>
标签
表格内含表格等内容
<table border="1">
<caption>帅气程度表</caption>
<tr>
<td>
<p>这是一个段落</p>
<p>这里面有一些内容</p>
</td>
<td>这个单元格包含一个表格:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元格包含一个列表
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>