Để định kiểu cho đường viền (border)
của bảng trong CSS, sử dụng thuộc tính border.
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ụ 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 width và height.
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.
Đăng nhận xét