Html入门(4)-表格标签

最新推荐文章于 2022-12-19 14:48:35 发布

shenqueying

最新推荐文章于 2022-12-19 14:48:35 发布

阅读量292

点赞数

分类专栏： HTML学习

本文链接：https://blog.csdn.net/shenqueying/article/details/80309243

版权

HTML学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、表格由 <table> 标签来定义。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容，俗称为列。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。<td>标签也可以用<th>来代替，th即table head，也就是表头，会居中加粗显示。

在我们建表格的时候，一般会先建表格再输内容。那么这个时候我们可以把内容设为11、12、13、21、22、23等等，便于以后在处理表格的时候能更高效的找到相应的单元格。例如像下面这样。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table border="1"  cellspacing="0px">
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
		</tr>
		
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr>
			<td>31</td>
			<td>32</td>
			<td>33</td>
			<td>34</td>
		</tr>
	</table>
</body>
</html>

记住，一定是行标签<tr>里面嵌套列标签<td>,列标签里面嵌套内容，不能反过来。

2、属性

(1)table的属性简介

(2)<tr>的属性

(3)<td>的属性

常用的是colspan跟rowspan属性，col即column（列）的缩写，colspan也就是横向和并列的意思，colspan="n",n为合并的列数，rowspan,row是行的意思，rowspan即纵向合并行，rowspan="n",n为合并的行数。一般来说，我们在建表格的时候，会把合全部表格都建上，并用11、12、13、21、22、23等进行表示。那么在合并表格时，被合并的部分在进行删除。

比如下面这个例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table border="1"  width="500px" height="500px" cellspacing="0px">
		<tr>
			<td align ="center">11</td>
			<td align ="center">12</td>
			<td align ="center">13</td>
			<td align ="center">14</td>
		</tr>
		
		<tr>
			<td align="center">21</td>
			<td align="center">22</td>
			<td align="center">23</td>
			<td align="center">24</td>
		</tr>
		<tr>
			<td align="center">31</td>
			<td align="center">32</td>
			<td align="center">33</td>
			<td align="center">34</td>
		</tr>
	</table>
</body>
</html>

如果我想合并22、23、24的话，就要这样操作

<tr>
    <td align="center">21</td>
    <td align="center" colspan="3">22</td>
    <!-- <td align="center">23</td>
    <td align="center">24</td> -->
</tr>

一定要将23、24这两个单元格删掉。同理rowspan也是这样操作

<tr>
<td align ="center">11</td>
<td align ="center" rowspan="3">12</td>
<td align ="center">13</td>
<td align ="center">14</td>
</tr>
		
<tr>
<td align="center">21</td>
<!-- <td align="center">22</td> -->
<td align="center">23</td>
<td align="center">24</td>
</tr>
<tr>
<td align="center">31</td>
<!-- <td align="center">32</td> -->
<td align="center">33</td>
<td align="center">34</td>
</tr>

shenqueying

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html入门(4)-表格标签

1、表格由 &lt;table&gt; 标签来定义。每个表格均有若干行（由 &lt;tr&gt; 标签定义），每行被分割为若干单元格（由 &lt;td&gt; 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容，俗称为列。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。&lt;td&gt;标签也可以用&lt;th&gt;来代替，th即table hea...
复制链接

扫一扫

专栏目录