Cách CSS Bảng (Table)

Trong bài hướng dẫn tự học CSS này, bạn sẽ tìm hiểu toàn tập cách CSS bảng đẹp, CSS table một cách dễ hiểu nhất.

Vì sao cần tạo kiểu cho bảng với CSS

Trong lập trình web, bạn có thể sẽ cần tạo rất nhiều bảng để lưu trữ, hiển thị thông tin một cách khoa học.

Các bảng (table) thường được sử dụng để hiển thị dữ liệu, chẳng hạn như báo cáo tài chính, thống kê, kế toán…

Nhưng khi bạn tạo một bảng HTML mà không có được CSS hoặc thêm thuộc tính nào, trình duyệt sẽ hiển thị chúng mà không có bất kỳ đường viền nào.

Như thế trông sẽ rất tệ.

Thế nên bạn cần phải thực hiện CSS cho bảng để mang lại trả nghiệm tốt hơn.

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ác thành phần của bảng. Trong phần sau, bạn sẽ thấy cách sử dụng CSS để tạo các bảng một cách thanh lịch và nhất quán.

CSS Table #1: Thêm đường viền cho bảng

Sử dụng thuộc tính border của CSS là cách tốt nhất để xác định đường viền cho các bảng.

Ví dụ sau sẽ thiết lập đường viền màu đen cho các phần tử <table>, <th> và <td>.

Nếu bạn chưa biết thì:

• <table></table> là cặp thẻ khai báo một bảng
• <tr></tr> là để tạo một hàng trong bảng <table>
• <th></th> là cặp thẻ để xác định các tiêu đề của từng cột
• <td><td> là cặp thẻ xác định nội dung của cùng một hàng (qua từng cột)

Ví dụ, mình có một bảng đơn giản như thế này:

<table>
    <tr>
        <th>ID</th>
        <th>Họ và tên đệm</th>
        <th>Tên</th>
        <th>Email</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Nguyễn Minh</td>
        <td>Đức</td>
        <td>nguyenminhduc@mail.com</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Vũ Kim</td>
        <td>Thoa</td>
        <td>vukimthoa@mail.com</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Nguyễn Linh</td>
        <td>Trang</td>
        <td>nguyenlinhtrang@mail.com</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Vi Đại</td>
        <td>Doanh</td>
        <td>vidaidoanh@mail.com</td>
    </tr>
</table>

Bây giờ, mình thiết lập đường viền cho bảng bằng CSS như sau:

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

• 1px là độ rộng của đường viền
• solid (nét liền), dashed (gạch ngang), dotted (kiểm chấm) là kiểu nét của đường viền
• black (có thể chọn màu tùy ý) là màu của đường viền

Kết quả được như hình:

Vì 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.

Để thoát khỏi vấn đề đường viền kép này, bạn có thể chỉ cần thu gọn các đường viền ô liền kề và tạo các đường viền đơn.

Nó gọi là Collapsing Border

Collapsing Border

Có hai mô hình riêng biệt để thiết lập đường viền trên các ô của bảng trong CSS:

• separate: Tách biệt
• collapse: Thu gọn

Trong mô hình separate border, nó là mặc định, mỗi ô của bảng có các viền riêng biệt (Vì thế bạn thấy đường viền kép)

Trong khi đó ở mô hình collapsed border, các ô của bảng liền kề có chung một viền.

Bạn có thể thiết lập mô hình viền cho bảng HTML bằng cách sử dụng thuộc tính border-collapse của CSS.

Đoạn code CSS sau đây sẽ thu gọn các viền ô của bảng (thành viền đơn) và áp dụng một viền đen 1px.

Vẫn sử dụng bảng trên bạn nhé

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

Kết quả nhận được là:

Lưu ý: Bạn cũng có thể xóa khoảng trắng giữa các viền của ô bảng thông qua đặt giá trị của thuộc tính border-spacing CSS thành 0. Tuy nhiên, nó chỉ xóa khoảng trắng nhưng không hợp nhất các đường viền như khi bạn đặt thu gọn đường viền thành thu gọn.

