HTML表格嵌套、合并表格

最新推荐文章于 2024-09-27 16:28:09 发布

superXX07

最新推荐文章于 2024-09-27 16:28:09 发布

阅读量1.5k

点赞数 2

原文链接：http://www.cnblogs.com/robinunix/p/9172881.html

版权

一、表格元素< table>

table常用属性

border：边框像素
width，height：表格宽度/高度
bordercolor：表格边框颜色
bgcolor：表格背景颜色

二、tr，th，td元素

th和td元素是在tr中的
一组tr代表一行
一组th或td代表一列

<table border="1" width="800" bordercolor="#777777" bgcolor="#5f9ea0"> <tr> <th>asa</th> </tr> <tr> <td>hahha</td> </tr> </table>

效果
这里写图片描述

从以上效果和代码可以看出，th表示表头，会自动居中，td表示普通内容

三、合并单元格(重点)

合并单元格在表格中是最重要的，需要两个属性colspan和rowspan
1.colspan：合并的是该行的单元格，就是同一行不同列的单元格合并，比如colspan=”2”则需要删除该行一个单元格，否则超出格子
2.rowspan：合并的是该列的单元格，同列不同行，与colspan一样若要rowspan=”2”将删除下一列的一个td或th标签，（不管删除下一列的哪一个，这一行被合并，其他元素都是在后面的，除了该列以前元素）

<table border="1" width="70" bordercolor="#777777" bgcolor="#5f9ea0"> <tr> <th>asa</th><th>asas</th><th>as</th> </tr> <tr> <td rowspan="2">hahha</td><td>hahha</td><td>hahha</td> </tr> <!-- rowspan合并该列的两个单元格，所以它的下一列将删除一个单元格--> <tr> <td colspan="2">hahha</td> </tr> <!--colspan合并该行的2个单元格，所以该行删除一个标签--> <tr> <td>hahha</td><td>hahha</td><td>hahha</td> </tr> </table>

效果
这里写图片描述

四、表格嵌套

- 在某个th或td中加table
- 最好在嵌套表格的地方用合并单元格（就是把嵌套的表格放入合并的单元格）

<table border="1" width="800" bordercolor="blue"> <caption><h1>阿水的阿里blog</h1></caption> <tr> <th>name</th> <th>password</th> <th>goal</th> </tr> <tr> <th>xlj</th><th colspan="2">001</th> </tr> <tr> <th>asa</th><th rowspan="2"><table border="1" width="800" bordercolor="blue"> <caption><h1>阿水的阿里blog</h1></caption> <tr> <th>name</th><th>password</th><th>goal</th> </tr> <tr> <th>xlj</th><th colspan="2">001</th> </tr> <tr> <th>asa</th><th rowspan="2">002</th><th>88</th> </tr> <tr> <th>add</th><th>76</th> </tr> </table></th><th>88</th> </tr> <tr> <th>add</th><th>76</th> </tr> </table>

五、表格练习代码

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>阿水的阿里</title> </head> <body> <table border="1" width="800" bordercolor="blue"> <caption><h1>阿水的阿里blog</h1></caption> <tr> <th>name</th> <th>password</th> <th>goal</th> </tr> <tr> <th>xlj</th><th colspan="2">001</th> </tr> <tr> <th>asa</th><th rowspan="2"><table border="1" width="800" bordercolor="blue"> <caption><h1>阿水的阿里blog</h1></caption> <tr> <th>name</th><th>password</th><th>goal</th> </tr> <tr> <th>xlj</th><th colspan="2">001</th> </tr> <tr> <th>asa</th><th rowspan="2">002</th><th>88</th> </tr> <tr> <th>add</th><th>76</th> </tr> </table></th><th>88</th> </tr> <tr> <th>add</th><th>76</th> </tr> </table> </body> </html>