Định dạng bảng

Thuộc tính border

Thuộc tính border được dùng để tạo đường viền cho bảng.

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

Bảng trong ví dụ sẽ có đường viền kép do cả 2 phần tử bảng và th td có các đường viền riêng biệt.

Thuộc tính border-collapse

Thuộc tính border-collapse làm cho tất cả các đường viền của bảng gộp lại thành 1 đường viền duy nhất.

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

Nếu chỉ muốn một đường viền xung quanh bảng chúng ta dùng thuộc tính border cho duy nhất phần tử table.

Thuộc tính width và height

Thuộc tính width và height sẽ xác định chiều rộng và chiều cao của bảng

table {
    width: 100%;
}
th {
    height: 50px;
}

Thuộc tính text-align

Thuộc tính text-align thiết lập căn lề ngang (trái, phải hoặc giữa) cho nội dung trong phần tử <th> hoặc <td>.

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

th {
    text-align: left;
}

Thuộc tính vertical-align

• Thuộc tính vertical-align dùng để căn lề dọc (như trên, dưới hoặc giữa) của nội dung trong <th> hoặc <td>.

• 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ử <th> và <td>).

• 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ử

td {
    height: 50px;
    vertical-align: bottom;
}

Thuộc tính padding

Để 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 padding trên các phần tử <td> và <th>:

th, td {
    padding: 15px;
    text-align: left;
}

Thuộc tính border-bottom

Thêm thuộc tínhborder-bottom vào <th> and <td> để tạo các vạch chia ngang.

Bộ chọn :hover

Sử dụng bộ chọn:hover vào <tr> để tạo màu cho các hàng của bảng khi di chuột qua đó.

Bộ chọn nth-child()

Để tạo 1 bảng kiểu màu nền các dòng khác nhau, sử dụng bộ chọn nth-child() và thuộc tính background-color vào tất cả các hàng của bảng chẵn-even (hoặc lẻ-odd).

tr:nth-child(even) {
    background-color: #f2f2f2;
}

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

Tạo màu nền và màu văn bản của các phần tử.

th {
  background-color: #4CAF50;
  color: white;
}