Đường viền bảng html

Các hướng dẫn xây dựng Web được tổ chức tốt và dễ hiểu với rất nhiều ví dụ về cách sử dụng HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML và hơn thế nữa.

Đường viền bảng HTML


Các bảng HTML có thể có các đường viền với 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 một biên giới, sử dụng CSS bordertài sản trên tablethvà tdcác yếu tố:

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:
  • dotted     
  • dashed     
  • solid     
  • double     
  • groove     
  • ridge     
  • inset     
  • outset     
  • none     
  • hidden     

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;
}


Không có đánh giá nào.

Viết một đánh giá.

Để bình luận vui lòng Đăng nhập tài khoản ! hoặcĐăng ký mới!