Vì thế, nếu bạn sử dụng CSS:

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

Thì kết quả bạn nhận được là:

CSS Table #2: Điều chỉnh không gian bên trong bảng

Theo mặc định, trình duyệt tạo các ô bảng đủ lớn để chứa vừa dữ liệu trong các ô.

Nhưng nhìn nó vẫn rất chật chội.

Mà để tăng tính trải nghiệm thì cần có nhiều khoảng trắng hơn.

Do đó, cần phải thêm không gian giữa nội dung ô của bảng và viền ô.

Để làm việc này, bạn chỉ cần sử dụng thuộc tính padding trong CSS. Hãy thử ví dụ sau và xem nó hoạt động như thế nào:

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

Kết quả nhận được là:

Bạn cũng có thể điều chỉnh khoảng cách giữa các viền của các ô bằng cách sử dụng thuộc tính border-spacing trong CSS, nếu các viền của bảng của bạn đang sử dụng là mô hình separate border (mặc định đó).

Các quy tắc CSS sau áp dụng khoảng cách 10px giữa tất cả các viền trong một bảng:

table {
    border-spacing: 10px;
}
table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}

Kết quả chúng ta nhận được là:

CSS Table #3: Thiết lập Width và Height cho bảng

Theo mặc định, một bảng sẽ hiển thị chỉ 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.

Các quy tắc CSS trong ví dụ sau sẽ thiết lập chiều rộng của bảng thành 100% và chiều cao của các ô tiêu đề bảng thành 40px.

table {
    width: 100%;        
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    border: 1px solid #dee2e6;
}
th {
    height: 40px;
    text-align: left;
}

Khi chạy trên trình duyệt, kết quả chúng ta dùng được là:

CSS Table #4: Kiểm soát bố cục của bảng

Một bảng tự động mở rộng và teo lại để chứa vừa dữ liệu chứa bên trong nó (Đây là hành vi mặc định)

Khi dữ liệu điền vào bên trong bảng, nó tiếp tục mở rộng miễn là còn có không gian. Tuy nhiên, đôi khi, cần phải thiết lập chiều rộng cố định cho bảng để quản lý bố cục thống nhất.

Bạn có thể làm điều này với sự trợ giúp của thuộc tính table-layout trong 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 của bảng. Thuộc tính này có một trong hai giá trị:

• auto: Sử dụng một thuật toán bố trí 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 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 ô. Bố trí bảng này trình duyệt sẽ thực thi nhanh hơn bảng auto.

Các quy tắc CSS trong ví dụ sau xác định rằng bảng HTML được trình bày bằng thuật toán bố cục fixed và có chiều rộng cố định 300 pixel.

Hãy dùng thử và xem nó hoạt động như thế nào nhé:

HTML:

<table class="auto">
    <caption>Ví dụ 1. Bảng Auto</caption>
    <tr>
        <th>Họ và tên</th>
        <td>Nguyễn Linh Trang</td>
    </tr>
    <tr>
        <th>Email</th>
        <td>nguyenlinhtrang@mail.com</td>
    </tr>
</table>
<br>
<table class="fixed">
    <caption>Ví dụ 2. Bảng Fixed</caption>
    <tr>
        <th>Họ và tên</th>
        <td>Vũ Kim Thoa</td>
    </tr>
    <tr>
        <th>Email</th>
        <td>vukimthoa@mail.com</td>
    </tr>
</table>

CSS:

table {
    width: 300px;
    border-collapse: collapse;            
}
table, tr, th, td{
    border: 1px solid #000000;
}
.auto {
    table-layout: auto;
}
.fixed {
    table-layout: fixed;
}
td{
    width: 50%;
}

Kết quả nhận được là:

Mẹo: Bạn có thể tối ưu hóa hiệu suất kết xuất bảng (trong trình duyệt) bằng cách chỉ định giá trị fixed cho thuộc tính table-layout. Giá trị fixed của thuộc tính này làm cho bảng được hiển thị một hàng tại một thời điểm, cung cấp cho người dùng thông tin với tốc độ nhanh hơn.

