1.概述

表格的基本语法结构：
<table>
	<tr>
		<td>单元格内容</td>
		 ……
	</tr>
	<tr>
		<td>单元格内容</td>
		 ……
	</tr>
</table>
其中< table>用于声明一个表格对象， <tr>用于声明一行，<td>用于声明一个单元格。

注意：表格中所以的<tr></tr>标记都必须放到<table></table>标记之间。

例如：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>表格示例</title>
</head>
<body>
	<table width="300" border="2">
		<tr>
			<td>1</td>
			<td>2</td>	
			<td>3</td>
		</tr>
		<tr>
			<td>4</td>
			<td>5</td>
			<td>6</td>
		</tr>
	</table>
</body>
</html>

结果：

2.表格的基本结构

从结构上看，表格可以分成表头、主体和表尾三个部分，分别用<thead、<tbody>和<tfoot>标记表示。

注意：

1.表头和表尾在一张表格中只能有一个，而一张表格可以有多个主体。

2.对于大型表格来说，应该将<tfoot>出现在<tbody>的前面，这样浏览器显示数据时有利于加快表格的显示速度。

3.<thead>、<tbody>、<tfoot>标记内部都必须使用。
表格结构划分的好处：

1.可以先显示<tbody>的内容，而不必等整个表格下载完成后才能显示。

2.无论<thead>、<tbody>、 <tfoot>的顺序如何改变，<thead>的内容总是在表格的最前面，<tfoot>的内容总是在表格的最后面。

例如：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>表格基本结构</title>
</head>
<body>
	<table width="300" border="2">
		<thead>
			<tr>
				<th colspan="3" align="center">表头</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td colspan="3" align="center">这是表尾</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
		</tbody>

	</table>
</body>
</html>

结果：

表格相关标记的说明
元素	说明
tr	单元行，由若干单元格横向排列而成
td	单元格，包含表格数据
th	单元格标题，与td作用相似，但一般作为表头行的单元格
table	表格的最外层标记，代表一个表格
thead	表头分组
tfoot	表尾分组
tbody	表格主体分组
colgroup	列分组
caption	表格标题

3.表格的属性

使用<table>标记可以设置表格的高度、宽度、边框线的粗细、对齐方式、背景颜色、背景图片、单元格间距和边距等表格属性。

表格的属性及其说明
属性	说明
align	表格的对齐方式，通常是left (左对齐)、center (居中对齐)、right (右对齐
height	表格高度
width	表格宽度
bordercolor	表格边框的颜色
bgcolor	表格的背景颜色
border	表格边框
background	表格的背景图片
cellspacing	单元格之间的间距
cellpadding	单元格的内容与其边框的内边距

例如：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>表格的属性</title>
</head>
<body>
	<table border="2" width="400" bordercolor="red" height=60px cellspacing="2" align="center" bgcolor="pink">
		<caption>表格标题</caption>
		<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>专业</th>
		</tr>
		<tr>
			<td>123456</td>
			<td>张三</td>
			<td>软件工程</td>
		</tr>
	</table>
</body>
</html>

结果：

使用<table>标记可以从总体上设置表格属性，根据网页布局的需要，还可以单独对表格中的某行和某一个单元格进行属性设置。在HTML文档中，<tr>标记用来生成和设置表格中一行的标记，其属性的语法格式如下:
<tr height="行高" align="水平对齐方式" va1ign="垂直对齐方式" bgcolor="背景颜色">
其中valign属性(取值可以为top顶端对齐、middel居中对齐、bottom底端对齐)

例：对上面表格进行改动：在表格的第二行<tr>标记中，通过align属性设定表格水平方向为居中对齐:通过height属性设定表格高度为50像素;通过valign设定该行的垂直方向为顶端对齐:通过bgcolor属性设定该行的背景颜色为蓝色。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>表格的行属性</title>
</head>
<body>
	
	<table border="2" width="400px">
		<caption>学生信息</caption>
		<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>专业</th>
		</tr>
		<tr align="center" valign="top" height=50px bgcolor="blue">
			<td>8888</td>
			<td>张三</td>
			<td>软件工程</td>
		</tr>
	</table>
</body>
</html>

结果：

4.单元格合并

默认情况下，表格中每行的单元格高度和宽度都是一样的。跨行和跨列功能可以分别通过单元格的rowspan和colspan属性实现，其基本语法如下:
<td rowspan= "所跨行数”colspan=" 所跨列数">
注意：rowspan和colpan的属性值是一一个具体的数值

例如：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>合并单元格</title>
</head>
<body>
	<table border="2" width="400px">
		<tr>
			<td>1</td>
			<td>1</td>
			<td rowspan="2">1</td>
			<td>1</td>
		</tr>
		<tr>
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
		<tr>
			<td colspan="3">1</td>
			<td>1</td>
		</tr>
	</table>
</body>
</html>

结果：