HTML 中的表格邊框

HTML 中的表格邊框用於在表格內容周圍顯示邊框。可以透過指定諸如 0 之類的值來設定表格周圍的邊框，表示表格儲存格周圍不顯示邊框，而值 1 設定為在表格儲存格周圍顯示邊框。表格寬度可以用數值來設置，以定義使用者想要在表格周圍提供多少粗邊框。可以為整個表格設定邊框，也可以為特定的行或列設定邊框，也可以只為表格標題設定邊框；一切皆有可能。

HTML 中表格邊框的語法

定義表格邊框的方式有多種；讓我們一一看看它們的語法：

1。通用表格邊框： 這通常用於定義表格周圍的簡單邊框，例如：

範例：

table, th, td{
border:1px solid blue;
}

2。可折疊表格邊框：此屬性用於使用 border-collapse 屬性在表格周圍的單行中設定可折疊邊框。

table{
border-collapse: collapse;
}

範例：

table{
border-collapse: collapse;
}
table, th, td{
border:0px;
}

3。表格周圍的邊框：此屬性允許我們僅在外緣新增表格邊框，而不是新增到每個單獨的表格儲存格，就像：

table {
border : 1px;
}

4。虛線表格邊框：只需使用以下語法即可將點線輪廓作為邊框添加到表格中： 

table{
border : 1px; dotted color-name;
}

5。虛線表格邊框：像虛線一樣，我們可以在表格或表格儲存格周圍設定虛線邊框。根據使用者透過設定值的選擇，這可以是薄的或厚的。

table{
border : 3px; dashed color-name;
}

6。雙表格邊框：如果我們想為表格添加雙輪廓，那麼也可以透過在 CSS 程式碼中設定屬性並在表格周圍新增雙邊框。

table{
border : 1px; double color-name;
}

7。表格單元格周圍的表格邊框：此語法幫助我們使用您喜歡的顏色代碼在各個單元格或任何特定表格單元格周圍設置邊框。在此語法中，我們希望分別為每個單元格新增邊框程式碼值。

table{
border : 1px; dotted color-name;
}
th{
border : 1px; color-name;
}
td{
border : 2px; color-name;
}

8。具有 CSS 類別的表格邊框：CSS 類別不是為每個單獨的表格儲存格設定邊框，而是幫助我們為表格提供通用邊框程式碼。這可以透過使用以下語法來完成：

<style>
table{
background-color: color-name;
}
table th{
CSS code
}
table td{
CSS code
}
</style>

9。表格底部邊框：表格邊框的此屬性用於在表格的 th 和 td 標籤之間提供水平分隔線，如下所示：

th, td{
border-bottom: value color-name;
}

10。圓角表格邊框：它將向表格邊框顯示圓角。

table{
border-radius: value;
border: value color-name;
}

HTML 中的表格邊框範例

以下是表格邊框的範例

範例#1

以下範例顯示了兩個具有不同邊框的不同表格。第一個表格顯示表格周圍的正常邊框，而第二個表格則是可折疊表格邊框格式的範例。

HTML 程式碼：

<style>
.collapsetable{
border-collapse: collapse;
border: 3px solid blue;
}
</style>

Genral Table Border

SR.NO	NAME	Education	AGE
1	Dinesh	BCA	26
2	Raj	CA	30
3	Deepti	ME	28
4	Akhilesh	B.com	21
5	Sara	MBA	26

Collapsible Table Border

Emp Code	Emp Name	Job Title	Salary(LPA)
911	Zoya Shaikh	Developer	3.6
912	Lisa Dev	Tester	2.8
913	Deepak Jadeja	Digital Marketing	5.2
914	Aditi Yewale	Developer	4
915	Simren Rao	HR	5.6

輸出：

範例#2

此範例展示如何僅針對具有不同表格邊框類型的外部部分設定表格邊框：

HTML 程式碼：

<style>
table{
border: 1px solid red;
border-collapse: collapse;
}
</style>


<h4 id="Table-with-outside-border">Table with outside border</h4>

Index	Seasons	Durations
1	Summer	4 months
2	Rainy Seasons	4 months
3	Winter	4 months

Table with dotted border

Index	Seasons	Durations
1	Summer	4 months
2	Rainy Seasons	4 months
3	Winter	4 months

Table with dashed border

Index	Seasons	Durations
1	Summer	4 months
2	Rainy Seasons	4 months
3	Winter	4 months

Table with double border

Index	Seasons	Durations
1	Summer	4 months
2	Rainy Seasons	4 months
3	Winter	4 months

輸出：此輸出顯示一個表格，表格外部有點線、虛線和雙邊框。

範例 #3

顯示表格單元格以不同顏色單獨邊框的範例：

HTML 程式碼：

<style>
table{
border: 3px solid red;
}
th{
border: 2px solid blue;
}
td{
border: 2px solid black;
}
</style>


<h4 id="Table-border-around-Cell">Table border around Cell</h4>

First Name	Last Name	City
Rita	Mishra	Mumbai
Rashmi	Patil	Nagpur
Kartik	Dev	Pune

輸出：

範例#4

另一個表格圓形邊框，以邊框作為水平分隔線

HTML 程式碼：

<style>
.round{
border-radius: 15px;
border: 2px solid purple;
padding: 5px;
}
th, td {
border-bottom: 1px solid black;
}
</style>


<h4 id="Table-border-around-Cell">Table border around Cell</h4>

Cake	Weight	Price
Chocalate	1/2 kg	400/-
Rasmalai	1 kg	850/-

輸出：

結論

• HTML 中的表格邊框透過指定值 1 來設置，以顯示表格周圍的邊框，而 0 則隱藏表格周圍的邊框。
• 可以在桌子周圍設置各種類型的邊框，例如簡單的粗邊框或細邊框、可折疊邊框、點邊框、雙邊框、虛邊框。

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