無邊框表格是使用 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;
}表格邊框可以更輕鬆地表示表格、行和列的分隔。
給出了無邊框表格的類型：
巢狀表是指表內的表。巢狀表並不是一個好的做法，但在某些情況下，有必要在表內使用表。由於其可訪問性和令人困惑的標記，使用表格嵌套可能很荒謬。
在下面給出的表中，兩個表嵌套在父表列內。
代碼：
<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>輸出：
沒有邊框的父表。但內部表格包含邊框。為了清晰表示，在巢狀表中使用邊框。我們可以透過刪除與邊框相關的樣式來刪除巢狀表的邊框。
斑馬條紋表格是指在交替行中具有不同顏色的表格。交替行中的不同顏色可以更容易地區分彼此。透過顏色更容易看到表格的特定行。也可以使用 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中文網其他相關文章！
