首页 > 技术文章 > HTML表格

luoblog0408 2020-07-24 16:10 原文

HTML表格语法与结构

<caption></caption>    <!-标题-->

<table> <!--表格-->
<tr> <!--行标签-->
<td></td> <!--单元格-->
<td></td>
</tr>
</table>

带结构的表格

 

<thead>  </thead>  表格的头
<tbody>  </tbody>  表格的主题(放数据本体)
<tfoot>    </tfoot>  表格的脚,放表格的脚注

ps:标签不能影响布局但是能划分结构

表格属性

width——规定表格的宽度

align——表格相对周围元素的对齐方式

border——规定表格边框的宽度

bgcolor——表格背景颜色

cellpadding——单元边沿与其内容之间的空白

cellspacing——单元格之间的空白

frame——规定外侧边框的哪个部分是可见的

rules——规定内侧边框的哪个部分是可见的

frame——外边框标签属性

void——不显示外侧边框

above——显示上部的外侧边框

below——显示下部的外侧边框

hsides——显示上部和下部的外侧边框

vsides——显示左部和右部的外侧边框

lhs——显示左部的外侧边框

rhs——显示右部的外侧边框

box——在所有死边上显示的外侧边框

border——在所有死边上显示的外侧边框

rules——内边框标签属性

none——没有线

groups——行组与列组之间的线条

rows——行之间的线条

cols——列之间的线条

all——行与列之间的线条

跨列属性

<table >
<tr>
<td colspan="2">xxxx</td>
<td>xxxx</td>
</tr>
<tr>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
</tr>
</table>

跨列合并,下一行就要多一个列,因为和上边的两个列合并了,实际上有三个列。

 

跨行属性

<table >
<tr>
<td>xxxx</td>
<td rowspan="2">xxxx</td>
<td>xxxx</td>
</tr>
<tr>
<td>xxxx</td>
<td>xxxx</td>
</tr>
</table>

跨行合并,下一行就减少一个列,因为上边的列和下边的列合并了。

表格嵌套

<table >
<tr>
<td>xxxx</td>
<td >
<table>
<tr>
<td>xxxx</td>
<td>xxxx</td>
</tr>
</table>
</td>

</tr>
<tr>
<td>xxxx</td>
<td>xxxx</td>
</tr>
</table>

说明:1.有完整的表格结构

2.要放到<td>标签中

想要哪个单元格里嵌表格,就在<td>里面加一个完整的表格结构

 

推荐阅读