HTML表格

本文概述

HTML表标签用于以表格形式(行*列)显示数据。一行中可以有很多列。

我们可以在<tr>, <td>和<th>元素的帮助下使用<table>元素创建表格以表格形式显示数据。

在每个表中, 表行由<tr>标记定义, 表头由<th>定义, 表数据由<td>标记定义。

HTML表格用于管理页面的布局, 例如页眉部分, 导航栏, 正文内容, 页脚部分等。但是建议在表格上使用div标签来管理页面的布局。


HTML表格标签

标签 描述
<table> 它定义了一个表。
<tr> 它在表中定义一行。
<th> 它在表中定义标题单元格。
<td> 它在表中定义一个单元格。
<caption> 它定义了表格标题。
<colgroup> 它在表中指定一组一个或多个列以进行格式化。
<col> 它与<colgroup>元素一起使用以指定每个列的列属性。
<tbody> 用于将表中的正文内容分组。
<thead> 用于将表中的标题内容分组。
<tfooter> 用于将表中的页脚内容分组。

HTML表格示例

让我们看一下HTML表标记的示例。输出如上所示。

<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>

立即测试

输出:

名字 分数
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

在上面的html表中, 有5行和3列= 5 * 3 = 15个值。


带边框的HTML表

有两种方法可以为HTML表指定边框。

  1. 按HTML中表格的边框属性
  2. 通过CSS中的border属性

1)HTML Border属性

你可以在HTML中使用表格标记的border属性来指定边框。但是现在不建议这样做。

<table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>

立即测试

输出:

名字 分数
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

2)CSS Border属性

现在建议使用CSS的border属性在表格中指定边框。

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

立即测试

你可以通过border-collapse属性将所有边界折叠到一个边界中。它将使边界合而为一。

<style>
table, th, td {
  border: 2px solid black;
  border-collapse: collapse;
}
</style>

立即测试

输出:

Name 分数
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

带单元格填充的HTML表

你可以通过两种方式为表头和表数据指定填充:

  1. 通过HTML中表格的cellpadding属性
  2. 通过在CSS中填充属性

HTML table标记的cellpadding属性现在已过时。建议使用CSS。因此, 让我们看一下CSS的代码。

<style>
table, th, td {
  border: 1px solid pink;
  border-collapse: collapse;
}
th, td {
  padding: 10px;
}
</style>

立即测试

输出:

Name 分数
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

HTML表格宽度

我们可以使用CSS width属性指定HTML表的宽度。可以像素或百分比指定。

我们可以根据需要调整表格宽度。以下是显示宽度表格的示例。

table{
     width: 100%; 
    }

<!DOCTYPE html>
<html>
<head>
	<title>table</title>
	<style>
		table{
			border-collapse: collapse;
			width: 100%; 
		}
	th, td{
		border: 2px solid green; 
		padding: 15px;
	}
			 
	</style>
  </head>
<body>
  <table>
	<tr>
		<th>1 header</th>
		<th>1 header</th>
		<th>1 header</th>
	</tr>
	<tr>
		<td>1data</td>
		<td>1data</td>
		<td>1data</td>
	</tr>
	<tr>
		<td>2 data</td>
		<td>2 data</td>
		<td>2 data</td>
	</tr>
	<tr>
		<td>3 data</td>
		<td>3 data</td>
		<td>3 data</td>
	</tr>
</table>
</body>
</html>

立即测试

输出:

html表格宽度

带colspan的HTML表

如果要使一个单元格跨度超过一列, 则可以使用colspan属性。

它将一个单元格/行划分为多列, 并且列数取决于colspan属性的值。

让我们看一下跨越两列的示例。

CSS代码:

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
}
</style>

HTML代码:

<table style="width:100%">
  <tr>
  <th>Name</th>
  <th colspan="2">Mobile No.</th>
  </tr>
  <tr>
  <td>Ajeet Maurya</td>
  <td>7503520801</td>
  <td>9555879135</td>
  </tr>
</table>

立即测试

输出:

Name 手机号码。
阿耶特·莫里亚 7503520801 9555879135

带行距的HTML表

如果要使一个单元格跨度超过一行, 则可以使用rowspan属性。

它将一个单元格分成多行。划分的行数将取决于行跨度值。

让我们看一下跨越两行的示例。

CSS代码:

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 10px;
}
</style>

HTML代码:

<table>  
<tr><th>Name</th><td>Ajeet Maurya</td></tr>  
<tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>  
<tr><td>9555879135</td></tr>  
</table>

立即测试

输出:

Name 阿耶特·莫里亚
手机号码。 7503520801
9555879135

带标题的HTML表

HTML标题显示在表格上方。它只能在表标记之后使用。

<table>
<caption>Student Records</caption>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
<tr><td>Mike</td><td>Warn</td><td>60</td></tr>
<tr><td>Shane</td><td>Warn</td><td>42</td></tr>
<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
</table>

立即测试


样式化HTML表的偶数和奇数单元格

CSS代码:

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 10px;
}
table#alter tr:nth-child(even) {
  background-color: #eee;
}
table#alter tr:nth-child(odd) {
  background-color: #fff;
}
table#alter th {
  color: white;
  background-color: gray;
}
</style>

立即测试

输出:

html表奇偶

注意:你还可以使用表中的不同CSS属性来创建各种类型的表。


支持的浏览器

Element Chrome IE Firefox Opera Safari
<table> Yes Yes Yes Yes Yes
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?