無邊框表格是使用 HTML 表格的網(wǎng)頁設(shè)計(jì)視圖。表格的使用簡(jiǎn)化了以最簡(jiǎn)單的形式呈現(xiàn)大量信息。

• 帶或不帶邊框的表格，用于項(xiàng)目之間的比較。
• 文本和數(shù)字信息都可以以表格格式呈現(xiàn)。

在 HTML 頁面中，很多表格結(jié)構(gòu)都是無邊框創(chuàng)建的。在表格設(shè)計(jì)中使用邊框取決于其用途?？梢允褂靡韵?HTML 創(chuàng)建頁面上的表格設(shè)計(jì)。

示例：

<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>

上面給出的表格結(jié)構(gòu)將以表格格式顯示數(shù)據(jù)，如下圖所示。

在上面給出的屏幕截圖中，邊框不可用。默認(rèn)情況下，表格設(shè)計(jì)中的邊框保持不可用。要啟用表格中的邊框，需要添加樣式邊框；這個(gè)邊框包含三項(xiàng)內(nèi)容，例如邊框的大?。ㄈ缫?px 為單位）、邊框的類型（如實(shí)心、薄、繼承等），第三個(gè)是顏色（如紅色、藍(lán)色、黑色、綠色，顏色代碼）。

table{
border : 1px solid #000000;
}

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

無邊框表格類型

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

1.嵌套桌

嵌套表是指表內(nèi)的表。嵌套表并不是一個(gè)好的做法，但在某些情況下，有必要在表內(nèi)使用表。由于其可訪問性和令人困惑的標(biāo)記，使用表格嵌套可能很荒謬。

示例：

在下面給出的表中，兩個(gè)表嵌套在父表列內(nèi)。

代碼：

<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>

風(fēng)格：

下面給出的樣式用于表示嵌套表格設(shè)計(jì)的更清晰視圖。

代碼：

<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>

輸出：

沒有邊框的父表。但內(nèi)部表格包含邊框。為了清晰表示，嵌套表中使用邊框。我們可以通過刪除與邊框相關(guān)的樣式來刪除嵌套表的邊框。

2.斑馬條紋表

斑馬條紋表格是指交替行中具有不同顏色的表格。交替行中的不同顏色可以更容易地區(qū)分彼此。通過顏色更容易看到表格的特定行。也可以使用 jQuery 在表格標(biāo)簽上添加樣式。

示例：

一個(gè)例子是基本的；這里的 HTML 標(biāo)簽表創(chuàng)建了一個(gè)表格設(shè)計(jì)，然后添加樣式以使該表成為斑馬條紋表。

代碼：

<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>

風(fēng)格：

下面給出的 CSS 使 HTML 表格出現(xiàn)斑馬條紋。

代碼：

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

輸出：

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

結(jié)論

無邊框表格是表格表示方式之一。表格格式也可以使用其他 HTML 標(biāo)簽來實(shí)現(xiàn)，例如 ul > li、div 等，但是使用 table 進(jìn)行表格結(jié)構(gòu)減少了樣式工作，而由于響應(yīng)式設(shè)計(jì)方法，div 進(jìn)行表格設(shè)計(jì)的使用正在增加。

以上是HTML 中的無邊框表格的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！