HTML表格嵌套、合并表格

时间:2022-11-20 11:00:44

一、表格元素< 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>

效果
HTML表格嵌套、合并表格

从以上效果和代码可以看出,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>

效果
HTML表格嵌套、合并表格


四、表格嵌套

- 在某个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>

效果
HTML表格嵌套、合并表格


以上的表格标题在table中写:

< caption>< h1>阿水的阿里blog< /h1>< /caption>
caption是表格标题居中,并且一直跟着表格,不管表格怎么移动