HTML之表格相关标签总结

一、概述

HTML表格由table标签以及一个或多个tr、th或td标签组成：table标签用来定义表格；tr标签用来定义表格中的行，它是单元格的容器，每行可以包含多个单元格；td标签和th标签用来定义单元格，所有单元格都在tr标签内，具体的表格内容放置在一对td标签或th标签之中，其语法如下：

<table>
    <tr>
        <th>第1行第1列的内容</th>
        <th>第1行第2列的内容</th>
        …
    </tr>
    <tr>
        <td>第2行第1列的内容</td>
        <td>第2行第2列的内容</td>
        …
    </tr>
    …
</table>

说明：th标签中的内容默认以粗体、居中的方式显示

二、table标签属性

1、border标签属性：设定围绕表格的边框的宽度。

注意：border标签属性不仅设置围绕表格边框的宽度，还为每个单元格添加宽度为1px的边框；实际开发中不建议使用border标签属性实现边框效果，建议通过为table、th和td设定border样式属性实现，示例如下：

<style>
	table{
		border: 1px solid black;
	}
	td{
		border: 1px solid black;
	}
</style>
<table>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

运行结果如下图：

2、width标签属性：设定表格的宽度。

注意：实际开发中，不建议通过width标签属性设置表格宽度，建议向table标签添加width样式属性进行设置，示例如下：

<style>
	table{
		width: 50%;
		border: 1px solid black;
	}
	td{
		border: 1px solid black;
	}
</style>
<table>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

运行结果如下图：

3、align标签属性：指定表格相对于周围标签的对齐方式。

该标签属性属性值如下：

值	描述
left	左对齐表格
right	右对齐表格
center	居中对齐表格

注意：不建议通过align标签属性设置表格相对于周围标签的对齐方式，建议向table标签添加样式属性进行设置：
a、实现左右对齐可以通过float样式属性实现：

值	描述
left	元素向左浮动
right	元素向右浮动
none	默认值。元素不浮动，并会显示在其在文本中出现的位置
inherit	规定应该从父元素继承 float 属性的值

b、居中对齐可以通过margin样式属性实现：margin: 0 auto;
示例如下：

<style>
	table{
		width: 50%;
		margin: 0 auto;
		border: 1px solid black;
	}
	td{
		border: 1px solid black;
	}
</style>
<table>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
</table>

运行结果如下图：

4、cellspacing标签属性：设定单元格之间的间距(单位：px)。

注意：不建议通过cellspacing标签属性设置单元格之间的间距，建议向table标签添加border-spacing样式属性进行设置，示例如下：

<style>
	table{
		width: 50%;
		margin: 0 auto;
		border-spacing: 0;
		border: 1px solid black;
	}
	td{
		border: 1px solid black;
	}