数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 HTML 标签以表格形式显示数据？
在某些情况下，我们需要在网页上包含复杂或大量的数据，以便用户能够更容易理解和使用。在这种情况下，我们可以使用 HTML 表格来组织数据，以便用户更方便地浏览和理解。
HTML 表格是一种结构，可用于在网页上以表格形式（即以行和列的形式）显示数据。
我们可以使用以下 HTML 标签以表格形式显示数据：
<table> - 定义一个表格。
<th> - 定义表格中的表头单元格（标题）。
<tr> - 定义表格中的一行。
<td> - 定义表格中的一个单元格。
<caption> - 定义表格的标题。
<colgroup> - 指定表格中一列或多列用于格式化。
<col> - 指定 <colgroup> 元素内每一列的列属性。
<thead> - 对表格中的表头内容进行分组。
<tbody> - 对表格中的主体内容进行分组。
<tfoot> - 对表格中的脚注内容进行分组。
以下是 HTML 表格的基本布局：
<table>
<!--Header part begins-->
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<!--Header part ends-->
<!--Body part begins-->
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<!--Body part ends-->
<!--Footer part begins-->
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
<!--Footer part ends-->
</table>
现在，让我们看看下面的一些示例，其中我们使用上面讨论的 HTML 标签以表格形式显示数据。
示例
在下面的示例中，我们以表格形式显示了学生及其在各个科目中的分数数据：
<!DOCTYPE html>
<html>
<head>
<title>Tags to display the data in the tabular form</title>
<style>
table,
th,
td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Subjects</th>
<th>Zayn</th>
<th>Arjun</th>
<th>Kabir</th>
<th>Priya</th>
</tr>
</thead>
<tbody>
<tr>
<td>Maths</td>
<td>89</td>
<td>85</td>
<td>93</td>
<td>82</td>
</tr>
<tr>
<td>Social</td>
<td>95</td>
<td>90</td>
<td>91</td>
<td>95</td>
</tr>
<tr>
<td>English</td>
<td>81</td>
<td>85</td>
<td>96</td>
<td>93</td>
</tr>
<tr>
<td>Science</td>
<td>70</td>
<td>86</td>
<td>95</td>
<td>90</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>335</td>
<td>346</td>
<td>377</td>
<td>360</td>
</tr>
</tfoot>
</table>
</body>
</html>
示例
在下面的示例中，我们向表格添加了一个标题（使用 <caption> 标签）并对表格中的前两列进行了分组（使用 <colgroup> 标签）。
<!DOCTYPE html>
<html>
<head>
<title>Tags to display the data in the tabular form</title>
<style>
table, th, td {
border: 1px solid black;
}
caption {
font-weight: bolder;
color: brown;
}
</style>
</head>
<body>
<table>
<caption>Players List</caption>
<colgroup>
<col span="2" style="background-color:seagreen">
<col style="background-color:grey">
</colgroup>
<thead>
<tr>
<th>Cricket</th>
<th>football</th>
<th>Dart</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arjun</td>
<td>Manish</td>
<td>Kabir</td>
</tr>
<tr>
<td>Nikhil</td>
<td>Dev</td>
<td></td>
</tr>
<tfoot>
<tr>
<td>2</td>
<td>2</td>
<td>1</td>
</tr>
</tfoot>
</tbody>
</table>
</body>
</html>
更新于： 2023-08-04
444 次浏览
广告