Đường viền bảng HTML
Các bảng HTML có thể có các đường viền có kiểu dáng và hình dạng khác nhau.
Cách thêm đường viền
Để thêm đường viền, hãy sử dụng thuộc tính CSS border
trên các phần tử table
, th
và td
:
Đường viền bảng được 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 lại thành một đường viền duy nhất:
Đường viền bảng kiểu
Nếu bạn đặt màu nền cho mỗi ô và đặt đườ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:
Ví dụ
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Hãy tự mình thử »Biên giới bàn tròn
Với thuộc tính border-radius
, các đường viền có các góc tròn:
Bỏ qua đường viền xung quanh bảng bằng cách loại bỏ table
khỏi bộ chọn css:
Đường viền bảng chấm
Với thuộc tính border-style
, bạn có thể thiết lập hình thức của đường viền.
Các giá trị sau được cho phép:
-
dotted
-
dashed
-
solid
-
double
-
groove
-
ridge
-
inset
-
outset
-
none
-
hidden
Màu viền
Với thuộc tính border-color
, bạn có thể thiết lập màu của đường viền.