HTML 中的無邊框表格

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

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

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

範例：

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

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

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

table{
border : 1px solid #000000;
}

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

無邊框表格類型

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

1.嵌套桌

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

範例：

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

代碼：

Description

Electricals & Electronics

Computers & Accessories

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.

Television	Washing Machine	Fan
Induction	Room Heater	Iron
Inverter Kits	Circuits	CPU
Keyboard	Mouse	Scanner

Laptop	Monitor	CPU
Keyboard	Mouse	Scanner

風格：

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

代碼：

<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 標籤表創建了一個表格設計，然後添加了樣式以使該表成為斑馬條紋表。

代碼：

S.No.	Country Code	Country	Phone Code
1	AW	Aruba	297
2	AU	Australia	61
3	AT	Austria	43
4	AZ	Azerbaijan	994
5	BS	Bahamas	1241
6	BH	Bahrain	973

風格：

下面給的 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中文網其他相關文章！