Html:表格

最新推荐文章于 2021-12-13 15:28:01 发布

xiazdong

最新推荐文章于 2021-12-13 15:28:01 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：【Html、XHtml、CSS】文章标签： html border table class div

本文链接：https://blog.youkuaiyun.com/xiazdong/article/details/6816866

【Html、XHtml、CSS】专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了HTML表格的基本语法，包括如何创建表格、行、题头和普通单元格，并展示了表格常用属性如align、bgcolor、border等的使用方法。通过实例演示了表格的结构分类，包括表头、表主体和表尾的组织方式。此外，还讲解了如何在表格中嵌套表格以及列分组的概念。最后，提供了综合实例和列分组的实现方法。

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

<table>：表格创建

<tr>：一行的创建

<th>：一个题头

<td>：一个普通单元格

注意：td元素中一定要非空，不然不能显示背景色。

通常组织形式如下

<table>

<tr>

</tr>

</table>

下面介绍<table>的常用属性：

(1)align：可选left\center\right,表明左对齐、右对齐、中间对齐。

(2)bgcolor：背景颜色，可选red\blue等常用颜色。

(3)border：默认表是没边框的，因此这个是创建边框。

(4)cellpadding：单元格的边和实际文本的间隔。

(5)cellspacing：单元格之间的间隙。

下面是<tr>的常用属性：

(1)align：left、center、right。默认<td>左对齐，<th>中对齐

(2)bgcolor：背景色

下面是<td>和<th>的常用属性：

(1)abbr：提供单元格的缩写版本。

(2)bgcolor

(3)colspan：一个单元格跨越的列的数量。

(4)nowrap：阻止文本换行。nowrap = "nowrap"

(5)rowspan：跨越行的数量。

<html>
	<head><title>Home</title></head>
	<body>
		<table cellspacing = "2">
			<tr bgcolor = "orange">
				<th></th>
				<th>Saturday</th>
				<th>Sunday</th>
			</tr>
			<tr>
				<th bgcolor = "orange">Morning</th>
				<td>Hello world</td>
				<td>Hello world</td>
			</tr>
			<tr>
				<th bgcolor = "orange">Afternoon</th>
				<td>Hello world</td>
				<td>Hello world</td>
			</tr>
		</table>
	</body>
</html>

表的结构：

(1)表头：<thead>

(2)表主体：<tbody>

(3)表尾：<tfoot>

以上的元素对于外观没有任何影响，只是对于表格的一个归类。

<html>
	<head><title>demo</title></head>
	<body>
		<table border = "2">
		<caption>Table</caption>
			<thead>
				<tr>
					<td colspan = "3" align = "center">Head</td>
				</tr>
			</thead>
			<tbody>
			<tr>
				<th bgcolor = "orange">Afternoon</th>
				<td>Hello world</td>
				<td>Hello world</td>
			</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan = "3" align = "center">Foot</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

嵌套表：在<td>中再嵌套一个<table>

<html>
	<head><title>demo</title></head>
	<body>
		<table border = "2">
			<tr>
				<td colspan = "2">Page head</td>
			</tr>
			<tr>
				<td>
					Item1<br />
					Item2<br />
					Item3<br />
					Item4<br />
				</td>
				<td>
					<table>
						<tr><td>
							Article1
						</td></tr>
						<tr><td>
							Article2
						</td></tr>					
						<tr><td>
							Article3
						</td></tr>
					</table>
				</td>
			</tr>
			<tr>
				<td colspan = "2">Page end</td>
			</tr>
		</table>
	</body>
</html>

综合实例：

<html>
	<head><title>demo</title></head>
	<body>
		<table border = "2">
		<caption>Classic Movie Day</caption>
			<tr>
				<th></th>
				<th>5 pm</th>
				<th>7 pm</th>
				<th>9 pm</th>
				<th>11 pm</th>
			</tr>	
			<tr>
				<th>Screen one</th>
				<td>Star Wars</td>
				<td>Empire Strikes Back</td>
				<td>The Exorcist</td>
				<td>Return of the Jedi</td>
			</tr>
			<tr>
				<th>Screen two</th>
				<td colspan = "2">Dance</td>
				<td colspan = "2">Gone</td>
			</tr>
			<tr>
				<th>Screen three</th>
				<td colspan = "2">Empire Strikes Back</td>
				<td>The Exorcist</td>
				<td>Return of the Jedi</td>
			</tr>
		</table>
	</body>
</html>

列分组：<colgroup>

用div可以对行分组，但是不能对列分组。

<table>

<tr>

.......

</tr>

</table>