資料結構
網路
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+ 次檢視
廣告