Table Borders
Để chỉ định đường viền table trong CSS, hãy sử dụng thuộc tính border.
Ví dụ dưới đây chỉ định một border liền cho các element <table>, <th> và <td>:
table, th, td { border: 1px solid; }
Full-Width Table
Table trên có vẻ nhỏ trong một số trường hợp. Nếu bạn cần một bảng kéo dài toàn bộ màn hình (toàn chiều rộng), hãy thêm width: 100% vào element <table>:
table { width: 100%; }Lưu ý rằng bảng trong các ví dụ trên có đường viền kép. Điều này là do cả bảng và các thành phần có đường viền riêng biệt. Để loại bỏ các đường viền kép, hãy xem ví dụ bên dưới.
Collapse Table Borders
Thuộc tính border-collapse đặt xem có nên thu gọn các đường viền table thành một đường viền duy nhất hay không:
table { border-collapse: collapse; }Nếu bạn chỉ muốn có đường viền xung quanh bảng, chỉ xác định thuộc tính border cho <table>:
table { border: 1px solid; }
Table Width and Height
Chiều rộng và chiều cao của bảng được xác định bởi các thuộc tính width và height.
Ví dụ bên dưới đặt chiều rộng của bảng thành 100% và chiều cao của các element <th> thành 70px:
table { width: 100%; } th { height: 70px; }Để tạo một bảng chỉ nên kéo dài một nửa trang, hãy sử dụng width: 50%:
table { width: 50%; }
CSS Table Alignment
Horizontal Alignment
Thuộc tính text-align đặt căn chỉnh theo chiều ngang (như trái, phải hoặc chính giữa) của nội dung trong <th> hoặc <td>.
Theo mặc định, nội dung của các element <th> được căn giữa và nội dung của các element <td> được căn trái.
Để căn giữa nội dung của các element <td>, hãy sử dụng text-align: center:
td { text-align: center; }Để căn trái nội dung, hãy buộc căn trái của các element <th>, với thuộc tính text-align: left:
th { text-align: left; }
Vertical Alignment
Thuộc tính vertical-align đặt căn chỉnh theo chiều dọc (như trên cùng, dưới cùng 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ả element <th> và <td>).
Ví dụ sau đặt căn chỉnh văn bản theo chiều dọc xuống dưới cùng cho các element <td>:
td { height: 50px; vertical-align: bottom; }
CSS Table Style
Table Padding
Để kiểm soát khoảng cách giữa border và content trong table, hãy sử dụng thuộc tính padding trên các element <td> và <th>:
th, td { padding: 15px; text-align: left; }
Horizontal Dividers
Thêm thuộc tính border-bottom vào <th> và <td> cho các dải phân cách ngang:
th, td { border-bottom: 1px solid #ddd; }
Hoverable Table
Sử dụng bộ chọn :hover trên <tr> để đánh dấu các hàng trong table khi di chuột qua:
tr:hover {background-color: coral;}
CSS Responsive Table
Table sẽ hiển thị thanh cuộn ngang nếu màn hình quá nhỏ để hiển thị toàn bộ nội dung:
Thêm một element (như <div>) với overflow-x:auto xung quanh element <table> để responsive:
<div style="overflow-x:auto;"> <table> ... table content ... </table> </div>