HTML(二)在网页中插入表格

一、基本方法

1)、<table></table>表示在网页上显示一张表;
2)、<table border = "1"></table>表示给表格加上边框;
3)、<th></th>表示标题表头;
4)、<tr></tr>表示行标签;
5)、<td></td>表示表格中的单元格;
表头1 表头1 表头1
文本11 文本12 文本13
文本21 文本22 文本23
文本31 文本32 文本33

网页中显示如下:
HTML(二)在网页中插入表格_第1张图片

二、合并单元格的方法

1)、跨列合并

关键字colspan
如:<td colspan = "2"></td>表示合并将本列和本列的下一列合并;

例1:

<table border="1">
			<tr>
				<th>表头1</th>
				<th>表头1</th>
				<th>表头1</th>
			</tr>
			<tr>
				<td>文本11</td>
				<td colspan="2">文本12</td>
			</tr>
			<tr>
				<td>文本21</td>
				<td>文本22</td>
				<td>文本23</td>
			</tr>
			<tr>
				<td>文本31</td>
				<td>文本32</td>
				<td>文本33</td>
			</tr>
		</table>

例一效果如下:

HTML(二)在网页中插入表格_第2张图片

例二:

 如果将上例中代码<td colspan="2">文本12</td>改变为
    <td >文本12</td>

例二效果如下:

HTML(二)在网页中插入表格_第3张图片

例三:

 如果将例一代码<td>文本11</td>
			 <td colspan="2">文本12</td>改变为
    		 <td colspan="3">文本11</td>

例三效果如下:

HTML(二)在网页中插入表格_第4张图片

2)、跨行合并

关键字rowspan
如:<td rowspan = "2"></td>表示合并将本行和本行的下一行合并;
方法和跨列合并雷同,就不在赘述。

总结:
a)、例一和例二对比得出,只有添加了合并表格关键字(colspan或者rowspan)表格才会合并;
b)、例一和例三对比得出,关键字后面的数字表示要合并的表格数量;
c)、合并以后的单元格位置的确定:
如合并文本11,文本12,文本13三列,合并以后单元格算为文本11;
如合并文本12,文本13,合并以后单元格算为文本12;

三、思考题

要得到下图,要如何写代码?
HTML(二)在网页中插入表格_第5张图片
欢迎在评论区留言探讨,必回!

你可能感兴趣的:(HTML(二)在网页中插入表格)