第四课 HTML基本结构之二

最新推荐文章于 2022-07-13 11:08:15 发布

一个严肃的好人

最新推荐文章于 2022-07-13 11:08:15 发布

阅读量231

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB前端文章标签： WEB前端 HTML

本文链接：https://blog.youkuaiyun.com/feng950801/article/details/88079255

WEB前端专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了HTML中的表格元素，包括基本的<table>、<tr>、<td>标签使用，表头<th>，表格结构<theader>、<tbody>，表格标题<caption>，以及单元格合并(rowspan和colspan)的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.table表格：表格主要用处不是用来布局的，而是用在处理表格式的数据，如各种股票板块数据、商品参数；

<table>		<!-- 表格标签 -->
	<tr>	<!-- 行标签 -->
		<td>姓名</td>	<!-- 单元格标签 -->
		<td>性别</td>
		<td>年龄</td>
	</tr>
	<tr>	<!-- 行标签 -->
		<td>张三</td>	<!-- 单元格标签 -->
		<td>男</td>
		<td>23</td>
	</tr>
	<tr>	<!-- 行标签 -->
		<td>李四</td>	<!-- 单元格标签 -->
		<td>女</td>
		<td>25</td>
	</tr>
</table>

注意：

<table></table>中只能放<tr></tr>，<tr></tr>中间只能放<td></td>，<td></td>之间是一个容器，可以放任何标签；

表格的属性：

属性名	含义	常用属性值
border	设置表格的边框，默认为0，无边框	像素值
cellspacing	设置单元格与单元格之间的空白间距	像素值，默认为2
cellpadding	设置单元格内容与单元格边框之间的空白间距	像素值，默认为1
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格在网页中的水平对齐方式	left、center、right

<table border="1" cellspacing="0" cellpadding="20" align="center" width="500" height="200">		<!-- 表格标签 -->
	<tr>	<!-- 行标签 -->
		<td>姓名</td>	<!-- 单元格标签 -->
		<td>性别</td>
		<td>年龄</td>
	</tr>
	<tr>	<!-- 行标签 -->
		<td>张三</td>	<!-- 单元格标签 -->
		<td>男</td>
		<td>23</td>
	</tr>
	<tr>	<!-- 行标签 -->
		<td>李四</td>	<!-- 单元格标签 -->
		<td>女</td>
		<td>25</td>
	</tr>
</table>

2.表头标签：表头一般位于表格的第一行或者第一列，其文本加粗居中。设置表头非常简单，只需用表头标记<th></th>替代相应的单元格标记<td></td>即可；

3.表格结构（了解）：在使用表格进行布局时，可以将表格划分为头部、主体和页脚，所以可以用<thead></thead>定义表格的头部，必须位于<table></table>标签中，一般包含网页的logo和导航等头部信息；<tbody></tbody>用于定义表格的主体，位于<table></table>标签中，一般包含除头部和底部外的所有内容；<thead></thead>和<tbody></tbody>是并列的；底部有兼容性问题，不赘述；

<table border="1" cellspacing="0" cellpadding="20" align="center" width="500" height="200">		<!-- 表格标签 -->
	<thead>
		<tr>	<!-- 行标签 -->
			<th>姓名</th>	<!-- 单元格标签 -->
			<th>性别</th>
			<th>年龄</th>
		</tr>
	</thead>

	<tbody>
		<tr>	<!-- 行标签 -->
			<td>张三</td>	<!-- 单元格标签 -->
			<td>男</td>
			<td>23</td>
		</tr>
		<tr>	<!-- 行标签 -->
			<td>李四</td>	<!-- 单元格标签 -->
			<td>女</td>
			<td>25</td>
		</tr>
	</tbody>
</table>

4.表格标题：caption

<table border="1" cellspacing="0" cellpadding="20" align="center" width="500" height="200">		<!-- 表格标签 -->
	<caption>我是表格标题</caption>
	<thead>
		<tr>	<!-- 行标签 -->
			<th>姓名</th>	<!-- 单元格标签 -->
			<th>性别</th>
			<th>年龄</th>
		</tr>
	</thead>

	<tbody>
		<tr>	<!-- 行标签 -->
			<td>张三</td>	<!-- 单元格标签 -->
			<td>男</td>
			<td>23</td>
		</tr>
		<tr>	<!-- 行标签 -->
			<td>李四</td>	<!-- 单元格标签 -->
			<td>女</td>
			<td>25</td>
		</tr>
	</tbody>
</table>

注意：caption标签必须紧随table标签之后，只能对每一个表格定义一个标题，通常这个标题会被居中于表格之上；

5.合并单元格：跨行合并：rowspan，跨列合并：colspan；

<table border="1" cellspacing="0" cellpadding="20" align="center" width="500" height="200">		<!-- 表格标签 -->
	<caption>我是表格标题</caption>
	<thead>
		<tr>	<!-- 行标签 -->
			<td>姓名</td>	<!-- 单元格标签 -->
			<td>性别</td>
			<td>年龄</td>
		</tr>
	</thead>

	<tbody>
		<tr>	<!-- 行标签 -->
			<td rowspan="2">张三</td>	<!-- 单元格标签 -->
			<td>男</td>
			<td>23</td>
		</tr>
		<tr>	<!-- 行标签 -->
			<td>李四</td>	<!-- 单元格标签 -->
			<td colspan="2">女</td>
			<!-- <td>25</td> -->
		</tr>
	</tbody>
</table>