HTML 中的表格边框-html教程-PHP中文网

HTML 中的表格边框用于在表格内容周围显示边框。可以通过指定诸如 0 之类的值来设置表格周围的边框，表示表格单元格周围不显示边框，而值 1 设置为在表格单元格周围显示边框。表格宽度可以用数值来设置，以定义用户想要在表格周围提供多少粗边框。可以为整个表格设置边框，也可以为特定的行或列设置边框，也可以只为表格标题设置边框；一切皆有可能。

HTML 中表格边框的语法

定义表格边框的方式有多种；让我们一一看看它们的语法：

1。通用表格边框： 这通常用于定义表格周围的简单边框，例如：

<table border="1 | 0">

登录后复制

示例：

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 代码：

<html>
<head>
<style>
.collapsetable{
border-collapse: collapse;
border: 3px solid blue;
}
</style>
</head>
<body>
<table border="1">
<caption><b>Genral Table Border</b></caption>
<tr>
<th>SR.NO</th>
<th>NAME</th>
<th>Education</th>
<th>AGE</th>
</tr>
<tr>
<td>1</td>
<td>Dinesh</td>
<td>BCA</td>
<td>26</td>
</tr>
<tr>
<td>2</td>
<td>Raj</td>
<td>CA</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>Deepti</td>
<td>ME</td>
<td>28</td>
</tr>
<tr>
<td>4</td>
<td>Akhilesh</td>
<td>B.com</td>
<td>21</td>
</tr>
<tr>
<td>5</td>
<td>Sara</td>
<td>MBA</td>
<td>26</td>
</tr>
</table>
<br>
<table class="collapsetable" border="1">
<caption><b>Collapsible Table Border</b></caption>
<tr>
<th>Emp Code</th>
<th>Emp Name</th>
<th>Job Title</th>
<th>Salary(LPA)</th>
</tr>
<tr>
<td>911</td>
<td>Zoya Shaikh</td>
<td>Developer</td>
<td>3.6</td>
</tr>
<tr>
<td>912</td>
<td>Lisa Dev </td>
<td>Tester</td>
<td>2.8</td>
</tr>
<tr>
<td>913</td>
<td>Deepak Jadeja</td>
<td>Digital Marketing</td>
<td>5.2</td>
</tr>
<tr>
<td>914</td>
<td>Aditi Yewale</td>
<td>Developer</td>
<td>4</td>
</tr>
<tr>
<td>915</td>
<td>Simren Rao</td>
<td>HR</td>
<td>5.6</td>
</tr>
</table>
</body>
</html>

登录后复制

输出：

HTML 中的表格边框

示例#2

此示例展示如何仅针对具有不同表格边框类型的外部部分设置表格边框：

HTML 代码：

<head>
<style>
table{
border: 1px solid red;
border-collapse: collapse;
}
</style>
</head>
<body>
<h4>Table with outside border</h4>
<table>
<tr>
<th>Index</th>
<th>Seasons</th>
<th>Durations</th>
</tr>
<tr>
<td>1</td>
<td>Summer</td>
<td>4 months</td>
</tr>
<tr>
<td>2</td>
<td>Rainy Seasons</td>
<td>4 months</td>
</tr>
<tr>
<td>3</td>
<td>Winter</td>
<td>4 months</td>
</tr>
</table>
<h4>Table with dotted border</h4>
<table style="border:2px dotted blue;">
<tr>
<th>Index</th>
<th>Seasons</th>
<th>Durations</th>
</tr>
<tr>
<td>1</td>
<td>Summer</td>
<td>4 months</td>
</tr>
<tr>
<td>2</td>
<td>Rainy Seasons</td>
<td>4 months</td>
</tr>
<tr>
<td>3</td>
<td>Winter</td>
<td>4 months</td>
</tr>
</table>
<h4>Table with dashed border</h4>
<table style="border:3px dashed green;">
<tr>
<th>Index</th>
<th>Seasons</th>
<th>Durations</th>
</tr>
<tr>
<td>1</td>
<td>Summer</td>
<td>4 months</td>
</tr>
<tr>
<td>2</td>
<td>Rainy Seasons</td>
<td>4 months</td>
</tr>
<tr>
<td>3</td>
<td>Winter</td>
<td>4 months</td>
</tr>
</table>
<h4>Table with double border</h4>
<table style="border:4px double yellow;">
<tr>
<th>Index</th>
<th>Seasons</th>
<th>Durations</th>
</tr>
<tr>
<td>1</td>
<td>Summer</td>
<td>4 months</td>
</tr>
<tr>
<td>2</td>
<td>Rainy Seasons</td>
<td>4 months</td>
</tr>
<tr>
<td>3</td>
<td>Winter</td>
<td>4 months</td>
</tr>
</table>
</body>

登录后复制

输出：此输出显示一个表格，表格外部带有点线、虚线和双边框。

HTML 中的表格边框

示例#3

显示表格单元格以不同颜色单独边框的示例：

HTML 代码：

<html>
<head>
<style>
table{
border: 3px solid red;
}
th{
border: 2px solid blue;
}
td{
border: 2px solid black;
}
</style>
</head>
<body>
<h4>Table border around Cell</h4>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>City</th>
</tr>
<tr>
<td>Rita</td>
<td>Mishra</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Rashmi</td>
<td>Patil</td>
<td>Nagpur</td>
</tr>
<tr>
<td>Kartik</td>
<td>Dev</td>
<td>Pune</td>
</tr>
</table>
</body>
<html>

登录后复制

输出：

HTML 中的表格边框

示例#4

另一个表格圆形边框，以边框作为水平分隔线

HTML 代码：

<html>
<head>
<style>
.round{
border-radius: 15px;
border: 2px solid purple;
padding: 5px;
}
th, td {
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<h4>Table border around Cell</h4>
<table class="round">
<tr>
<th>Cake</th>
<th>Weight</th>
<th>Price</th>
</tr>
<tr>
<td>Chocalate</td>
<td>1/2 kg</td>
<td>400/-</td>
</tr>
<tr>
<td>Rasmalai</td>
<td>1 kg</td>
<td>850/-</td>
</tr>
</table>
</body>
</html>

登录后复制

输出：

HTML 中的表格边框