Bảng CSS

Sử dụng CSS có thể cải thiện đáng kể外观 của bảng HTML:

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha, No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

thử ngay

Viền bảng

Để thiết lập viền bảng trong CSS, hãy sử dụng border Thuộc tính.

Dưới đây là ví dụ để quy định viền đen cho yếu tố <table>, <th> và <td>:

Tên Họ
Bill Gates
Steve Jobs

thuộc tính

table, th, td {
  border: 1px solid black;
}

thử ngay

Lưu ý:Bảng trong ví dụ trên có viền双边. Đó là vì cả yếu tố table và <th> và <td> đều có viền riêng.

Bảng toàn rộng

Trong một số trường hợp, bảng trên có vẻ nhỏ. Nếu bạn cần bảng có thể che phủ toàn bộ màn hình (toàn rộng), hãy thêm width: 100% cho yếu tố <table>:

thuộc tính

table {
  width: 100%;
}

thử ngay

Viền双边

Lưu ý rằng bảng trên có viền双边. Đó là vì bảng và các yếu tố th, td đều có viền riêng.

Nếu muốn xóa viền双边, hãy xem ví dụ dưới đây.

Gộp viền bảng

border-collapse Thuộc tính thiết lập có nên gộp các viền bảng thành một viền duy nhất hay không:

Tên Họ
Bill Gates
Steve Jobs

thuộc tính

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

thử ngay

Nếu chỉ muốn có viền xung quanh bảng, chỉ cần chỉ định cho <table> là border thuộc tính:

Tên Họ
Bill Gates
Steve Jobs

thuộc tính

table {
  border: 1px solid black;
}

thử ngay

Bảng rộng và cao

Bảng rộng và cao của bảng được định nghĩa bởi width và height Thuộc tính định nghĩa.

Dưới đây là ví dụ để thiết lập độ rộng của bảng là 100%, và độ cao của yếu tố <th> là 50px:

Tên Họ Lưu
Bill Gates $100
Steve Jobs $150
Elon Musk $300

thuộc tính

table {
  width: 100%;
}
th {
  height: 50px;
}

thử ngay

Để tạo bảng chỉ chiếm một nửa diện tích trang, hãy sử dụng width: 50%:

thuộc tính

table {
  width: 50%;
}
th {
  height: 70px;
}

thử ngay

Đối齐 ngang

text-align Thuộc tính thiết lập cách đối齐 ngang của nội dung trong <th> hoặc <td> (trái, phải hoặc giữa).

Mặc định, nội dung của yếu tố <th> được đối齐 giữa, trong khi nội dung của yếu tố <td> được đối齐 sang trái.

Để làm cho nội dung của yếu tố <td> cũng được đối齐 giữa, hãy sử dụng text-align: center:

Tên Họ Lưu
Bill Gates $100
Steve Jobs $150
Elon Musk $300

thuộc tính

th {
  text-align: center;
}

thử ngay

Dưới đây là ví dụ để làm cho văn bản trong yếu tố <th> được đối齐 sang trái:

Tên Họ Lưu
Bill Gates $100
Steve Jobs $150
Elon Musk $300

thuộc tính

th {
  canh giữa: trái;
}

thử ngay

Đối齐 theo chiều dọc

vertical-align Thuộc tính thiết lập cách đối齐 văn bản theo chiều dọc của nội dung trong <th> hoặc <td> (từ trên xuống, dưới hoặc giữa).

Mặc định, cách đối齐 văn bản theo chiều dọc của nội dung trong bảng là giữa (các yếu tố <th> và <td> đều là).

Dưới đây là ví dụ để thiết lập cách đối齐 văn bản theo chiều dọc của yếu tố <td> về dưới:

Tên Họ Lưu
Bill Gates $100
Steve Jobs $150
Elon Musk $300

thuộc tính

td {
  height: 50px;
  vertical-align: bottom;
}

thử ngay

keo dán trong bảng

nếu muốn kiểm soát khoảng cách giữa biên giới và nội dung bảng, hãy sử dụng trên phần tử <td> và <th>: keo dán thuộc tính:

Tên Họ Lưu
Bill Gates $100
Steve Jobs $150
Elon Musk $300

thuộc tính

th, td {
  keo dán: 15px;
  canh giữa: trái;
}

thử ngay

vạch phân cách ngang

Tên Họ Lưu
Bill Gates $100
Steve Jobs $150
Elon Musk $300

thêm vào <th> và <td> để tạo biên giới dưới thuộc tính, để đạt được vạch phân cách ngang:

thuộc tính

th, td {
  biên giới dưới: 1px vạch ngang #ddd;
}

thử ngay

thuộc tính

bảng có thể trỏ chuột sử dụng trên phần tử <tr> để nhấn mạnh dòng bảng khi chuột trỏ đến: :hover

Tên Họ Lưu
Bill Gates $100
Steve Jobs $150
Elon Musk $300

thuộc tính

tr:hover {màu nền: #f5f5f5;}

thử ngay

bảng vân cá heo

Tên Họ Lưu
Bill Gates $100
Steve Jobs $150
Elon Musk $300

để đạt được hiệu ứng vân cá heo, hãy sử dụng nth-child() chọn器, và thêm màu nền cho tất cả các hàng bảng chẵn (hoặc lẻ): màu nền：

thuộc tính

tr:nth-child(even) {màu nền: #f2f2f2;}

thử ngay

màu bảng

ví dụ sau xác định màu nền và màu văn bản của phần tử <th>:

Tên Họ Lưu
Bill Gates $100
Steve Jobs $150
Elon Musk $300

thuộc tính

th {
  màu nền: #4CAF50;
  màu: trắng;
}

thử ngay

bảng tương ứng

nếu màn hình quá nhỏ để hiển thị tất cả nội dung, bảng tương ứng sẽ hiển thị thanh cuộn ngang:

Tên Họ Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

thêm vào xung quanh phần tử <table> với overflow-x:auto của phần tử chứa (ví dụ <div>), để đạt được hiệu ứng tương ứng:

thuộc tính

<div style="overflow-x:auto;">
<table>
... nội dung bảng ...
</table>
</div>

thử ngay

ghi chú:trong OS X Lion (trên Mac), thanh cuộn mặc định ẩn và chỉ hiển thị khi sử dụng (mặc dù đã thiết lập "overflow:scroll").

thêm nhiều ví dụ

làm một bảng đẹp mắt
ví dụ này演示 cách tạo bảng đẹp mắt.
đặt vị trí tiêu đề bảng
ví dụ này演示 cách đặt tiêu đề bảng.

thuộc tính bảng CSS

thuộc tính mô tả
border Thuộc tính viết tắt. Cài đặt tất cả các thuộc tính cạnh trong một dòng声明.
border-collapse Định nghĩa có nên gập cạnh bảng không.
border-spacing Định nghĩa khoảng cách giữa các cạnh của ô cạnh nhau.
caption-side Định nghĩa vị trí của tiêu đề bảng.
empty-cells Định nghĩa có nên hiển thị cạnh và nền trên các ô trống trong bảng không.
table-layout Cài đặt thuật toán布局 cho bảng.