Đường viền dày của bảng html

Lưu ý

Tỷ lệ sử dụng phần trăm làm đơn vị kích thước cho chiều rộng có nghĩa là phần tử này sẽ mở rộng như thế nào vì vậy với phần tử cha của nó, trong trường hợp này là phần tử

Độ rộng cột của bảng HTML

Để đặt kích thước của một cột cụ thể, chúng ta sử dụng thuộc tính

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

Ví dụ

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

View results

Chiều cao hàng của bảng HTML

Để đặt chiều cao của một hàng cụ thể, chúng ta sử dụng thuộc tính

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

Tuy sử dụng rất nhiều thuộc tính như vậy, nhưng chúng ta chỉ cần chú ý đến các "thuộc tính vị trí" là có thể sử dụng được tất cả các dạng cần thiết, chỉ những trường hợp riêng biệt mới cần sử dụng tới các tính năng

Thuộc tính

table, th, td {
  border: 1px solid black;
}

Theo mặc định, nội dung của các phần tử được căn giữa và nội dung của các phần tử được căn trái.

Ví dụ sau đây căn chỉnh văn bản trong phần tử :

Ví dụ

table, th, td {
  border: 1px solid black;
}

Thuộc tính vertical-align

Thuộc tính

table, th, td {
  border: 1px solid black;
}

Theo mặc định, căn chỉnh dọc của nội dung trong bảng là ở giữa [cho cả hai phần tử và ].

Ví dụ sau đặt căn chỉnh văn bản dọc thành dưới cùng cho các phần tử :

Ví dụ

table, th, td {
  border: 1px solid black;
}

Thuộc tính đệm

Để kiểm soát không gian giữa đường viền và nội dung trong bảng, hãy sử dụng thuộc tính

table, th, td {
  border: 1px solid black;
}

Ví dụ

table, th, td {
  border: 1px solid black;
}

Thuộc tính border-bottom

Thêm thuộc tính

table, th, td {
  border: 1px solid black;
}

Ví dụ

table, th, td {
  border: 1px solid black;
}

Selector. bay lượn

Sử dụng bộ chọn

table, th, td {
  border: 1px solid black;
}

Ví dụ

table, th, td {
  border: 1px solid black;
}

Bộ chọn nth-child[]

Để tạo 1 bảng kiểu chăn ngựa vằn, hãy sử dụng bộ chọn

table, th, td {
  border: 1px solid black;
}

table, th, td {
  border: 1px solid black;
}

Ví dụ

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

Thuộc tính background-color và color

Ví dụ dưới đây chỉ định màu nền và màu văn bản của các phần tử :

Ví dụ

table, th, td {
  border: 1px solid black;
}

Bảng đáp ứng với tràn-x. tự động

Với những màn hình quá nhỏ để hiển thị nội dung, nó sẽ thêm vào đó 1 thanh cuộn ngang. Chính vì thế để tạo 1 bảng tương thích [bảng đáp ứng] với tất cả các loại màn hình ta sử dụng, ta thêm 1 phần tử chứa [như

] với tràn-x. auto xung quanh phần tử để tạo sự tương thích cho nó