Bootstrap Table

Trong hướng dẫn này, bạn sẽ học cách tạo các bảng (table) đẹp mắt với Bootstrap.

Table là gì?

Table HTML (bảng) được sử dụng để trình bày dữ liệu dạng lưới gồm các hàng và cột. Sử dụng Bootstrap, bạn có thể cải thiện đáng kể kiểu dáng của table một cách nhanh chóng và dễ dàng.

Xem hướng dẫn về bảng HTML để tìm hiểu thêm về bảng.

Tạo một table đơn giản với Bootstrap

Bạn có thể tạo bảng với kiểu dáng cơ bản có các ngăn chia ngang và đệm ô nhỏ (8px theo mặc định), bằng cách thêm lớp .table Bootstrap vào phần tử <table>.

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr> 
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>                   
    </tbody>
</table>

Kết quả của ví dụ trên sẽ giống như sau:

Trang trí cho table

Bootstrap thậm chí còn cung cấp một số lớp ngữ cảnh chẳng hạn như .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light và .table-dark để tô màu bảng, hàng bảng hoặc ô riêng lẻ.

Ví dụ: bạn có thể tạo phiên bản màu tối của bảng (tức là bảng có văn bản sáng trên nền tối) bằng cách thêm lớp ngữ cảnh .table-dark vào lớp .table cơ sở, như sau:

<table class="table table-dark">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr> 
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>                   
    </tbody>
</table>

Kết quả của ví dụ trên sẽ giống như sau:

Tương tự, bạn có thể sử dụng các lớp ngữ cảnh khác. Ví dụ, ví dụ sau sử dụng lớp .table-success trên lớp .table cơ sở để tạo biến thể màu xanh lá cây của bảng.

<table class="table table-success">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr> 
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>                   
    </tbody>
</table>

Kết quả của ví dụ trên sẽ giống như sau:

Mẹo: Bạn có thể sử dụng các lớp ngữ cảnh này trên lớp .table cơ sở để tạo phiên bản có màu của bất kỳ bảng nào, chẳng hạn như stripped, hover bordered, compact, v.v.

Tương tự với các bảng, bạn cũng có thể sử dụng các lớp ngữ cảnh này để nhấn mạnh các hàng trong bảng. Dưới đây là một ví dụ về bảng có các hàng được nhấn mạnh, hãy cùng xem:

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>Bill</th>
            <th>Payment Date</th>
            <th>Payment Status</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-primary">
            <td>1</td>
            <td>Credit Card</td>
            <td>04/07/2021</td>
            <td>Waiting for statement</td>
        </tr>
        <tr class="table-secondary">
            <td>2</td>
            <td>Insurance</td>
            <td>02/07/2021</td>
            <td>Cancelled</td>
        </tr>
        <tr class="table-success">
            <td>3</td>
            <td>Water</td>
            <td>01/07/2021</td>
            <td>Paid</td>
        </tr>
        <tr class="table-info">
            <td>4</td>
            <td>Internet</td>
            <td>05/07/2021</td>
            <td>Change plan</td>
        </tr>
        <tr class="table-warning">
            <td>5</td>
            <td>Electricity</td>
            <td>03/07/2021</td>
            <td>Pending</td>
        </tr>
        <tr class="table-danger">
            <td>6</td>
            <td>Telephone</td>
            <td>06/07/2021</td>
            <td>Due</td>
        </tr>
        <tr class="table-light">
            <td>7</td>
            <td>Car Service</td>
            <td>08/07/2021</td>
            <td>Call in to confirm</td>
        </tr>
        <tr class="table-dark">
            <td>8</td>
            <td>Gas</td>
            <td>06/07/2021</td>
            <td>Payment failed</td>
        </tr>
    </tbody>
</table>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo table với các hàng có sọc

Bạn cũng có thể thêm các hàng sọc trong phần tử <tbody> bằng cách chỉ cần thêm một lớp bổ sung .table-striped vào lớp .table cơ sở, như được hiển thị bên dưới:

<table class="table table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>  
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>                  
    </tbody>
</table>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo table có viền

Bạn có thể thêm đường viền trên tất cả các mặt của bảng và các ô bằng cách thêm lớp bổ trợ .table-bordered vào lớp .table cơ sở, như thể hiện trong ví dụ sau:

<table class="table table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>                    
    </tbody>
</table>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo table không viền

Bạn cũng có thể tạo bảng không viền bằng cách sử dụng lớp .table-borderless trên lớp .table cơ sở.

<table class="table table-borderless">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>                    
    </tbody>
</table>

Kết quả của ví dụ trên sẽ giống như sau:

Bật trạng thái di chuột trên hàng

Bạn cũng có thể kích hoạt trạng thái di chuột trên các hàng của bảng trong một phần tử <tbody> bằng cách thêm lớp bổ trợ .table-hover vào lớp .table cơ sở. Hãy thử ví dụ sau:

<table class="table table-hover">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>                    
    </tbody>
</table>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo table nhỏ gọn

Bạn cũng có thể làm cho các bảng của mình nhỏ gọn hơn và tiết kiệm không gian bằng cách thêm lớp bổ trợ .table-sm vào lớp .table cơ sở. Lớp .table-sm làm cho bảng nhỏ gọn bằng cách giảm một nửa tất cả đệm ô. Hãy xem ví dụ sau:

<table class="table table-sm">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>                    
    </tbody>
</table>

Kết quả của ví dụ trên sẽ giống như sau:

Đặt màu tiêu đề của table

Tương tự như các bảng sáng và tối, bạn có thể sử dụng các lớp bổ trợ .table-light hoặc .table-dark trên phần tử <thead> để làm cho nó xuất hiện với màu xám nhạt hoặc đậm.

Ví dụ sau sẽ tạo một bảng với phần đầu nền màu xám nhạt.

<table class="table">
    <thead class="table-light">
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>                    
    </tbody>
</table>

Kết quả của ví dụ trên sẽ giống như sau:

Ví dụ sau sẽ tạo một bảng với phần đầu nền màu xám đậm.

<table class="table">
    <thead class="table-dark">
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>                    
    </tbody>
</table>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo table đáp ứng với Bootstrap

Bạn cũng có thể tạo các table đáp ứng để cho phép cuộn ngang trên các thiết bị nhỏ.

Để làm cho bất kỳ table nào đáp ứng, chỉ cần đặt nó vào bên trong một phần tử <div> và áp dụng lớp .table-responsive trên đó. Bạn cũng có thể chỉ định khi nào bảng nên có thanh cuộn, dựa trên chiều rộng khung nhìn (tức là các điểm ngắt ), bằng cách sử dụng các lớp .table-responsive{-sm|-md|-lg|-xl}.

Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

<div class="table-responsive"> 
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>Biography</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Clark</td>
                <td>Kent</td>
                <td>clarkkent@mail.com</td>
                <td>Lorem ipsum dolor sit amet...</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Peter</td>
                <td>Parker</td>
                <td>peterparker@mail.com</td>
                <td>Integer pulvinar leo id risus...</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
                <td>Carter</td>
                <td>johncarter@mail.com</td>
                <td>Vestibulum consectetur scelerisque...</td>
            </tr>            
        </tbody>
    </table>
</div>

Mẹo: Văn bản bên trong các ô của <thead> luôn được căn chỉnh theo chiều dọc xuống dưới cùng. Trong khi đó, văn bản bên trong các ô <tbody> kế thừa căn chỉnh của chúng từ <table> và được căn chỉnh theo chiều dọc lên trên cùng theo mặc định. Sử dụng các lớp căn chỉnh dọc để căn chỉnh lại văn bản nếu cần.