Bài đăng nổi bật

Để định kiểu cho đường viền (border) của bảng trong CSS, sử dụng thuộc tính border.
Ví dụ dưới đây chỉ định đường biên màu đen cho các phần tử <table>, <th>, và <td>:
table, th, td {
border: 1px solid black;
}
Lưu ý rằng bảng ở ví dụ trên có đường viền đôi. Điều này là bởi các phần tử <table>, <th> và <td> đều có đường viền riêng biệt.

Phá dỡ các đường viền của bảng

Thuộc tính border-collapse thiết lập các đường viền của bảng nhập vào thành một đường viền duy nhất:
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}

Chiều rộng và chiều cao của bảng

Chiều rộng và chiều cao của một bảng được xác định bởi các thuộc tính widthheight.
Ví dụ dưới đây đặt chiều rộng của bảng là 100%, và chiều cao của các phần tử <th> là 50px:
table {
width: 100%;
}
th {
height: 50px;
}

Căn chỉnh theo chiều ngang

Thuộc tính text-align thiết lập căn chỉnh theo chiều ngang (như trái, phải, hoặc giữa) cho nội dung bên trong <th> hoặc <td>.
Mặc định, nội dung của các phần tử <th> được canh giữa và nội dung của các phần tử <td> được canh trái.
Ví dụ sau văn bản trong <th> được canh lề trái:
th {
text-align: left;
}

Căn chỉnh theo chiều dọc

Thuộc tính vertical-lign dùng để thiết lập căn chỉnh theo chiều dọc (như trên, dưới, hoặc giữa) nội dung bên trong các phần tử <th> hoặc <td>.
Mặc định, căn chỉnh theo chiều dọc nội dung trong bảng là ở giữa (middle) (cho cả <th> và <td>).
Ví dụ sau thiết lập căn chỉnh văn bản xuống dưới (bottom) cho các phần tử <td>:
td {
height: 50px;
vertical-align: bottom;
}

Padding trong bảng

Để điều khiển khoảng cách giữa đường viền và nội dung bên trong một bảng, sử dụng thuộc tính padding cho các phần tử <td> và <th>:
td {
padding: 15px;
}

Màu sắc trong bảng

Ví dụ dưới đây chỉ định màu sắc của các đường viền; màu nền và màu chữ của phần tử <th>:
table, td, th {
border: 1px solid green;
}
th {
background-color: green;
color: white;
}

Ví dụ khác

Ví dụ này cho thấy cách thức để tạo ra một bảng đặc biệt.
Ví dụ này cho thấy cách thức thiết lập vị trí cho chú thích của bảng.

Tự làm bài tập!


Post a Comment

Mới hơn Cũ hơn