创建表格
基本语法格式如下:
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
- table用于定义一个表格。
- tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。
- td:用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,一对 <tr> </tr>中包含几对<td></td>,就表示该行中有多少列(或多少个单元格)。
注意: <td></td>标签,他就像一个容器,可以容纳所有的元素
表格属性
表格标题
表格的标题: caption
你只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
<table>
<caption>我是表格标题</caption>
</table>
合并单元格
跨行合并:rowspan 跨列合并:colspan
将多个内容合并的时候,就会有多余的东西,把它删除。 例如 把 3个 td 合并成一个, 那就多余了2个,需要删除。
公式: 删除的个数 = 合并的个数 - 1
合并的顺序 先上 后下 先左 后右
-
先确定是跨行还是跨列合并
-
根据 先上 后下 先左 后右的原则找到目标单元格
-
删除单元格 删除的个数 = 合并的个数 - 1
举个梨子
<table width="400" height="100" border="1">
<tr>
<td>123</td>
<td>abc</td>
<td>abc</td>
</tr>
<tr>
<td colspan="2">123</td>
<td>测试</td>
</tr>
<tr>
<td>123</td>
<td>abc</td>
<td>abc</td>
</tr>
</table>
效果如下:
<table width="400" height="100" border="1">
<tr>
<td>123</td>
<td>abc</td>
<td rowspan="3">abc</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>abc</td>
</tr>
</table>