Bootstrap 4 Tables

by GokiSoft.Com - 19:30 12/10/2020 3,928 Lượt Xem

Bootstrap 4 Basic Table

Class .table làm cho table của bạn mặc định như sau:

Ví dụ

<table class="table">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>

Firstname

Lastname

John

Doe

john@example.com

Mary

Moe

mary@example.com

July

Dooley

july@example.com

Striped Rows

Class .table-striped add zebra-stripes cho bảng (bạn có thể thấy màu xám màu trắng zic zac từng dòng):

Ví dụ

<table class="table table-striped">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Bordered Table

Class .table-bordered add borders (dòng kẻ phân chia bảng):

Ví dụ

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Hover Rows

Class.table-hover add hiệu ứng hover cho các row trong bảng (Hiệu ứng hover là hiệu ứng khi di chuột vào thì row trong bảng sẽ chuyển màu xám):

Ví dụ

<table class="table table-hover">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Black/Dark Table

Class .table-dark add background màu tối cho bảng:

Ví dụ

<table class="table table-dark">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Dark Striped Table

Sự kết hợp giữa .table-dark và .table-striped sẽ tạo ra table vừa dark, vừa striped:

Ví dụ

<table class="table table-dark table-striped">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Hoverable Dark Table

Tương tự class .table-hover add thêm hiệu ứng hover trên dark table:

Ví dụ

<table class="table table-dark table-hover">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Borderless Table

Class .table-borderless loại bỏ borders khỏi table:

Ví dụ

<table class="table table-borderless">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Contextual Classes

Contextual classes có thể được sử dụng để tô màu toàn bộ bảng (<table>), các row của bảng (<tr>) hoặc các cell (1 cell = 1 ô) của bảng (<td>).

Ví dụ

<table class="table">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Default</td>
            <td>Defaultson</td>
            <td>def@somemail.com</td>
        </tr>
        <tr class="table-primary">
            <td>Primary</td>
            <td>Joe</td>
            <td>joe@example.com</td>
        </tr>
        <tr class="table-success">
            <td>Success</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr class="table-danger">
            <td>Danger</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr class="table-info">
            <td>Info</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
        <tr class="table-warning">
            <td>Warning</td>
            <td>Refs</td>
            <td>bo@example.com</td>
        </tr>
        <tr class="table-active">
            <td>Active</td>
            <td>Activeson</td>
            <td>act@example.com</td>
        </tr>
        <tr class="table-secondary">
            <td>Secondary</td>
            <td>Secondson</td>
            <td>sec@example.com</td>
        </tr>
        <tr class="table-light">
            <td>Light</td>
            <td>Angie</td>
            <td>angie@example.com</td>
        </tr>
        <tr class="table-dark text-dark">
            <td>Dark</td>
            <td>Bo</td>
            <td>bo@example.com</td>
        </tr>
    </tbody>
</table>

Firstname	Lastname	Email
Default	Defaultson	def@somemail.com
Primary	Joe	joe@example.com
Success	Doe	john@example.com
Danger	Moe	mary@example.com
Info	Dooley	july@example.com
Warning	Refs	bo@example.com
Active	Activeson	act@example.com
Secondary	Secondson	sec@example.com
Light	Angie	angie@example.com
Dark	Bo	bo@example.com

Contextual classes có thể được sử dụng là:

Class	Mô tả (Các màu sẽ hiển thị lên bảng)
`.table-primary`	Blue
`.table-success`	Green
`.table-danger`	Red
`.table-info`	Light blue
`.table-warning`	Orange
`.table-active`	Grey: Áp dụng màu cho hàng của bảng hoặc ô của bảng
`.table-secondary`	Grey
`.table-light`	Light grey cho bảng hoặc background row
`.table-dark`	Dark grey cho bảng hoặc background row

Table Head Colors

Class .thead-dark add background màu đen cho header của table, còn class .thead-light add background màu xám cho header của table:

Ví dụ

<table class="table">
    <thead class="thead-dark">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>
<table class="table">
    <thead class="thead-light">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Small table

Class .table-sm làm table bé đi bằng cách cắt padding các ô của bảng đi một nửa:

Ví dụ

<table class="table table-bordered table-sm">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Responsive Tables

Ví dụ

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Class .table-responsive khiến table có thể responsive: thêm scrollbar để vừa màn hình nếu thực tế bảng dài tràn màn hình:

	Đây	là	bảng	dài	hơn so với màn hình của bạn
VD	Đây	là	bảng	dài	hơn so với màn hình của bạn

Bạn có thể quyết định khi nào table có scrollbar, tùy thuộc vào chiều rộng màn hình:

Class	Screen width
`.table-responsive-sm`	< 576px
`.table-responsive-md`	< 768px
`.table-responsive-lg`	< 992px
`.table-responsive-xl`	< 1200px

Ví dụ

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

Ứng Dụng Học

Theo dõi cập nhật nội dung học trên Youtube & Facebook

Thông Tin Liên Hệ

Công Ty Cổ Phần Công nghệ ZicZac Việt Nam.

Website: https://gozic.vn

SĐT: 096 - 70 25 996

Email: ziczacgroup@gmail.com

Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website

Tags:

bootstrap bootstrap4 hoc bootstrap tai lieu bootstrap

Bình luận

Tôi muốn xem code từ thành viên khác

Tài Liệu Tham Khảo

1
Bootstrap 4 - Giới Thiệu
2
Bootstrap 4 Containers
3
Bootstrap 4 Grids
4
Bootstrap 4 Text/Typography
5
Bootstrap 4 Colors
6
Bootstrap 4 Tables
7
Bootstrap 4 Images
8
Bootstrap 4 Jumbotron
9
Bootstrap 4 Alerts
10
Bootstrap 4 Buttons
11
Bootstrap 4 Button Groups
12
Bootstrap 4 Badges
13
Bootstrap 4 Progress Bars
14
Bootstrap 4 Spinners
15
Bootstrap 4 Pagination
16
Bootstrap 4 List Groups
17
Bootstrap 4 Cards
18
Bootstrap 4 Dropdowns
19
Bootstrap 4 Collapse
20
Bootstrap 4 Navs
21
Bootstrap 4 Navigation Bar
22
Bootstrap 4 Forms
23
Bootstrap 4 Form Inputs
24
Bootstrap 4 Inputs Group
25
Bootstrap 4 Custom Forms
26
Bootstrap 4 Carousel
27
Bootstrap 4 Modal
28
Bootstrap 4 Tooltip
29
Bootstrap 4 Popover
30
Bootstrap 4 Toast
31
Bootstrap 4 Scrollspy (Advanced)
32
Bootstrap 4 Utilities
33
Bootstrap 4 Flex
34
Bootstrap 4 Icons
35
Bootstrap 4 Media Objects
36
Bootstrap 4 Filters (Advanced)
37
Bootstrap 4 - Form đăng ký tài khoản người dùng

Ứng Dụng Tiện Ích

MD5 Chuyển Đổi Chữ Hoa - UpperCase JSON Editor Coding Online Database Diagram Fake API Base64