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>
</td>
<td>Hello</td>
</tr>
</table>
这里要注意几个问题：
-
内嵌表格是在
<td>标签内部内嵌<table>标签，再在内嵌的<table>标签内些<tr>等表格标头标签 -
注意标头插入的位置
标签：7.30,表格,标签,逼人,表头,Html,key,帅气 来源： https://www.cnblogs.com/JunkingBoy/p/15081229.html