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

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

1. 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é.

<!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@cunghocweb.com</td>
                            <td>192 Hầm tử</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Hoài Minh</td>
                            <td>Nam</td>
                            <td>hoaiminhit1990@cunghocweb.com</td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Quốc Minh</td>
                            <td>Nam</td>
                            <td>quocminh@cunghocweb.com</td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
         
    </div>
</body>
</html>

Demo:

Table thường sử dụng Bootstrap 3

2. table-striped

<!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@cunghocweb.com</td>
                            <td>192 Hầm tử</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Hoài Minh</td>
                            <td>Nam</td>
                            <td>hoaiminhit1990@cunghocweb.com</td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Quốc Minh</td>
                            <td>Nam</td>
                            <td>quocminh@cunghocweb.com</td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Huy Phong</td>
                            <td>Nam</td>
                            <td>phongalibaba@cunghocweb.com</td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
 
    </div>
</body>
</html>

Demo:

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.

3. table-bordered

<!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@cunghocweb.com</td>
                            <td>192 Hầm tử</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Hoài Minh</td>
                            <td>Nam</td>
                            <td>hoaiminhit1990@cunghocweb.com</td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Quốc Minh</td>
                            <td>Nam</td>
                            <td>quocminh@cunghocweb.com</td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Huy Phong</td>
                            <td>Nam</td>
                            <td>phongalibaba@cunghocweb.com</td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
 
    </div>
</body>
</html>

Demo:

Table Broder

4. 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.

<!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@cunghocweb.com</td>
                            <td>192 Hầm tử</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Hoài Minh</td>
                            <td>Nam</td>
                            <td>hoaiminhit1990@cunghocweb.com</td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Quốc Minh</td>
                            <td>Nam</td>
                            <td>quocminh@cunghocweb.com</td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Huy Phong</td>
                            <td>Nam</td>
                            <td>phongalibaba@cunghocweb.com</td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
 
    </div>
</body>
</html> 

Xem Demo

5. 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.

<!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 Condensed</h2>
                <table class="table table-condensed">
                    <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@cunghocweb.com</td>
                            <td>192 Hầm tử</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Hoài Minh</td>
                            <td>Nam</td>
                            <td>hoaiminhit1990@cunghocweb.com</td>
                            <td>192 Hầm tử</td>

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

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

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

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

Xem Demo

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

Bạn sẽ 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, …

<!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>

Xem Demo

Chia sẻ bài viết

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

Hoặc copy địa chỉ

Nội dung

Bài 5: Cách tạo comment trong Python

Bài 4: Cách khai báo biến trong Python

Bài 3: Cài đặt Intellij IDEA và chạy Hello World trong Python

Bài 2: Hướng dẫn download và cài đặt python trên Windows

Bài 5: Tìm hiểu về Props trong ReactJS

Bài 4: Components trong ReactJS

Bài 3: Giới thiệu JSX trong ReactJS

Bài 2: Cài đặt môi trường chạy ReactJS

Bài 18: Thuộc tính icon trong CSS

Các biểu tượng có thể dễ dàng được thêm vào trang HTML của b...

Bài 17: Thuộc tính box model trong CSS

Bài 16: Thuộc tính outline trong CSS

Bài 15: Thuộc tính Height/Width trong CSS

Chat Icon Close Icon