HTML 中的無邊框表格

無邊框表格是使用 HTML 表格的網頁設計視圖。表格的使用簡化了以最簡單的形式呈現大量資訊。

• 有或沒有邊框的表格，用於項目之間的比較。
• 文字和數字資訊都可以以表格格式呈現。

在 HTML 頁面中，許多表格結構都是無邊框建立的。在表格設計中使用邊框取決於其用途。可以使用以下 HTML 建立頁面上的表格設計。

範例：

<table>
<thead>
<th>S.No</th>
<th>Name</th>
<th>Date of Birth</th>
<th>Profile</th>
<th>Salary</th>
</thead>
<tbody>
<tr>
<td>1</td><td>Jeff Smith</td>
<td>35</td>
<td>Assistant Manager</td>
<td>120,000</td>
</tr>
<tr>
<td>2</td>
<td>Maria Garcia</td>
<td>42</td>
<td>Department Head</td>
<td>85,000</td>
</tr>
<tr>
<td>3</td>
<td>David Rodriguez</td>
<td>37</td>
<td>Senior Sales Executive</td>
<td>45,000</td>
</tr>
<tr>
<td>4</td>
<td>Eyon Shih</td>
<td>32</td>
<td>Sales Executive</td>
<td>35,000</td>
</tr>
</tbody>
</table>

上面給出的表格結構將以表格格式顯示數據，如下圖所示。

在上面給出的螢幕截圖中，邊框不可用。預設情況下，表格設計中的邊框保持不可用。要啟用表格中的邊框，需要新增樣式邊框；這個邊框包含三個內容，例如邊框的大小（如以px 為單位）、邊框的類型（如實心、薄、繼承等），第三個是顏色（如紅色、藍色、黑色、綠色，顏色代碼）。

table{
border : 1px solid #000000;
}

表格邊框可以更輕鬆地表示表格、行和列的分隔。

無邊框表格類型

給出了無邊框表格的類型：

1.嵌套桌

巢狀表是指表內的表。巢狀表並不是一個好的做法，但在某些情況下，有必要在表內使用表。由於其可訪問性和令人困惑的標記，使用表格嵌套可能很荒謬。

範例：

在下面給出的表中，兩個表嵌套在父表列內。

代碼：

<table width="80%" cellspacing="0" cellpadding="5">
<thead>
<th>Description</th>
<th>Electricals & Electronics</th>
<th>Computers & Accessories</th>
</thead>
<tbody>
<tr>
<td class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</td>
<td>
<table width="400" cellspacing="0">
<tbody>
<tr>
<td>Television</td>
<td>Washing Machine</td>
<td>Fan</td>
</tr>
<tr>
<td>Induction</td>
<td>Room Heater</td>
<td>Iron</td>
</tr>
<tr>
<td>Inverter Kits</td>
<td>Circuits</td>
<td>CPU</td>
</tr>
<tr>
<td>Keyboard</td>
<td>Mouse</td>
<td>Scanner</td>
</tr>
</tbody>
</table>
</td>
<td>
<table width="250" cellspacing="0">
<tbody>
<tr>
<td>Laptop</td>
<td>Monitor</td>
<td>CPU</td>
</tr>
<tr>
<td>Keyboard</td>
<td>Mouse</td>
<td>Scanner</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

風格：

下面給出的樣式用於表示嵌套表格設計的更清晰視圖。

代碼：

<style type="text/css">
table th{
width: 200px;
text-align: center;
}
td.text{
text-align: justify;
padding: 5px;
}
table table, table table td{
border: 1px solid #000;
}
</style>

輸出：

沒有邊框的父表。但內部表格包含邊框。為了清晰表示，在巢狀表中使用邊框。我們可以透過刪除與邊框相關的樣式來刪除巢狀表的邊框。

2.斑馬條紋桌

斑馬條紋表格是指在交替行中具有不同顏色的表格。交替行中的不同顏色可以更容易地區分彼此。透過顏色更容易看到表格的特定行。也可以使用 jQuery 在表格標籤上新增樣式。

範例：

一個例子是基本的；這裡的 HTML 標籤表創建了一個表格設計，然後添加了樣式以使該表成為斑馬條紋表。

代碼：

<table width="50%" cellspacing="0">
<thead>
<th width="100">S.No.</th>
<th width="150">Country Code</th>
<th width="200">Country</th>
<th width="150">Phone Code</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>AW</td>
<td>Aruba</td>
<td>297</td>
</tr>
<tr>
<td>2</td>
<td>AU</td>
<td>Australia</td>
<td>61</td>
</tr>
<tr>
<td>3</td>
<td>AT</td>
<td>Austria</td>
<td>43</td>
</tr>
<tr>
<td>4</td>
<td>AZ</td>
<td>Azerbaijan</td>
<td>994</td>
</tr>
<tr>
<td>5</td>
<td>BS</td>
<td>Bahamas</td>
<td>1241</td>
</tr>
<tr>
<td>6</td>
<td>BH</td>
<td>Bahrain</td>
<td>973</td>
</tr>
</tbody>
</table>

風格：

下面給的 CSS 使 HTML 表格出現斑馬條紋。

代碼：

<style type="text/css">
table th, table td{
text-align: center;
}
tbody tr:nth-child(even) {
background: #e8e7e1;
}
</style>

輸出：

在下面給出的輸出中，我們可以看到如何交替具有不同顏色的表格行。

結論

無邊框表格是表格表示方式之一。表格格式也可以使用其他 HTML 標籤來實現，例如 ul > li、div 等，但是使用 table 進行表格結構減少了樣式工作，而由於響應式設計方法，div 進行表格設計的使用正在增加。

以上是HTML 中的無邊框表格的詳細內容。更多資訊請關注PHP中文網其他相關文章！