学习笔记之HTML5-设计表格

最新推荐文章于 2024-10-24 15:38:47 发布

天然呆ftt

最新推荐文章于 2024-10-24 15:38:47 发布

阅读量748

点赞数 3

CC 4.0 BY-SA版权

文章标签： HTML5

本文链接：https://blog.youkuaiyun.com/feng_en_t/article/details/85269099

本文详细介绍了HTML5中表格的结构，包括<table>, <caption>, <colgroup>, <col>, <thead>, <tr>, <th>, <tbody>, <td>, <tfoot>等标签的使用，并探讨了表格属性如border和bordercolor，以及如何通过colspan和rowspan属性合并单元格。" 130817331,9080078,HBase优化实践：高可用与RowKey设计,"['数据库', '大数据', 'Hbase优化']

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

1. 表格结构

表格所用到的标签汇总

① <table>：定义表格。在<table>标签内部，可以放置表格的标题、行、列、单元以及其他的表格。

② <caption>：定义一个表格标题。<caption>标签必须紧随<table>标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

③ <colgroup>：定义表格列的分组。此元素只有在<table>标签内部才是合法的。

④ <col>：定义某个表格中针对一个或多个列的属性值。只能在表格或<colgroup>中使用此属性。

⑤ <thead>：定义表格的表头。

⑥ <tr>：在表格中定义一行。

⑦ <th>：定义表格内的表头单元格。此<th>元素内部的文本通常会呈现为粗体。

⑧ <tbody>：定义一段表格主体（正文）。使用<tbody>标签，可以将表格分为一个单独的部分。<tbody>标签可将表格中的一行或几行合成一组。在表格中包括两个或更多个<tbody>标签都是正确的，在<tbody>标签中，只有<tr>标签可以定义表格行。

⑨ <td>：定义表格中的一个单元格。

⑩ <tfoot>：定义表格的页脚（脚注）。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>index.html</title>
	</head>
	<body>
		<table>
			<caption>学生信息</caption> 
			<colgroup>
				<col id="name" />
				<col id="sex" />
				<col id="age" />
			</colgroup>
			<thead>
				<tr>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>					
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>小白</th>
					<td>男</td>
					<td>20</td>
				</tr>
				<tr>
					<th>小红</th>
					<td>女</td>
					<td>21</td>
				</tr>
				<tr>
					<th>小黑</th>
					<td>男</td>
					<td>22</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="3">页脚区域</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

浏览器显示效果：

2. 表格属性

<table>标签提供了border属性来定义边框粗细，默认为0，即默认不显示边框线。bordercolor属性定义边框的颜色。

表格居中显示：

<table align="center">

单元格包含对象水平：

<td align="center">1997年9月</td>

单元格包含对象垂直居中：

<td valign="middle">1997年9月</td>

3. 合并单元格

CSS目前还不支持该功能。一般使用<td>标签的专有属性实现。

如果要合并多列表单元格，可以使用colspan属性，为该属性指定一个值，则表示要合并的单元格数目。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>index.html</title>
	</head>
	<body>
		<table border="1">
			<tr>
				<td colspan="2">&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</table>
	</body>
</html>

如果要合并多行单元格，则可以使用rowspan属性来定义，为该属性指定一个值，则表示要合并的单元格数目。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>index.html</title>
	</head>
	<body>
		<table border="1">
			<tr>
				<td rowspan="2">&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>				
				<td>&nbsp;</td>
			</tr>
		</table>
	</body>
</html>