CSS cho thẻ table: một trong những thành phần quan trọng nhất mà bạn cần nắm rõ

Table là thẻ thường dùng trong HTML. Trong các bố cục kiểu Excel có hàng và cột thì table luôn được ưu tiên sử dụng mặc dù thẻ div cũng làm được điều tương tự về mặt hiển thị – lý do là vì div không thể hiện được sự liên quan giữa các dữ liệu với nhau. Nhưng mục đích chính của bài này lại ở phần khác, đó là trang trí cho thẻ table bằng CSS.

---

Tạo đường viền cho table

CSS:

table, th, td {border: 1px solid #000}

Kết quả:

Họ tên	Năm sinh
Nguyễn Đức Anh	1987

Tham khảo thêm câu lệnh border trong CSS để tạo đường viền.

---

Chỉ sử dụng đường viền đơn cho table

Như bạn sẽ ở bảng trên, đường viền đôi được tạo ra cho bảng – nó là kết quả tổng hợp của các đường viền của table, th và td, kể ra thì nó cũng không xấu, nhưng đa số chúng ta thích đường viền đơn hơn. Để đạt được kết quả đó chúng sử dụng thuộc tính border-collapse.

Code mẫu:

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

Kết quả:

Họ tên	Năm sinh
Nguyễn Đức Anh	1987

---

Đệm (padding) trong table

Code mẫu:

td {padding:10px;}

Kết quả:

Họ tên	Năm sinh
Nguyễn Đức Anh	1987

Tham khảo thêm margin & padding trong CSS.

---

Màu cho table

Bạn có thể đổi màu đường viền, màu chữ và màu nền cho bảng một cách tùy ý.

Code mẫu:

table, td, th {border:1px solid red;}
th {background-color:blue; color:white;}
td {color:#321;}

Kết quả:

Họ tên	Năm sinh
Nguyễn Đức Anh	1987

Tham khảo thêm: vài cách khai báo màu sắc trong CSS.

---

Thay đổi chiều rộng và chiều cao trong table

Không khó để đoán ra được chúng ta sẽ sử dụng thuộc tính gì để thay đổi chiều rộng và chiều cao cho table – vẫn thế thôi – đó là thuộc tính width và height.

Code mẫu:

td {height:60px; width:150px;}

Kết quả:

Họ tên	Năm sinh
Nguyễn Đức Anh	1987

---

Căn lề cho chữ trong table

Chữ trong table có thể căn thoải mái theo cả chiều ngang lẫn chiều dọc, theo chiều ngang chúng ta sử dụng thuộc tính text-align, theo chiều dọc dùng thuộc tính vertical-align.

Code mẫu:

td {height:60px; width:150px; text-align:center; vertical-align:center;}

Kết quả:

Họ tên	Năm sinh
Nguyễn Đức Anh	1987

Tham khảo thêm 8 cách CSS cho văn bản (text).