資料結構
網路
關係型資料庫管理系統
作業系統
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 次瀏覽
廣告