[Bài 5] CSS Table – Tìm hiểu CSS cùng BIT

Bạn đang ở bài 6 trong 6 bài của serie Học Css cơ bản.

Table có những lợi ích gì?

Table là một thành phần HTML giúp chúng ta hiển thị dữ liệu dưới dạng bảng một cách trực quan, dễ dàng so sánh sự thay đổi trên từng hàng và cột. Một lợi ích khác mà ngày xưa từng được ứng dụng rất nhiều trong thiết kế website đó là lên layout cho website tương tự như [Bài 3] CSS Layout mà mình đã từng hướng dẫn.

Một Table đơn giản có cấu trúc như sau:

 

Những thuộc tính CSS Table thường được sử dụng

  • border-collapse: định nghĩa cách hiển thị xung quanh table và từng cell trong table
  • border-spacing: định nghĩa khoảng cách từng cell trong table
  • caption-side: vị trí hiển thị nội dung miêu tả cho table, mặc định nó sẽ nằm ở phía dưới của table
  • empty-cells: ẩn/hiện những ô trống
  • table-layout: cho phép cải thiện tốc độ load cấu trúc table bằng cách thiết lập width cho một hàng đầu tiên mà không cần xét width những hàng tiếp theo

border-collapse

Giá trị của thuộc tính này gồm:

  • collapse: không có khoảng cách giữa những border
  • separate: có khoảng cách giữa những border

VD1

 

border-spacing

Chúng ta sẽ truyền giá trị là một tham số độ dài có thể là px, cm, em,… có thể dùng cách rút gọn hoặc chi tiết:

  • border-spacing: 5px; // Áp dụng khoảng cách 5px cho mỗi phía
  • border-spacing: 1cm 2cm; // Áp dụng 1cm cho left-right và 2cm cho top-bottom

VD2

caption-side

Cái tên nói lên tất cả, giá trị của nó sẽ là: top hoặc bottom.

VD3

 

empty-cells

Theo mình thì thuộc tính này không cần thiết lắm, nhưng đã giới thiệu rồi thì phải làm tới vậy. Giá trị của nó là show hoặc hide. Mặc định sẽ là show, bạn xem lại VD3 nhé.

table-layout

Sẽ có 2 giá trị cho table-layout

  • auto: tự động thay đổi độ rộng của cột nếu có một nội dung dài hơn kích thước cột đó
  • fixed: cố định kích thước cột

VD5

Kết luận

Mong rằng, bài viết này sẽ giúp các bạn có thể tạo được những table dữ liệu thực sự tối ưu và hiệu quả. Cảm ơn các bạn đã đón đọc. Hãy chờ bài tiếp theo nhé!

Xem tiếp bài trong serie Học Css cơ bản

Bài trước: [Bài 4] CSS List - Tìm hiểu CSS cùng BIT
[Bài 5] CSS Table – Tìm hiểu CSS cùng BIT
5 (100%) 1 vote

Bình luận

3 Bình luận on "[Bài 5] CSS Table – Tìm hiểu CSS cùng BIT"

Thông báo
avatar
Sắp xếp:   Mới nhất | Cũ nhất | Bình chọn nhiều
Thái Tài
Guest

Ai có demo nào về Table nhìn đẹp cho mình xin tham khảo được ko ạ, đang làm cái table báo giá mà nhìn ko chuyên nghiệp, chán quá

Hải Long
Admin
wpDiscuz