Note: Nếu không có giá trị fixed của thuộc tính table-layout trên các bảng lớn, người dùng sẽ không thấy bất kỳ phần nào của bảng cho đến khi trình duyệt render xong toàn bộ bảng.

CSS Table #5: Căn chỉnh văn bản bên trong các ô của 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 nội dung theo chiều ngang của ô trong bảng

Để 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.

• Đọc thêm: Cách CSS text

Bạn có thể căn chỉnh văn bản sang trái (left), phải (right), giữa (center) hoặc căn đều (justify).

Các quy tắc kiểu sau sẽ căn trái văn bản bên trong các thành phần <th>. (Sử dụng HTML ở ví dụ 1)

table {
    width: 100%;        
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    border: 1px solid #dee2e6;
}
th {
    text-align: left;
}

Kết quả nhận được như sau:

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à được hiển thị bằng phông chữ đậm theo mặc định.

Sắp xếp nội dung theo chiều dọc của ô trong bảng

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> thành trên cùng (top), dưới cùng (bottom) hoặc giữa (center) bằng cách sử dụng thuộc tính vertical-align trong CSS.

Căn dọc mặc định là giữa.

Các quy tắc CSS sau sẽ căn chỉnh văn bản theo chiều dọc, xuống dưới cùng bên trong các phần tử <th>.

table {
    width: 100%;        
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    border: 1px solid #dee2e6;
}
th {
    height: 40px;
    vertical-align: bottom;
}

Kết quả nhận được là:

CSS Table #6: Kiểm soát vị trí chú thích của bảng

Bạn có thể thiết lập vị trí dọc của chú thích bảng bằng thuộc tính caption-side trong CSS.

Chú thích có thể được đặt ở đầu (top) hoặc cuối bảng (bottom). Vị trí mặc định là top.

Trước tiên, bạn thêm chú thích bảng vào trong HTML:

<caption>BẢNG DANH SÁCH HỌC VIÊN</caption>

Sau đó, đây là CSS:

table, td, th {
    border: 1px solid gray;
}
caption {
    caption-side: bottom;
}

Khi chạy trên trình duyệt, ta có bảng sau:

Mẹo: Để căn chỉnh chiều ngang của văn bản chú thích của bảng (ví dụ: căn trái hoặc phải), bạn chỉ cần sử dụng thuộc tính text-align trong CSS, giống như cách bạn làm với văn bản thông thường là được.

CSS Table #7: Xử lý các ô trống trong bảng

Trong các bảng sử dụng mô hình separate border, theo mặc định, bạn cũng có thể kiểm soát việc render các ô không có nội dung hiển thị bằng cách sử dụng thuộc tính empty-cells trong CSS.

Thuộc tính này chấp nhận giá trị show hoặc hide.

Giá trị mặc định là show, hiển thị các ô trống như các ô bình thường.

Nhưng nếu giá trị hide được chỉ định, không có border hoặc background nào được vẽ xung quanh các ô trống.

Hãy thử một ví dụ để hiểu cách nó thực sự hoạt động:

Ta có HTML:

<h2>BẢNG VỚI CÁC Ô TRỐNG</h2>
<table class="empty-show">
    <tr>
        <th>Họ và tên</th>
        <td>Nguyễn Linh Trang</td>
    </tr>
    <tr>
        <th>Email</th>
        <td></td>
    </tr>
</table>
<br>
<h2>BẢNG VỚI CÁC Ô TRỐNG BỊ ẨN</h2>
<table class="empty-hide">
    <tr>
        <th>Họ và tên</th>
        <td>Vũ Kim Thoa</td>
    </tr>
    <tr>
        <th>Email</th>
        <td></td>
    </tr>
</table>

Đây là CSS:

table {
    width: 300px;
    border-collapse: separate;
}
table, th, td{
    border: 1px solid #000000;
}
table.empty-show {
    empty-cells: show;                        
}
table.empty-hide {
    empty-cells: hide;           
}

Và kết quả nhận được là đây:

