資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 HTML5 建立表格的表頭單元格
概述
表格中的單元格是兩件事的交匯點：行和列。表頭是表格的第一行，其列包含資料在下方單元格中所屬類別的名稱。因此，在本問題中，我們將為表格建立表頭單元格。對於表頭單元格，表格行的交匯點“<tr>”和表格表頭列的交匯點“<th>”將在 HTML5 中為表格建立一個表頭單元格。
語法
在表格中建立表頭單元格的語法：
<tr> <th></th> <th></th> </tr>
<tr> − 表示表格行。
<th> − 表示表格表頭作為表格列。
演算法
步驟 1 − 在您喜歡的編輯器中建立一個 HTML 基本程式碼。
步驟 2 − 現在使用 HTML 的 <table> 標籤建立一個表格，並在表格標籤內使用 <thead> 和 <tbody> 分別定義表格的表頭和主體部分。要建立表頭單元格，不需要將 <thead> 標籤繼承到表格中。但是為了分隔表頭和主體，並在瀏覽器中工作時提供更多功能，我們應該將 <thead> 標籤繼承到表格中。
<table> <thead> </thead> <tbody> </tbody> </table>
步驟 3 − 開始使用 <tr> 標籤為表頭部分建立單元格，然後在其中繼承 <th> 標籤。
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
步驟 4 − 表格表頭單元格已成功建立。現在，如果需要，將資料插入表格主體部分，輸出將顯示在您的瀏覽器中。
示例
在給定的示例中，我們建立了一個表格來儲存員工的記錄。其中，表頭單元格是使用上面給出的語法建立的。由於表格的表頭包含 <th> 標籤，因此 <th> 標籤具有其預構建的屬性，可以增強表格表頭標籤內文字的顯示效果。表格表頭單元格中的 <th> 標籤使文字看起來更粗體。此外，在普通的表格主體文字中，<td> 標籤內的資料不會居中對齊，但在表格的表頭單元格中，我們不需要為單元格設定樣式以使文字居中。
<html>
<head>
<title>Creating a Header Cell</title>
</head>
<body>
<table border="" align="center" style="text-align: center;">
<thead>
<tr>
<th>S No.</th>
<th>Name</th>
<th>Profile</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alex</td>
<td>Developer</td>
<td>$500</td>
</tr>
<tr>
<td>2</td>
<td>Samuel</td>
<td>Network Eng.</td>
<td>$600</td>
</tr>
</tbody>
</table>
</body>
</html>
下面給出的圖片顯示了上述示例的輸出，其中我們為“員工記錄”表格建立了表格單元格。突出顯示的部分顯示了建立的四個表頭單元格，分別為員工的（序號、姓名、職位和薪資）。
結論
上面建立的表格是單元格的集合，其中插入了資料。作為表頭，表格的主體也包含單元格組。唯一的區別是表頭單元格是由“<tr>”和“<th>”的交匯點建立的，而主體單元格是由“<tr>”和“<td>”的交匯點建立的，這裡“<td>”表示 <tbody> 部分的表格資料。表頭單元格是在 <thead> 標籤內建立的，因為在將表格遷移到資料庫時，它會自動為資料庫的表格建立列。
216 次瀏覽
