Bảng trong CSS
Trong hướng dẫn này, bạn sẽ học cách tạo kiểu cho bảng trong HTML bằng CSS.
Tạo kiểu cho bảng với CSS
Bảng thường được sử dụng để hiển thị dữ liệu dạng bảng, chẳng hạn như báo cáo tài chính.
Nhưng khi bạn tạo một bảng HTML mà không có bất kỳ định dạng tùy chỉnh nào, các trình duyệt sẽ hiển thị chúng mà không có bất kỳ đường viền nào. Với CSS, bạn có thể cải thiện đáng kể diện mạo bảng của mình.
CSS cung cấp một số thuộc tính cho phép bạn kiểm soát bố cục và cách trình bày của các thành phần trong bảng. Trong phần sau, bạn sẽ thấy cách sử dụng CSS để tạo các bảng thanh lịch và nhất quán.
Tạo đường viền cho bảng
Thuộc tính border của CSS là cách tốt nhất để tạo đường viền cho các bảng.
Ví dụ sau đây sẽ tạo một đường viền màu đen cho các thẻ <table>, <th>và <td>.
table, th, td {
border: 1px solid black;
}Theo mặc định, trình duyệt vẽ một đường viền xung quanh bảng, cũng như xung quanh tất cả các ô, với một khoảng trống ở giữa, dẫn đến đường viền kép. Để loại bỏ vấn đề đường viền kép này, bạn chỉ cần thu gọn các đường viền các ô liền kề và tạo các đường viền đơn.
Hãy xem hình minh họa sau đây để hiểu cách áp dụng một đường viền cho một bảng.
Thu gọn đường viền bảng
Có hai mô hình để tạo đường viền trên các ô bảng trong CSS: tách biệt và thu gọn.
Trong mô hình đường viền riêng biệt, là mặc định, mỗi ô trong bảng có các đường viền riêng biệt, trong khi trong mô hình đường viền thu gọn, các ô bảng liền kề chia sẻ một đường viền chung. Bạn có thể chọn mô hình đường viền cho bảng HTML bằng cách sử dụng thuộc tính border-collapse của CSS.
Các quy tắc kiểu sau sẽ thu gọn đường viền cho bảng và áp dụng đường viền màu đen 1 pixel.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}Lưu ý: Bạn cũng có thể loại bỏ các khoảng trống giữa các ô trong bảng bằng cách gán giá trị của thuộc tính
border-spacingbằng 0. Tuy nhiên, nó chỉ loại bỏ khoảng trống giữa các đường viền nhưng không sáp nhập đường viền giống như khi bạn gán giá trị cho thuộc tínhborder-collapsebằngcollapse.
Điều chỉnh không gian bên trong bảng
Theo mặc định, trình duyệt tạo các ô trong bảng vừa đủ lớn để chứa dữ liệu trong các ô.
Để thêm không gian giữa nội dung bên trong ô bảng và đường viền ô, bạn chỉ cần sử dụng thuộc tính padding của CSS. Hãy thử ví dụ sau và xem nó hoạt động như thế nào:
th, td {
padding: 15px;
}Bạn cũng có thể điều chỉnh khoảng cách giữa các đường viền của các ô bằng cách sử dụng thuộc tính border-spacing của CSS, nếu các đường viền của bảng của bạn được phân tách (đó là mặc định).
Ví dụ sau áp dụng khoảng cách 10 pixel giữa tất cả các đường viền trong bảng:
table {
border-spacing: 10px;
}Đặt chiều rộng và chiều cao của bảng
Theo mặc định, một bảng sẽ hiển thị vừa đủ rộng và đủ cao để chứa tất cả nội dung của nó.
Tuy nhiên, bạn cũng có thể đặt chiều rộng và chiều cao của bảng cũng như các ô của bảng một cách rõ ràng bằng cách sử dụng thuộc tính width và height của CSS. Ví dụ sau sẽ đặt chiều rộng của bảng thành 100% và chiều cao của ô tiêu đề bảng là 40px.
table {
width: 100%;
}
th {
height: 40px;
}Kiểm soát bố cục bảng
Một bảng sẽ tự động co dãn để chứa dữ liệu bên trong nó. Đây là hành vi mặc định. Khi dữ liệu lấp đầy bên trong bảng, nó tiếp tục mở rộng miễn là có không gian. Tuy nhiên, đôi khi cần phải đặt chiều rộng cố định cho bảng để quản lý bố cục.
Bạn có thể làm điều này với sự trợ giúp của thuộc tính table-layout của CSS. Thuộc tính này xác định thuật toán được sử dụng để bố trí các ô, hàng và cột trong bảng. Thuộc tính này nhận một trong hai giá trị:
- auto – Sử dụng thuật toán sắp xếp bảng tự động. Với thuật toán này, độ rộng của bảng và các ô của nó được điều chỉnh để phù hợp với nội dung. Đây là giá trị mặc định.
- fixed – Sử dụng thuật toán bố trí bảng cố định. Với thuật toán này, bố cục theo chiều ngang của bảng không phụ thuộc vào nội dung của các ô; nó chỉ phụ thuộc vào chiều rộng của bảng, chiều rộng của các cột và đường viền hoặc khoảng cách ô. Nó thường nhanh hơn tự động.
Ví dụ sau chỉ định rằng bảng HTML được bố trí bằng cách sử dụng thuật toán bố cục cố định và có chiều rộng cố định là 300 pixel. Hãy dùng thử và xem nó hoạt động như thế nào:
table {
width: 300px;
table-layout: fixed;
}Mẹo: Bạn có thể tối ưu hóa hiệu suất hiển thị bảng bằng cách chỉ định giá trị
fixedcho thuộc tínhtable-layout. Giá trị cố định của thuộc tính này khiến bảng được hiển thị từng hàng một, cung cấp cho người dùng thông tin với tốc độ nhanh hơn.
Lưu ý: Không nên sử dụng giá trị
fixedcho thuộc tínhtable-layouttrên các bảng lớn, người dùng sẽ không nhìn thấy bất kỳ phần nào của bảng cho đến khi trình duyệt hiển thị toàn bộ bảng.
Căn chỉnh văn bản bên trong ô bảng
Bạn có thể căn chỉnh nội dung văn bản bên trong các ô của bảng theo chiều ngang hoặc chiều dọc.
Căn chỉnh văn bản theo chiều ngang của ô
Để căn chỉnh văn bản theo chiều ngang bên trong các ô của bảng, bạn có thể sử dụng thuộc tính text-align giống như cách bạn sử dụng với các phần tử khác. Bạn căn chỉnh văn bản sang trái, phải, chính giữa hoặc căn đều.
Ví dụ sau sẽ căn trái văn bản bên trong các phần tử <th>.
th {
text-align: left;
}Lưu ý: Văn bản bên trong các phần tử
<td>được căn trái theo mặc định, trong khi văn bản bên trong các phần tử<th>được căn giữa và hiển thị bằng phông chữ đậm theo mặc định.
Căn chỉnh văn bản theo chiều dọc của ô
Tương tự, bạn có thể căn chỉnh nội dung theo chiều dọc bên trong các phần tử <th> và <td> lên trên cùng, dưới cùng hoặc giữa bằng cách sử dụng thuộc tính vertical-align của CSS. Căn chỉnh theo chiều dọc mặc định là ở giữa.
Ví dụ sau sẽ căn chỉnh theo chiều dọc văn bản bên trong các phần tử <th>.
th {
height: 40px;
vertical-align: bottom;
}
Kiểm soát vị trí của chú thích bảng
Bạn có thể đặt vị trí của chú thích bảng bằng thuộc tính caption-side của CSS.
Chú thích có thể được đặt ở đầu hoặc cuối bảng. Vị trí mặc định là ở đầu bảng.
caption {
caption-side: bottom;
}Mẹo: Để thay đổi căn chỉnh theo chiều ngang của chú thích bảng (ví dụ: trái hoặc phải), bạn có thể chỉ cần sử dụng thuộc tính
text-aligncủa CSS, giống như bạn làm với văn bản bình thường.
Xử lý ô trống
Trong các bảng sử dụng mô hình đường viền riêng biệt, là mô hình mặc định, bạn cũng có thể kiểm soát việc hiển thị các ô không có nội dung hiển thị bằng thuộc tính empty-cells của CSS.
Thuộc tính này chấp nhận một trong hai giá trị là show hoặc hide. Giá trị mặc định là show, hiển thị các ô trống giống như các ô bình thường, nhưng nếu giá trị hide được chỉ định thì không có đường viền hoặc nền nào được vẽ xung quanh các ô trống. Hãy thử một ví dụ để hiểu nó thực sự hoạt động như thế nào:
table {
border-collapse: separate;
empty-cells: hide;
}Lưu ý: Đặt một ký tự khoảng trắng (
) bên trong một ô của bảng làm cho nó trở thành không trống. Do đó, ngay cả khi ô đó trông có vẻ như ô trống, giá trịhidesẽ không ẩn các đường viền và nền.
Tạo bảng có sọc
Đặt các màu nền khác nhau luân phiên cho các hàng là một kỹ thuật phổ biến để cải thiện khả năng đọc của các bảng có lượng dữ liệu lớn. Điều này thường được gọi là bảng có sọc (striped table).
Bạn có thể đơn giản đạt được hiệu ứng này bằng cách sử dụng bộ chọn pseudo-class :nth-child() của CSS.
Ví dụ sau sẽ tô màu nền cho mọi hàng lẻ trong bảng.
tbody tr:nth-child(odd) {
background-color: #f2f2f2;
}Một bảng sọc thường trông giống như hình sau.
Lưu ý: Bộ chọn pseudo-class
:nth-child()chọn các phần tử dựa trên vị trí của chúng trong một nhóm phần tử anh chị em. Nó có thể lấy một số, một từ khóa chẵn hoặc lẻ hoặc một biểu thức có dạng xn + y trong đó x và y là các số nguyên (ví dụ: 1n, 2n, 2n + 1, …) làm đối số.
Tạo bảng responsive
Mặc định thì bảng không responsive. Tuy nhiên, để hỗ trợ thiết bị di động, bạn có thể thêm khả năng phản hồi cho bảng của mình bằng cách bật tính năng cuộn ngang trên màn hình nhỏ. Để thực hiện việc này, chỉ cần bọc bảng của bạn bằng một phần tử <div> và áp dụng kiểu overflow-x: auto; như ví dụ dưới đây:
<div style="overflow-x: auto;">
<table>
... table content ...
</table>
</div>