数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究在 CSS 中为表格添加边框
可以使用 CSS 的 `border` 属性轻松地为表格设置边框。还可以设置特定的边框，例如左边框、右边框、上边框等。此外，可以为左、右、上、下位置设置边框样式、宽度、颜色等。例如，这里左边框的样式和颜色与其他所有位置不同：
例如，这里上边框的样式和颜色与其他所有位置不同：
语法
CSS `border` 属性用于为元素定义边框。CSS `border` 属性的语法如下：
Selector {
border: /*value*/
}
为表格添加边框
示例
以下示例说明了 CSS `border` 属性：
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
caption-side: bottom;
border: 2px dashed black;
}
td {
border: 2px solid midnightblue;
text-align: center;
}
td[colspan] {
box-shadow: inset 0 0 10px lightblue;
text-align: center;
}
caption {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<h2<Ranking</h2>
<table>
<caption>Men's ODI Player Ranking</caption>
<tr>
<th>Player</th>
<th>Rank</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>2</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>3</td>
</tr>
<tr>
<td>Ross Taylor</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Sept2019</td>
</tr>
</table>
</body>
</html>
示例
让我们看另一个例子。我们设置了上、下、右和左边框：
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: 1em;
border: 3px double green;
border-right-style: dashed;
border-left-width: 17px;
border-bottom-color: orange;
}
td {
font-size: 24px;
border-right-style: dotted;
border-width: 3px;
border-right-color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>demo</td>
<td>text</td>
</tr>
<tr>
<td>goes</td>
<td>here</td>
</tr>
</table>
</body>
</html>
对于表格，我们也可以设置特定的边框。让我们看一些例子。
设置表格边框的样式
使用 CSS，可以轻松设置边框样式。还可以使用以下属性设置各个边框位置，例如左、右、上、下：
border-left-style
border-right-style
border-top-style
border-bottom-style
示例
让我们看一个设置表格边框样式的例子。在示例中，我们设置了左和右样式：
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
caption-side: bottom;
border: 2px solid black;
border-left-style: dashed;
border-right-style: dotted;
}
td {
border: 2px solid midnightblue;
text-align: center;
}
td[colspan] {
box-shadow: inset 0 0 10px lightblue;
text-align: center;
}
caption {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<h2<Ranking</h2>
<table>
<caption>Men's ODI Player Ranking</caption>
<tr>
<th>Player</th>
<th>Rank</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>2</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>3</td>
</tr>
<tr>
<td>David Warner</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Sept2023</td>
</tr>
</table>
</body>
</html>
设置表格边框的宽度
使用 CSS，可以轻松设置边框宽度。还可以使用以下属性设置各个边框位置，例如左、右、上、下：
border-left-width
border-right-width
border-top-width
border-bottom-width
示例
让我们看一个设置表格边框宽度的例子。在这个例子中，我们设置了上和下边框宽度：
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
caption-side: bottom;
border: 2px solid black;
border-top-width: 5px;
border-bottom-width: 5px;
}
td {
border: 2px solid midnightblue;
text-align: center;
}
td[colspan] {
box-shadow: inset 0 0 10px lightblue;
text-align: center;
}
caption {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<h2<Ranking</h2>
<table>
<caption>Men's ODI Player Ranking</caption>
<tr>
<th>Player</th>
<th>Rank</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>2</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>3</td>
</tr>
<tr>
<td>David Warner</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Sept2023</td>
</tr>
</table>
</body>
</html>
设置表格边框的颜色
使用 CSS，可以轻松设置边框颜色。还可以使用以下属性设置各个边框位置，例如左、右、上、下：
border-left-color
border-right-color
border-top-color
border-bottom-color
示例
让我们看一个设置表格边框颜色的例子。在这个例子中，我们为左、右、上和下边框设置了不同的颜色：
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
caption-side: bottom;
border: 5px solid black;
border-left-color: red;
border-right-color: green;
border-top-color: yellow;
border-bottom-color: orange;
}
td {
border: 2px solid midnightblue;
text-align: center;
}
td[colspan] {
box-shadow: inset 0 0 10px lightblue;
text-align: center;
}
caption {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<h2<Ranking</h2>
<table>
<caption>Men's ODI Player Ranking</caption>
<tr>
<th>Player</th>
<th>Rank</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>2</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>3</td>
</tr>
<tr>
<td>David Warner</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Sept2023</td>
</tr>
</table>
</body>
</html>
设置表格的左边框
示例
要仅设置表格的左边框，请使用 CSS 的 `border-left` 属性。让我们看一个例子：
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
caption-side: bottom;
border: 5px solid black;
border-left: 8px dashed red;
}
td {
border: 2px solid midnightblue;
text-align: center;
}
td[colspan] {
box-shadow: inset 0 0 10px lightblue;
text-align: center;
}
caption {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<h2<Ranking</h2>
<table>
<caption>Men's ODI Player Ranking</caption>
<tr>
<th>Player</th>
<th>Rank</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>2</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>3</td>
</tr>
<tr>
<td>David Warner</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Sept2023</td>
</tr>
</table>
</body>
</html>
设置表格的右边框
示例
要仅设置表格的右边框，请使用 CSS 的 `border-right` 属性。让我们看一个例子：
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
caption-side: bottom;
border: 5px solid black;
border-right: 7px dotted orange;
}
td {
border: 2px solid midnightblue;
text-align: center;
}
td[colspan] {
box-shadow: inset 0 0 10px lightblue;
text-align: center;
}
caption {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<h2<Ranking</h2>
<table>
<caption>Men's ODI Player Ranking</caption>
<tr>
<th>Player</th>
<th>Rank</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>2</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>3</td>
</tr>
<tr>
<td>David Warner</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Sept2023</td>
</tr>
</table>
</body>
</html>
设置表格的上边框
示例
要仅设置表格的上边框，请使用 CSS 的 `border-top` 属性。让我们看一个例子：
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
caption-side: bottom;
border: 5px solid black;
border-top: 7px dotted blue;
}
td {
border: 2px solid midnightblue;
text-align: center;
}
td[colspan] {
box-shadow: inset 0 0 10px lightblue;
text-align: center;
}
caption {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<h2<Ranking</h2>
<table>
<caption>Men's ODI Player Ranking</caption>
<tr>
<th>Player</th>
<th>Rank</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>2</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>3</td>
</tr>
<tr>
<td>David Warner</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Sept2023</td>
</tr>
</table>
</body>
</html>
设置表格的下边框
示例
要仅设置表格的下边框，请使用 CSS 的 `border-bottom` 属性。让我们看一个例子：
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
caption-side: bottom;
border: 5px solid black;
border-bottom: 7px double red;
}
td {
border: 2px solid midnightblue;
text-align: center;
}
td[colspan] {
box-shadow: inset 0 0 10px lightblue;
text-align: center;
}
caption {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<h2<Ranking</h2>
<table>
<caption>Men's ODI Player Ranking</caption>
<tr>
<th>Player</th>
<th>Rank</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>2</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>3</td>
</tr>
<tr>
<td>David Warner</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Sept2023</td>
</tr>
</table>
</body>
</html>
更新于: 2023年10月27日
2K+ 次查看
广告