创建表格的基本语法:
table 就是一个矩形盒子。用于定义一个表格。
tr 行,在表格盒子里面的。必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格
td 单元格,放到行 tr 里面的。必须嵌套在<tr></tr>标签中,一对 <tr> </tr>中包含几对<td></td>,就表示该行中有多少列(或多少个单元格)。
-
<tr></tr>中只能嵌套<td></td> 类的单元格
-
<td></td>标签,他就像一个容器,可以容纳所有的元素
<thead></thead>:用于定义表格的头部。一般包含网页的logo和导航等头部信息
<tbody></tbody>:用于定义表格的主体。一般包含网页中除头部和底部之外的其他内容。
以上两个标签都是放到table标签中。
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
表格属性:
表格有部分属性我们不常用,这里重点记住 cellspacing 、 cellpadding。
属性名 | 含义 | 常用属性值 |
border | 表格边框 (默认无边框) | 像素值 |
cellspacing | 单元格与单元格之间的空白间距 | 像素值 ( 默认2像素 ) |
cellpadding | 单元格内容与单元格边框之间的空白间距 | 像素值 ( 默认 1像素 ) |
表头单元格标签 th
表头单元格一般位于表格的第一行或第一列,其文本加粗居中,如下图所示,即为设置了表头的表格。设置表头非常简单,只需用表头标签th</th替代相应的单元格标签td</td即可。
<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>小王</td>
<td>女</td>
<td>110</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>120</td>
</tr>
</table>
表格标题 caption
-
caption 元素定义表格标题。
-
caption 标签必须紧随 table 标签之后。
-
这个标签只存在 表格里面
-
您只能对每个表格定义一个标题。通常这个标题会被居中且显示于表格之上。
合并单元格:
跨行合并:rowspan
跨列合并:colspan
合并单元格的思想: 将多个内容合并的时候,就会有多余的东西,把它删除。 例如 把 3个 td 合并成一个, 那就多余了2个,需要删除。
公式: 删除的个数 = 合并的个数 - 1
合并的顺序 先上 后下 先左 后右
-
先确定是跨行还是跨列合并
-
根据 先上 后下 先左 后右的原则找到目标单元格 (rowspan 是写到目标单元格上的