HTML - table 标签_HTML 菜鸟教程

HTML <table> 标签，用于构建 HTML 表格。默认情况下，表数据保持对齐。HTML <table>提供了一种机制，用于根据单元格的行和列定义或派生数据，包括文本、照片、链接和其他类型的数据。

HTML <table> 元素与一个或多个 <tr>、<th> 和 <td> 元素一起组成一个 HTML 表格。表格行由 <tr>元素定义，表格标题由 <th> 元素定义，表格单元格由 <td> 元素定义。控制页面的布局，例如页眉部分、导航栏、正文文本和页脚部分。

语法

<table>
 ..... 
</table>

属性

<table> 标签支持 HTML 的全局属性和事件属性。下面提到的属性已被弃用，因此请使用 CSS 属性，而不是使用这些属性。

属性	值	描述
align	left right center justify	指定文本内容的对齐方式（已弃用）。
bgcolor	color	指定每个列单元格的背景色（已弃用）。
border	pixels	指定表周围的边框。（已弃用）。
cellpadding	pixels	单元格内容与其边框之间的空间（已弃用）。
cellspacing	pixels	指定两个单元格之间的空间大小。（已弃用）。
frame	void above below hsides vsides lhs rhs box border	指定必须显示围绕表的框架一侧（已弃用）。
rules	none groups cols all	定义规则（边框）在表中的显示位置（已弃用）。
summary	text	指定一个替代文本，用于汇总表的内容（已弃用）。
width	pixels	指定表的宽度（已弃用）。

<table> 标签示例

下面的例子将说明<table> 标签的用法。在何处、何时以及如何使用<table> 标签以及如何设置<table> 标签的样式。

创建简单表

让我们考虑以下示例，我们将在其中构造一个简单的<table> 标签表格。

<!DOCTYPE html>
<html>
	 <style>
			table,
			th,
			td {
				 border: 2px solid #6C3483;
			}
	 </style>
<body>
	 <table>
			<tr>
				 <th>Employee</th>
				 <th>Salary</th>
			</tr>
			<tr>
				 <td>Maya</td>
				 <td>32k</td>
			</tr>
			<tr>
				 <td>Raju</td>
				 <td>25k</td>
			</tr>
			<tr>
				 <td>Rahul</td>
				 <td>20k</td>
			</tr>
	 </table>
</body>
</html>

<table> 标签上的填充

考虑到另一种情况，我们将向表格中添加填充

<!DOCTYPE html>
<html>
	 <style>
			table,
			th,
			td {
				 border: 2px solid #82E0AA;
			}
			th,
			td {
				 padding: 11px;
			}
	 </style>
<body>
	 <table>
			<tr>
				 <th>Cars</th>
				 <th>Owners</th>
			</tr>
			<tr>
				 <td>BMW</td>
				 <td>Raju</td>
			</tr>
			<tr>
				 <td>RS7</td>
				 <td>Ravi</td>
			</tr>
			<tr>
				 <td>Audi</td>
				 <td>Maya</td>
			</tr>
	 </table>
</body>
</html>

使用 CSS 进行表格对齐

在下面的示例中，我们将使用 CSS 属性使表格向右对齐。

<!DOCTYPE html>
<html>
	 <style>
			table,
			th,
			td {
				 border: 2px solid #ABEBC6;
			}
	 </style>
<body>
	 <table style="float:right">
			<tr>
				 <th>Team</th>
				 <th>Points</th>
			</tr>
			<tr>
				 <td>CSK</td>
				 <td>16</td>
			</tr>
			<tr>
				 <td>MI</td>
				 <td>14</td>
			</tr>
			<tr>
				 <td>RR</td>
				 <td>14</td>
			</tr>
			<tr>
				 <td>KKR</td>
				 <td>12</td>
			</tr>
	 </table>
	 <p><br><br>
			The Indian Premier League is a men's Twenty20 cricket 
			league that is annually held in India and contested by 
			ten city-based franchise teams. The BCCI founded the 
			league in 2007.
	 </p>
</body>
</html>

表格背景颜色

以下示例，我们将向表格添加背景颜色。

<!DOCTYPE html>
<html>
	 <style>
			table,
			th,
			td {
				 border: 1px solid #6C3483;
			}
	 </style>
<body>
	 <table style="background-color:#ABEBC6 ">
			<tr>
				 <th>Owner</th>
				 <th>Pet</th>
			</tr>
			<tr>
				 <td>Maya</td>
				 <td>Cat</td>
			</tr>
			<tr>
				 <td>Raju</td>
				 <td>Dog</td>
			</tr>
			<tr>
				 <td>Ravi</td>
				 <td>Pomeranian</td>
			</tr>
	 </table>
</body>
</html>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - dd 标签 HTML - caption 标签 >>