Mẹo: Đặt giá trị (&nbsp) bên trong một ô của bảng làm cho nó không bị trống. Do đó, ngay cả khi ô đó nhìn thì trống rỗng, giá trị hide sẽ không ẩn đường viền và nền.

CSS Table #8: Tạo bảng sọc như ngựa vằn

Bạn có thể thiết lập màu nền khác nhau cho các hàng xen kẽ 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.

Kỹ thuật này thường được gọi là: zebra-striping

Bạn chỉ có thể đạt được hiệu ứng này bằng cách sử dụng pesudo-class Selector trong CSS là :nth-child().

• Đọc thêm: 9 Bộ chọn CSS (CSS Selector)

Các quy tắc CSS sau sẽ làm nổi bật mọi hàng lẻ trong thân bảng.

table {
    width: 100%;        
    font-family: arial, sans-serif;
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    text-align: left;
    border-top: 1px solid #dee2e6;
}
    tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
}

Kết quả nhận được là:

Lưu ý: Các phần tử pesudo-class nth-child() dựa trên vị trí của chúng trong một nhóm anh chị em. Nó có thể lấy một số, một từ khóa chẵn (even) hoặc lẻ (odd) 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ố.

CSS Table #9: Tạo bảng Responsive

Theo mặc định thì bảng không responsive (khả năng tương thích với các loại kích thước màn hình).

Tuy nhiên, để hỗ trợ các thiết bị di động, bạn có thể thêm khả năng responsive cho các bảng của mình bằng cách cho phép cuộn ngang trên màn hình nhỏ.

Để làm điều 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ư hình dưới đây:

HTML:

<div class="responsive-table">
    <table>
        <thead>
            <tr>
                <th>ID</th>
            	<th>Họ và tên đệm</th>
            	<th>Tên</th>
            	<th>Email</th>
                <th>Số điện thoại</th>
                <th>Địa chỉ hiện tại</th>
                <th>Quê quán</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Nguyễn Minh</td>
                <td>Đức</td>
                <td>nguyenminhduc@mail.com</td>
              	<td>0989111222</td>
                <td>Tầng 3, 25T2, Nguyễn Thị Thập, Cầu Giấy, Hà Nội</td>
                <td>Thanh Hóa</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Vũ Kim</td>
                <td>Thoa</td>
                <td>vukimthoa@mail.com</td>
                <td>0989222333</td>
                <td>Tầng 3, 25T2, Nguyễn Thị Thập, Cầu Giấy, Hà Nội</td>
                <td>Hà Nội</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Nguyễn Linh</td>
                <td>Trang</td>
                <td>nguyenlinhtrang@mail.com</td>
                <td>0989333444</td>
                <td>Tầng 3, 25T2, Nguyễn Thị Thập, Cầu Giấy, Hà Nội</td>
                <td>Tuyên Quang</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Vi Đại</td>
                <td>Doanh</td>
                <td>vidaidoanh@mail.com</td>
                <td>0989444555</td>
                <td>Tầng 3, 25T2, Nguyễn Thị Thập, Cầu Giấy, Hà Nội</td>
                <td>Tuyên Quang</td>
            </tr>
        </tbody>
    </table>
</div>

Đây là CSS:

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    text-align: left;
    border: 1px solid #dee2e6;
    white-space: nowrap; /* Ngăn chặn văn bản xuống dòng */
}
.responsive-table {
    overflow-x: auto;
}

Kết quả nhận được là:

Như vậy, trong bài hướng dẫn tự học CSS này mình đã hướng dẫn bạn cách CSS bảng, cách CSS bảng đẹp thông qua các thuộc tính của CSS.

Hi vọng bài viết có ích cho quá trình học CSS, cũng như học lập trình web của bạn.

Chú ý: Nếu bạn đang tìm kiếm khóa học Lập trình Web bài bản để trở thành lập trình viên phát triển web thực thụ thì hãy xem qua ngay KHÓA HỌC LẬP TRÌNH FULL STACK tại NIIT – ICT Hà Nội nhé.

Học tiếp: CSS Box Model

Đọc thêm: Cách CSS cho các danh sách