Các bảng HTML có thể có biên giới của các kiểu và hình dạng khác nhau.
Cách thêm đường viềnKhi bạn thêm một đường viền vào bảng, bạn cũng thêm các đường viền xung quanh mỗi ô bảng: Để thêm một đường viền, hãy sử dụng thuộc tính CSS border trên các phần tử table, th và <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
th,
td {
padding: 10px;
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
0:
Biên giới bảng sụp đổĐể tránh có các đường viền kép như trong ví dụ trên, hãy đặt thuộc tính CSS <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
th,
td {
padding: 10px;
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
1 thành <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
th,
td {
padding: 10px;
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
2.Điều này sẽ khiến các biên giới sụp đổ vào một biên giới duy nhất: Thí dụ bảng, th, td {& nbsp; & nbsp; biên giới: 1px màu đen rắn; & nbsp; Thu hẹp biên giới: sụp đổ;}
border: 1px solid black;
border-collapse: collapse;
} Hãy tự mình thử »
Phong cách bàn biên giớiNếu bạn đặt màu nền của mỗi ô và cho đường viền màu trắng (giống như nền tài liệu), bạn sẽ có ấn tượng về một đường viền vô hình: Thí dụ bảng, th, td {& nbsp; & nbsp; biên giới: 1px trắng rắn; & nbsp; Tiền biên giới: sụp đổ;} Th, td {& nbsp; Màu nền: #96D4D4; }
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
} Hãy tự mình thử »
Phong cách bàn biên giớiNếu bạn đặt màu nền của mỗi ô và cho đường viền màu trắng (giống như nền tài liệu), bạn sẽ có ấn tượng về một đường viền vô hình: Thí dụ bảng, th, td {& nbsp; & nbsp; biên giới: 1px màu đen rắn; & nbsp; Thu hẹp biên giới: sụp đổ;}
border: 1px solid black;
border-radius: 10px;
} Hãy tự mình thử »
Phong cách bàn biên giới
Nếu bạn đặt màu nền của mỗi ô và cho đường viền màu trắng (giống như nền tài liệu), bạn sẽ có ấn tượng về một đường viền vô hình:Thí dụ bảng, th, td {& nbsp; & nbsp; biên giới: 1px trắng rắn; & nbsp; Tiền biên giới: sụp đổ;} Th, td {& nbsp; Màu nền: #96D4D4; } <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
th,
td {
padding: 10px;
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
6 <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
th,
td {
padding: 10px;
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
7
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
th,
td {
padding: 10px;
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
8 <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
th,
td {
padding: 10px;
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
9 <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-style: ridge;
border-width: 150px;
border-color: #8ebf42;
background-color: #d9d9d9;
}
th {
border: 5px solid #095484;
}
td {
border: 20px groove #1c87c9;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
0 <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-style: ridge;
border-width: 150px;
border-color: #8ebf42;
background-color: #d9d9d9;
}
th {
border: 5px solid #095484;
}
td {
border: 20px groove #1c87c9;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
1 <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-style: ridge;
border-width: 150px;
border-color: #8ebf42;
background-color: #d9d9d9;
}
th {
border: 5px solid #095484;
}
td {
border: 20px groove #1c87c9;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
2 <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-style: ridge;
border-width: 150px;
border-color: #8ebf42;
background-color: #d9d9d9;
}
th {
border: 5px solid #095484;
}
td {
border: 20px groove #1c87c9;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
3 <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-style: ridge;
border-width: 150px;
border-color: #8ebf42;
background-color: #d9d9d9;
}
th {
border: 5px solid #095484;
}
td {
border: 20px groove #1c87c9;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
4
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-style: ridge;
border-width: 150px;
border-color: #8ebf42;
background-color: #d9d9d9;
}
th {
border: 5px solid #095484;
}
td {
border: 20px groove #1c87c9;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
5
Bàn tròn biên giớiVới tài sản <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
th,
td {
padding: 10px;
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
3, các biên giới được làm tròn các góc:
Để thêm đường viền vào HTML, trước tiên bạn cần biết cách tạo bảng HTML. Trong HTML, bạn có thể tạo các bảng bằng cách sử dụng thẻ kết hợp với và thẻ. Tìm hiểu về việc tạo một bảng HTML ở đây. Sau khi tạo bảng HTML, bạn nên thêm một đường viền vào nó, vì biên giới không được thêm vào theo mặc định. Đầu tiên, hãy để Lừa xem một ví dụ, trong đó chúng ta sử dụng thuộc tính biên giới HTML. border
attribute. Ví dụ về việc tạo bảng HTML với thuộc tính Border: border attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<table border="1">
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
Kết quả
| Người | Tuổi tác |
|---|
| Ann | 19 | | Susie | 22 |
Dù sao, chúng tôi khuyên bạn nên sử dụng thuộc tính Biên giới CSS để thêm đường viền vào bảng của bạn. Để thêm một đường viền vào bảng của bạn, bạn cần xác định bảng của bạn. Hãy nhớ thêm biên giới cũng cho và thẻ để có một bảng hoàn chỉnh. Đặt thuộc tính thu hẹp biên giới (nếu bạn không xác định được sự sụp đổ của biên giới, nó sẽ sử dụng sự kết hợp biên giới: tách biệt theo mặc định). Ví dụ về việc tạo biên giới cho bảng HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
th,
td {
padding: 10px;
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
Bạn có thể cung cấp kiểu dáng cho bảng của mình bằng thuộc tính tốc ký biên giới CSS hoặc các thuộc tính đường biên giới, kiểu biên giới, màu sắc biên giới, riêng biệt. Xem ví dụ dưới đây để có kết quả rõ ràng của các thuộc tính này. Ví dụ về việc thay đổi kiểu viền bảng HTML với CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-style: ridge;
border-width: 150px;
border-color: #8ebf42;
background-color: #d9d9d9;
}
th {
border: 5px solid #095484;
}
td {
border: 20px groove #1c87c9;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
Nếu bạn không muốn đường viền đi xung quanh bàn (hoặc nếu bạn cần các đường viền khác nhau ở mỗi bên của bảng), bạn có thể sử dụng bất kỳ thuộc tính nào sau đây: đường viền, đường biên giới, đáy biên và đáy biên và Biên giới-bên trái. Ví dụ về việc thêm đường viền dưới cùng vào bảng HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
}
td,
th {
padding: 10px;
border-bottom: 2px solid #8ebf42;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
Bạn cũng có thể có biên giới tròn bằng cách sử dụng thuộc tính Border-Radius CSS. Hãy nhớ rằng trong trường hợp này, bạn nên loại bỏ thuộc tính thu hẹp biên giới để hoạt động đúng. Hãy cùng xem một ví dụ trong đó tất cả các yếu tố bảng được làm tròn. Ví dụ về việc thêm đường viền tròn vào bảng HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
td,
th {
padding: 10px;
border: 2px solid #1c87c9;
border-radius: 5px;
background-color: #e5e5e5;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
Theo cách tương tự, bạn có thể thêm một đường viền vào các phần tử HTML khác. Hãy xem một ví dụ về việc thêm biên giới vào và các yếu tố. Ví dụ về việc thêm biên giới vào và các yếu tố:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2,
div,
p {
padding: 10px;
}
h2 {
border: 3px double #1c87c9;
background-color: #d9d9d9;
}
div {
border-left: 5px solid #1c87c9;
background-color: #cccccc
}
p {
border: 10px groove #8ebf42;
}
</style>
</head>
<body>
<h2>Border Example</h2>
<div> Div example for the border property.</div>
<p>Some paragraph with border.</p>
</body>
</html>
Nếu bạn muốn có một đường viền tròn trên các đoạn văn, hãy làm theo ví dụ dưới đây để tìm hiểu cách thực hiện nó. Sử dụng thuộc tính Border-Radius để có kết quả ưa thích của bạn. Ví dụ về việc tạo đường viền tròn trên đoạn văn:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
padding: 10px;
}
p.normal {
border: 2px solid #1c87c9;
}
p.round1 {
border: 2px solid #1c87c9;
border-radius: 5px;
}
p.round2 {
border: 2px solid #1c87c9;
border-radius: 8px;
}
p.round3 {
border: 2px solid #1c87c9;
border-radius: 12px;
}
</style>
</head>
<body>
<h2>Rounded borders</h2>
<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>
</body>
</html>
Làm cách nào để đặt một đường viền xung quanh một ô bảng?
Để thêm một đường viền vào bảng của bạn, bạn cần xác định bảng của bạn.Hãy nhớ thêm biên giới cũng cho và thẻ để có một bảng hoàn chỉnh.Đặt thuộc tính thu hẹp biên giới (nếu bạn không xác định sự sụp đổ của biên giới, nó sẽ sử dụng sự kết hợp biên giới: tách biệt theo mặc định).define the | 
