Bảng W3.CSS

❮ Trước Sau ❯

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67
Bồ	Nilsson	50
Mike	Ross	35

Các lớp bảng W3.CSS

W3.CSS cung cấp các lớp sau cho bảng:

Lớp học	Định nghĩa
bảng w3	Vùng chứa cho bảng HTML
sọc w3	Bàn sọc
đường viền w3	Bảng có viền
viền w3	Đường viền
tập trung vào w3	Nội dung bảng được căn giữa
w3-hoverable	Bảng di chuột
w3-bàn-tất cả	Đã đặt tất cả thuộc tính

Bảng cơ bản

Lớp w3-table được sử dụng để hiển thị một bảng cơ bản:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

<table class="w3-table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>

Hãy tự mình thử »

Bàn sọc

Lớp w3-striped được sử dụng để thêm sọc ngựa vằn vào bảng:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

Hãy tự mình thử »

Bảng có viền

Lớp có viền w3 thêm đường viền dưới cùng vào mỗi hàng của bảng:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

Hãy tự mình thử »

Bàn viền sọc

Kết hợp lớp w3-striped và lớp w3-bordered để tạo bảng có viền sọc:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

Hãy tự mình thử »

Viền xung quanh một cái bàn

Lớp w3-border được sử dụng để hiển thị đường viền xung quanh bảng:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

Hãy tự mình thử »

Mẹo: Lớp w3-border không chỉ dành cho bảng. Nó có thể được sử dụng trên bất kỳ phần tử HTML nào!

Hiển thị tất cả

Lớp w3-table-all kết hợp tất cả các lớp trên:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

Hãy tự mình thử »

Lật sọc

Để lật các sọc (bắt đầu bằng màu xám nhạt), hãy thêm phần tử <thead> xung quanh hàng tiêu đề của bảng. Bạn cũng phải xác định màu sẽ được sử dụng cho hàng tiêu đề của bảng:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67
Bồ	Nilson	35

Ví dụ

<thead>
<tr class="w3-light-grey">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
</tr>
</thead>

Hãy tự mình thử »

Căn giữa tất cả nội dung

Lớp lấy w3 làm trung tâm nội dung của bảng:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

Hãy tự mình thử »

Căn giữa một cột

Lớp w3-center tập trung vào nội dung của một cột:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>

Hãy tự mình thử »

Căn phải một cột

Lớp w3-right-align căn chỉnh nội dung của một cột:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>

Hãy tự mình thử »

Bảng di chuột

Lớp w3-hoverable thêm màu nền xám khi di chuột qua:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

Hãy tự mình thử »

Màu di chuột

Nếu bạn muốn một màu di chuột cụ thể, hãy thêm bất kỳ lớp w3-hover- color nào vào mỗi phần tử <tr>:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

Hãy tự mình thử »

Kết hợp các lớp W3.CSS

Nhiều lớp W3.CSS có thể được sử dụng trên tất cả các phần tử HTML.

Ví dụ: lớp viền, lớp màu, lớp phông chữ, lớp thẻ, v.v.

Tiêu đề bảng màu

Sử dụng bất kỳ lớp w3- color nào để hiển thị một hàng màu:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

<tr class="w3-red">
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
</tr>

Hãy tự mình thử »

Bảng màu

Sử dụng bất kỳ lớp w3- color nào để hiển thị bảng màu:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

Hãy tự mình thử »

Bảng đáp ứng

Lớp đáp ứng w3 tạo ra một bảng phản hồi. Bảng sau đó sẽ cuộn theo chiều ngang trên màn hình nhỏ. Khi xem trên màn hình lớn không có sự khác biệt.

Thay đổi kích thước màn hình để xem hiệu ứng trên bảng bên dưới:

Tên đầu tiên	Họ	Điểm	Điểm	Điểm	Điểm	Điểm	Điểm	Điểm	Điểm	Điểm	Điểm	Điểm
Jill	thợ rèn	5000	5000	5000	5000	5000	5000	5000	5000	5000	5000	5000
Đêm	Jackson	9400	9400	9400	9400	9400	9400	9400	9400	9400	9400	9400
Adam	Johnson	6700	6700	6700	6700	6700	6700	6700	6700	6700	6700	6700

Ví dụ

<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>

Hãy tự mình thử »

Bảng dưới dạng thẻ

Sử dụng lớp w3-card để hiển thị bảng dưới dạng thẻ:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

Hãy tự mình thử »

Bàn Nhỏ

Sử dụng lớp w3-tiny để hiển thị một bảng nhỏ:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

Hãy tự mình thử »

Bàn nhỏ

Sử dụng lớp w3-small để hiển thị một bảng nhỏ:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

Hãy tự mình thử »

Chiếc bàn lớn

Sử dụng lớp w3-large để hiển thị một bảng lớn:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

Hãy tự mình thử »

Bàn lớn

Sử dụng lớp w3-xlarge để hiển thị bảng xlarge:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

Hãy tự mình thử »

Bàn lớn XX

Sử dụng lớp w3-xxlarge để hiển thị bảng xxlarge:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

Hãy tự mình thử »

XXXBàn lớn

Sử dụng lớp w3-xxxlarge để hiển thị bảng xxxlarge:

Tên đầu tiên	Họ	Điểm
Jill	thợ rèn	50
Đêm	Jackson	94
Adam	Johnson	67

Ví dụ

Hãy tự mình thử »

Bàn Jumbo

Sử dụng lớp w3-jumbo để hiển thị một bảng lớn:

Tên đầu tiên	Họ
Jill	thợ rèn
Đêm	Jackson
Adam	Johnson

Ví dụ

Hãy tự mình thử »

❮ Trước Sau ❯

★ +1

Người tìm đường W3schools

Theo dõi tiến trình của bạn - hoàn toàn miễn phí!

Câu đố

Được chứng nhận

Đăng nhập Đăng ký

Người tìm đường và việc học của tôi

Nâng cấp

Bắt đầu từ đâu

Trình chỉnh sửa mã (Dùng thử)

Video

Mẫu

Web hosting

Tạo một máy chủ

Làm thế nào để

Khung CSS

Thống kê trình duyệt

Tốc độ gõ

Đào tạo AWS

Bộ chọn màu

Trò chơi mã

Đặt mục tiêu

Bản tin

Việc làm

Liên hệ chúng tôi

Lớp học

W3.CSS

Màu W3.CSS

Xây dựng web

Ví dụ

Người giới thiệu

Bảng W3.CSS

Các lớp bảng W3.CSS

Bảng cơ bản

Ví dụ

Bàn sọc

Ví dụ

Bảng có viền

Ví dụ

Bàn viền sọc

Ví dụ

Viền xung quanh một cái bàn

Ví dụ

Hiển thị tất cả

Ví dụ

Lật sọc

Ví dụ

Căn giữa tất cả nội dung

Ví dụ

Căn giữa một cột

Ví dụ

Căn phải một cột

Ví dụ

Bảng di chuột

Ví dụ

Màu di chuột

Ví dụ

Kết hợp các lớp W3.CSS

Tiêu đề bảng màu

Ví dụ

Bảng màu

Ví dụ

Bảng đáp ứng

Ví dụ

Bảng dưới dạng thẻ

Ví dụ

Bàn Nhỏ

Ví dụ

Bàn nhỏ

Ví dụ

Chiếc bàn lớn

Ví dụ

Bàn lớn

Ví dụ

Bàn lớn XX

Ví dụ

XXXBàn lớn

Ví dụ

Bàn Jumbo

Ví dụ

MÁY CHỌN MÀU

Liên hệ bán hàng

Báo cáo lỗi