資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用表格標籤及其屬性設計表格
我們在本文中將執行的任務是使用<table>標籤及其屬性設計表格。為了建立表格的結構，我們使用<table>，然後使用屬性來設計表格。
讓我們深入本文，瞭解更多關於使用<table>標籤及其屬性建立表格的資訊。我們使用<table>標籤構建表格，並使用其屬性來設計表格。單元格間距、單元格填充、邊框、背景顏色和其他屬性將用於設計表格。
HTML <table> 標籤
有時我們需要在我們的網站或 Web 應用程式中以表格格式顯示我們的資料。為此，HTML 中有一個表格標籤，由<table>標籤定義，幷包含其他各種標籤，如<tr>、<td>、<th>和<caption>，這些標籤對於在我們的網頁上完成表格中的資料是必要的。
表格經常用於資料分析，以比較兩個或多個數據集，並將文字資訊與相應的數值資料一起傳達。
語法
以下是 HTML <table> 標籤的語法。
<table>…</table>
現在，讓我們看看下面的示例，以瞭解更多關於使用表格標籤及其屬性建立表格的資訊。
示例
以下示例中，我們將使用<table>標籤以及border屬性來構建表格。
<!DOCTYPE html>
<html>
<body style="background-color:#ABEBC6;">
<table border="2">
<tr>
<th>Name</th>
<th>Ipl_Team</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>CSK</td>
<td>India</td>
</tr>
<tr>
<td>Butler</td>
<td>RR</td>
<td>England</td>
</tr>
<tr>
<td>Williamson</td>
<td>GT</td>
<td>NewZealand</td>
</tr>
<tr>
<td>Pooran</td>
<td>LSG</td>
<td>West-Indies</td>
</tr>
</table>
</body>
</html>
執行以上程式碼後，輸出視窗將彈出，顯示錶格以及填充在表格中的資料，並在網頁上應用邊框。
示例
考慮以下情況，我們將使用colspan使單元格跨越多個列。
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 3px solid #D2B4DE;
border-collapse: collapse;
}
th,
td {
padding: 3px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Employee</th>
<th colspan="2">Address</th>
</tr>
<tr>
<td>Rahul</td>
<td>Current:Hyderabad</td>
<td>Permanent:Delhi</td>
</tr>
<tr>
<td>Maya</td>
<td>Current:Vizag</td>
<td>Permanent:Hyderabad</td>
</tr>
<tr>
<td>Raj</td>
<td>Current:Nellore</td>
<td>Permanent:Vijayawada</td>
</tr>
</table>
</body>
</html>
當以上程式執行時，它將生成一個輸出，其中包含一個使用colspan的表格，並應用了CSS，顯示在網頁上。
示例
讓我們看看下面的示例，我們將在這個表格中使用標題。
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 2px solid #DFFF00;
border-collapse: collapse;
}
th,
td {
padding: 11px;
}
</style>
</head>
<body>
<table>
<caption>Employee Details</caption>
<tr>
<th>Name</th>
<th>Department</th>
<th>Age</th>
</tr>
<tr>
<td>Kamal</td>
<td>IT</td>
<td>24</td>
</tr>
<tr>
<td>Raj</td>
<td>BPO</td>
<td>22</td>
</tr>
<tr>
<td>Maya</td>
<td>DEVELOPMENT</td>
<td>26</td>
</tr>
<tr>
<td>Sana</td>
<td>ASSOCIATE</td>
<td>27</td>
</tr>
</table>
</body>
</html>
執行以上程式後，它將顯示一個輸出，其中包含一個在網頁上建立的表格，以及應用的CSS和將在網頁上顯示的標題。
示例
在下面的示例中，我們將向我們將建立的表格新增背景顏色。
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 2px solid #7D3C98;
}
</style>
</head>
<body>
<table style="background-color:#ABEBC6 ">
<tr>
<th>Name</th>
<th>Country</th>
<th>Hobby</th>
</tr>
<tr>
<td>Mani</td>
<td>India</td>
<td>Playing Cricket</td>
</tr>
<tr>
<td>Mamboo</td>
<td>Nigeria</td>
<td>Listening Music</td>
</tr>
<tr>
<td>Black-Widow</td>
<td>Marvel</td>
<td>Avengers Wars</td>
</tr>
</table>
</body>
</html>
當以上程式碼執行時，它將生成一個輸出，其中包含應用了CSS的表格，顯示在網頁上。
更新於: 2023年9月8日
135 次瀏覽
廣告