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中文网其他相关文章！