Đường viền bảng HTML
Các bảng HTML có thể có các đường viền theo các kiểu và hình dạng khác nhau.
Cách thêm đường viền
Khi bạn thêm đường viền vào bảng, bạn cũng thêm đường viền xung quanh mỗi ô trong bảng:
Để thêm đường viền, hãy sử dụng thuộc tính CSS trên bordervà
các
phần tử:tablethtd
Thí dụ
table, th, td
{
border: 1px solid black;
}
Đường viền bảng đã thu gọn
Để tránh có đường viền kép như trong ví dụ trên, hãy đặt thuộc tính CSS border-collapse
thành collapse.
Điều này sẽ làm cho các đường viền thu gọn thành một đường viền duy nhất:
Thí dụ
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Đường viền bảng kiểu
Nếu bạn đặt màu nền của mỗi ô và đặt đường viền màu trắng (giống như màu nền của tài liệu), bạn sẽ có ấn tượng về một đường viền vô hình:
Thí dụ
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Đường viền bàn tròn
Với thuộc border-radiustính, các đường viền có các góc được làm tròn:
Thí dụ
table, th, td {
border: 1px solid
black;
border-radius: 10px;
}
Bỏ qua đường viền xung quanh bảng bằng cách bỏ qua tablebộ chọn css:
Thí dụ
th, td {
border: 1px solid
black;
border-radius: 10px;
}
Đường viền bảng chấm
Với thuộc border-styletính, bạn có thể đặt hiện tượng của đường viền.
Các giá trị sau được cho phép:
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden
Thí dụ
th, td {
border-style: dotted;
}
Màu viền
Với thuộc border-colortính, bạn có thể đặt màu của đường viền.
Thí dụ
th, td {
border-color: #96D4D4;
}