Bảng W3.CSS

❮ Trước Kế tiếp ❯

Họ	Họ	Điểm
Jill	thợ rèn	50
đêm	Jackson	94
Adam	Johnson	67
Bo	Nilsson	50
Mike	Ross	35

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

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

Lớp học	Xác định
bảng w3	Vùng chứa cho một bảng HTML
sọc w3	Bàn sọc
w3-border	Bảng có viền
w3-giáp	Đường viền
tập trung vào w3	Căn giữa nội dung bảng
w3-hoverable	Bảng có thể lưu trữ
w3-table-all	Tất cả các thuộc tính đã đặt

Bảng cơ bản

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

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

Thí 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>

Bàn sọc

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

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

Thí dụ

Bảng có viền

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

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

Thí dụ

Bảng có viền sọc

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

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

Thí dụ

Đường viền quanh bàn

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

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

Thí dụ

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:

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

Thí dụ

Flipping the Stripes

Để 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 đề bảng. Bạn cũng phải xác định màu sẽ được sử dụng cho hàng tiêu đề bảng:

Họ	Họ	Điểm
Jill	thợ rèn	50
đêm	Jackson	94
Adam	Johnson	67
Bo	Nilson	35

Thí dụ

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

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

Lớp lấy w3 căn giữa nội dung của bảng:

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

Thí dụ

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

Lớp w3-center căn giữa nội dung của một cột:

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

Thí dụ

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

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

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

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

Thí dụ

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

Bảng lưu trữ

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

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

Thí dụ

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

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

Thí dụ

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:

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

Thí dụ

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

Bảng màu

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

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

Thí dụ

Bảng đáp ứng

Lớp đáp ứng w3 tạo một bảng đáp ứng. Sau đó, bảng sẽ cuộn theo chiều ngang trên các 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:

Họ	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

Thí dụ

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

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

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

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

Thí dụ

Bàn nhỏ

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

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

Thí dụ

Bàn nhỏ

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

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

Thí dụ

Chiếc bàn lớn

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

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

Thí dụ

Bảng XLarge

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

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

Thí dụ

XX Bảng lớn

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

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

Thí dụ

Bảng lớn XXX

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

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

Thí dụ

Bảng Jumbo

Use the w3-jumbo class to display a jumbo large table:

First Name	Last Name
Jill	Smith
Eve	Jackson
Adam	Johnson

Example

❮ Previous Next ❯

W3.CSS

W3.CSS Màu sắc

Xây dựng Web

Các 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

Thí dụ

Bàn sọc

Thí dụ

Bảng có viền

Thí dụ

Bảng có viền sọc

Thí dụ

Đường viền quanh bàn

Thí dụ

Hiển thị tất cả

Thí dụ

Flipping the Stripes

Thí dụ

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

Thí dụ

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

Thí dụ

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

Thí dụ

Bảng lưu trữ

Thí dụ

Màu di chuột

Thí dụ

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

Tiêu đề bảng màu

Thí dụ

Bảng màu

Thí dụ

Bảng đáp ứng

Thí dụ

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

Thí dụ

Bàn nhỏ

Thí dụ

Bàn nhỏ

Thí dụ

Chiếc bàn lớn

Thí dụ

Bảng XLarge

Thí dụ

XX Bảng lớn

Thí dụ

Bảng lớn XXX

Thí dụ

Bảng Jumbo

Example