CSS cho thẻ table

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

Code mẫu:

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

Kết quả:

Họ và Tên	Quê Quán
Nguyễn Đức Anh	Hà Tây
Hạ Thị Mến	Hà Nội

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

Như bạn thấy ở 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ọ và Tên	Quê Quán
Nguyễn Đức Anh	Hà Tây
Hạ Thị Mến	Hà Nội

Đệm trong table

Code mẫu: 

td {padding:10px;}

Kết quả:

Họ và Tên	Quê Quán
Nguyễn Đức Anh	Hà Tây
Hạ Thị Mến	Hà Nội

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ọ và Tên	Quê Quán
Nguyễn Đức Anh	Hà Tây
Hạ Thị Mến	Hà Nội

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ọ và Tên	Quê Quán
Nguyễn Đức Anh	Hà Tây
Hạ Thị Mến	Hà Nội

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ọ và Tên	Quê Quán
Nguyễn Đức Anh	Hà Tây
Hạ Thị Mến	Hà Nội