TWITTER BOOTSTRAP 3
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Bài 4: Tạo table trong bootstrap 3

Dùng bootstrap 3 để để tạo ra table thì rất là đơn giản, chỉ cần vài dòng code là các bạn có ngay một table nhìn rất bắt mắt cũng như rất dễ tinh chỉnh so với table html thông thường. Để không làm mất thời gian quý báu của các bạn thì chúng ta sẽ tìm hiểu xem bootstrap 3 hỗ trợ phần stylesheet table ra sao nhé.

1. Tạo table đơn giản với boostrap 3

Để tạo một table đơn giản nhưng đẹp mắt trong bootstrap 3 thì ta chỉ cần tuân theo cấu trúc HTML Table bình thường, đồng thời thêm một class="table" vào. Một lưu ý nữa lớp .table trong bootstrap nó sẽ tự nhận diện hai group thead dùng hiển thị title và tbody dùng hiển thị nội dung nên bạn phải tuân thủ theo cấu trúc này nhé.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Ví dụ: Hiển thị một table đơn giản với bootstrap 3 (Xem Demo)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Simple Tables</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <style type="text/css">
        .example{
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="example">
        <div class="container">
            <div class="row">
                <h2>Table Basic</h2>
                <table class="table">
                    <thead>
                        <tr>
                            <th>STT</th>
                            <th>Họ Tên</th>
                            <th>Giới tính</th>
                            <th>Email</th>
                            <th>Địa chỉ</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Văn Cường</td>
                            <td>Nam</td>
                            <td>thehalftheart@mail.com</td>
                            <td>192 Hầm tử</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Hoài Minh</td>
                            <td>Nam</td>
                            <td>hoaiminhit1990@mail.com</td>
                            <td>192 Hầm tử</td>

                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Quốc Minh</td>
                            <td>Nam</td>
                            <td>quocminh@mail.com</td>
                            <td>192 Hầm tử</td>

                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
    </div>
</body>
</html>                                     
Giao diện:

table basic png
Hình ảnh table basic

2. Class table-striped trong bootstrap

Ví dụ: (Xem Demo): 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Simple Tables</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <style type="text/css">
        .example{
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="example">
        <div class="container">
            <div class="row">
                <h2>Table Striped</h2>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>STT</th>
                            <th>Họ Tên</th>
                            <th>Giới tính</th>
                            <th>Email</th>
                            <th>Địa chỉ</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Văn Cường</td>
                            <td>Nam</td>
                            <td>thehalftheart@mail.com</td>
                            <td>192 Hầm tử</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Hoài Minh</td>
                            <td>Nam</td>
                            <td>hoaiminhit1990@mail.com</td>
                            <td>192 Hầm tử</td>

                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Quốc Minh</td>
                            <td>Nam</td>
                            <td>quocminh@mail.com</td>
                            <td>192 Hầm tử</td>

                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Huy Phong</td>
                            <td>Nam</td>
                            <td>phongalibaba@mail.com</td>
                            <td>192 Hầm tử</td>

                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</body>
</html>
Giao diện:

table striped png
Hình ảnh table striped

Để có thể tạo ra table giống trong hình thì ngay phần class table các bạn chỉ cần thêm vào class table-striped thì mọi thứ xem như được giải quyết. Đơn giản quá đúng không nào, và tôi dám cá rằng có bạn đang thốt lên rằng sử dụng bootstrap 3 tạo ra table sao mà đơn giản quá.

3. Class table-bordered trong bootstrap

Ví dụ: (Xem demo)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Simple Tables</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <style type="text/css">
        .example{
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="example">
        <div class="container">
            <div class="row">
                <h2>Table Border</h2>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>STT</th>
                            <th>Họ Tên</th>
                            <th>Giới tính</th>
                            <th>Email</th>
                            <th>Địa chỉ</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Văn Cường</td>
                            <td>Nam</td>
                            <td>thehalftheart@mail.com</td>
                            <td>192 Hầm tử</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Hoài Minh</td>
                            <td>Nam</td>
                            <td>hoaiminhit1990@mail.com</td>
                            <td>192 Hầm tử</td>

                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Quốc Minh</td>
                            <td>Nam</td>
                            <td>quocminh@mail.com</td>
                            <td>192 Hầm tử</td>

                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Huy Phong</td>
                            <td>Nam</td>
                            <td>phongalibaba@mail.com</td>
                            <td>192 Hầm tử</td>

                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</body>
</html>                                     
Giao diện:

table bordered png
Hình ảnh table bordered

Ở phần này cũng giống như phần striped. Các bạn chỉ viêc thêm vào class table-bordered thì sẽ có được một cái table được bao bọc trong đường viền. Câu hỏi đưa ra ở đây là tôi vừa muốn table có đường viền và các dòng được tô trắng & đen thì làm như thế nào ? Xin thưa rằng các bạn thêm trực tiếp class table-striped vào kế bên thì kêt quả sẽ đúng như sự mong muốn của các bạn.

4. Class table-hover trong bootstrap 3

Ví dụ: (Xem demo)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Simple Tables</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <style type="text/css">
        .example{
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="example">
        <div class="container">
            <div class="row">
                <h2>Table Hover</h2>
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>STT</th>
                            <th>Họ Tên</th>
                            <th>Giới tính</th>
                            <th>Email</th>
                            <th>Địa chỉ</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Văn Cường</td>
                            <td>Nam</td>
                            <td>thehalftheart@mail.com</td>
                            <td>192 Hầm tử</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Hoài Minh</td>
                            <td>Nam</td>
                            <td>hoaiminhit1990@mail.com</td>
                            <td>192 Hầm tử</td>

                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Quốc Minh</td>
                            <td>Nam</td>
                            <td>quocminh@mail.com</td>
                            <td>192 Hầm tử</td>

                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Huy Phong</td>
                            <td>Nam</td>
                            <td>phongalibaba@mail.com</td>
                            <td>192 Hầm tử</td>

                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</body>
</html> 
Giao diện:

table hover png
Hình ảnh table hover

Đây là class dùng để định nghĩa khi các bạn rê chuột vào cột thì sẽ hover lên background ngay dòng đó. Sử dụng bằng cách thêm vào class table-hover.

5. Class table-condensed trong bootstrap

Ví dụ: (Xem demo)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Simple Tables</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <style type="text/css">
        .example{
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="example">
        <div class="container">
            <div class="row">
                <h2>Table Reponsive</h2>
            <div class="table-responsive">    
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>STT</th>
                            <th>Họ Tên</th>
                            <th>Giới tính</th>
                            <th>Email</th>
                            <th>Địa chỉ</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="active">
                            <td>1</td>
                            <td>Văn Cường</td>
                            <td>Nam</td>
                            <td>thehalftheart@mail.com</td>
                            <td>192 Hầm tử</td>
                        </tr>
                        <tr class="success">
                            <td>2</td>
                            <td>Hoài Minh</td>
                            <td>Nam</td>
                            <td>hoaiminhit1990@mail.com</td>
                            <td>192 Hầm tử</td>

                        </tr>
                        <tr class="danger">
                            <td>3</td>
                            <td>Quốc Minh</td>
                            <td>Nam</td>
                            <td>quocminh@mail.com</td>
                            <td>192 Hầm tử</td>

                        </tr>
                        <tr class="warning">
                            <td>3</td>
                            <td>Huy Phong</td>
                            <td>Nam</td>
                            <td>phongalibaba@mail.com</td>
                            <td>192 Hầm tử</td>

                        </tr>
                    </tbody>
                </table>
             </div>   
            </div>
        </div>

    </div>
</body>
</html>                                     

Giao diện:

table condensed png
Hình ảnh table condensed

Phần này giúp cho các bạn thu nhỏ table lại nhìn cho nó gọn và bắt mắt hơn.Sử dụng bằng cách thêm vào class table-condensed.

6. Stylesheet & Responsive màu sắc cho table

Ví dụ: (Xem demo)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Simple Tables</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <style type="text/css">
        .example{
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="example">
        <div class="container">
            <div class="row">
                <h2>Table Reponsive</h2>
            <div class="table-responsive">    
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>STT</th>
                            <th>Họ Tên</th>
                            <th>Giới tính</th>
                            <th>Email</th>
                            <th>Địa chỉ</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="active">
                            <td>1</td>
                            <td>Văn Cường</td>
                            <td>Nam</td>
                            <td>thehalftheart@mail.com</td>
                            <td>192 Hầm tử</td>
                        </tr>
                        <tr class="success">
                            <td>2</td>
                            <td>Hoài Minh</td>
                            <td>Nam</td>
                            <td>hoaiminhit1990@mail.com</td>
                            <td>192 Hầm tử</td>

                        </tr>
                        <tr class="danger">
                            <td>3</td>
                            <td>Quốc Minh</td>
                            <td>Nam</td>
                            <td>quocminh@mail.com</td>
                            <td>192 Hầm tử</td>

                        </tr>
                        <tr class="warning">
                            <td>3</td>
                            <td>Huy Phong</td>
                            <td>Nam</td>
                            <td>phongalibaba@mail.com</td>
                            <td>192 Hầm tử</td>

                        </tr>
                    </tbody>
                </table>
             </div>   
            </div>
        </div>

    </div>
</body>
</html>                                     
Giao diện:

responsive table png
Hình ảnh stylesheet table

Phần này giúp các bạn dễ dàng tạo ra một table với màu sắc riêng từng dòng và tự động co giãn khi thu nhỏ trình duyêt. Sử dụng bằng cách bọc tất cả thành phần table vào class table-responsive, còn phần màu sắc của các dòng thì ngay chỗ thẻ tr các bạn thêm vào các class như là warning,danger, active..vvv

Lời kết:

Kết thúc bài này xem như tôi vừa hướng dẫn các bạn cách stylesheet table trong bootstrap 3. Hy vọng các bạn sẽ lựa chọn cho mình kiểu table ưng ý nhất, hẹn gặp các bạn ở các bài tiếp theo :).

Cùng chuyên mục:

Bootstrap4 là gì?

Bootstrap4 là gì?

Chào các bạn, nếu các bạn đang tìm hiểu về Bootstrap4 thì các bạn đã…

Twitter Bootstrap la gi? Tìm hiểu Bootstrap CSS

Twitter Bootstrap la gi? Tìm hiểu Bootstrap CSS

Hiện nay PHP có rất nhiều Framework và CMS hỗ trợ giúp cho công việc…

Bài 21: Xây dựng layout blog cơ bản với bootstrap 3

Bài 21: Xây dựng layout blog cơ bản với bootstrap 3

Sau khi kết thúc series bootstrap 3 lý thuyết thì ở bài này tôi sẽ…

Bài 20: Jumbotron, well, progress bar trong bootstrap 3

Bài 20: Jumbotron, well, progress bar trong bootstrap 3

Đây là bài lý thuyết cuối cùng trong series bootstrap 3, ở các bài tiếp…

Bài 19: Helper classes trong bootstrap 3

Bài 19: Helper classes trong bootstrap 3

Trong bài viết này thì chúng ta sẽ tìm hiểu về các helper classes hỗ…

Bài 18: Tạo Tabs trong bootstrap 3

Bài 18: Tạo Tabs trong bootstrap 3

Bài viết này cũng có một mối liên quan mật thiết với component navs vì…

Bài 17: Dropdown menu trong bootstrap 3

Bài 17: Dropdown menu trong bootstrap 3

Thuật ngữ dropdown menu đã trở nên quá quen thuộc trong mỗi người của chúng…

Bài 16: Navigation và thuộc tính hỗ trợ trong bootstrap 3

Bài 16: Navigation và thuộc tính hỗ trợ trong bootstrap 3

Như vậy sau khi kết thúc bài trước thì xem như chúng ta đã tìm…

Bài 15: Navigation trong bootstrap 3

Bài 15: Navigation trong bootstrap 3

Như vậy, kết thúc bài trước chúng ta đã tìm hiểu xong khái niệm về…

Bài 14: Navs menu trong bootstrap 3

Bài 14: Navs menu trong bootstrap 3

Như vậy sau khi kết thúc bài viết trước thì các bạn cùng với tôi…

Bài 13: Glyphicons trong bootstrap 3

Bài 13: Glyphicons trong bootstrap 3

Trong bài học ngày hôm nay các bạn sẽ cùng với tôi tìm hiểu về…

Bài 12: Button group bootstrap 3

Bài 12: Button group bootstrap 3

Để có thể hiểu rõ bài viết này thì tôi cần các bạn phải xem…

Bài 11: List group trong bootstrap 3

Bài 11: List group trong bootstrap 3

Trong bài này chúng ta sẽ cùng nhau tìm hiểu khái niệm List Group trong…

Bài 10: Tạo button trong bootstrap 3

Bài 10: Tạo button trong bootstrap 3

Như vậy kết thúc 9 bài trước thì các bạn cũng phần nào cảm nhận…

Bài 9: Xây dựng form với bootstrap 3

Bài 9: Xây dựng form với bootstrap 3

Khi các bạn tiến hành xây dựng giao diện một website thì form chính là…

Bài 8: Định dạng Typography bootstrap 3

Bài 8: Định dạng Typography bootstrap 3

Trong bài viết này, các bạn sẽ tìm hiểu về các phong cách và định…

Bài 7: Panel & Labels trong bootstrap 3

Bài 7: Panel & Labels trong bootstrap 3

Trong bài hôm nay chúng ta sẽ cùng tìm hiểu hai thuộc tính khác mà…

Bài 6: Pagination trong bootstrap 3

Bài 6: Pagination trong bootstrap 3

Pagination là một thuật ngữ không quá xa lạ đối với dân lập trình web,…

Bài 5: Breadcrumbs  & Images trong bootstrap 3

Bài 5: Breadcrumbs & Images trong bootstrap 3

Breadcrumb là tập hợp các đường link phân cấp giúp người dùng có thể biết…

Bài 3: Grid System trong bootstrap 3

Bài 3: Grid System trong bootstrap 3

Chắc hẳn các bạn còn đang lạ lẫm và đặt ra câu hỏi Grid system…

Top