Cách CSS Bảng (Table) – Tự học CSS3

Trong bài hướng dẫn tự học CSS này, bạn sẽ tìm hiểu toàn tập cách CSS bảng đẹp, CSS table một cách dễ hiểu nhất.

Hướng dẫn CSS bảng đẹp, CSS Table Hướng dẫn CSS bảng đẹp, CSS Table

Vì sao cần tạo kiểu cho bảng với CSS

Trong lập trình web, bạn hoàn toàn có thể sẽ cần tạo rất nhiều bảng để tàng trữ, hiển thị thông tin một cách khoa học .

Các bảng (table) thường được sử dụng để hiển thị dữ liệu, chẳng hạn như báo cáo tài chính, thống kê, kế toán…

Nhưng khi bạn tạo một bảng HTML mà không có được CSS hoặc thêm thuộc tính nào, trình duyệt sẽ hiển thị chúng mà không có bất kỳ đường viền nào.

Như thế trông sẽ rất tệ .

Thế nên bạn cần phải thực hiện CSS cho bảng để mang lại trả nghiệm tốt hơn.

CSS phân phối một số ít thuộc tính được cho phép bạn trấn áp bố cục tổng quan và cách trình diễn những thành phần của bảng. Trong phần sau, bạn sẽ thấy cách sử dụng CSS để tạo những bảng một cách lịch sự và đồng nhất .

CSS Table #1: Thêm đường viền cho bảng

Sử dụng thuộc tính border của CSS là cách tốt nhất để xác định đường viền cho các bảng.

Ví dụ sau sẽ thiết lập đường viền màu đen cho các phần tử

,

.

Nếu bạn chưa biết thì :

  • là cặp thẻ khai báo một bảng

  • là để tạo một hàng trong bảng

  • là cặp thẻ để xác định các tiêu đề của từng cột

  • là cặp thẻ xác định nội dung của cùng một hàng (qua từng cột)

Ví dụ, mình có một bảng đơn thuần như thế này :

ID Họ và tên đệm Tên Email
1 Nguyễn Minh Đức [email protected]
2 Vũ Kim Thoa [email protected]
3 Nguyễn Linh Trang [email protected]
4 Vi Đại Doanh [email protected]

Bây giờ, mình thiết lập đường viền cho bảng bằng CSS như sau :

table, th, td {
    border: 1px solid black;
}
  • 1px là độ rộng của đường viền
  • solid (nét liền), dashed (gạch ngang), dotted (kiểm chấm) là kiểu nét của đường viền
  • black (có thể chọn màu tùy ý) là màu của đường viền

Kết quả được như hình :
Tạo một bảng đơn giản với HTMLTạo một bảng đơn giản với HTML
Vì theo mặc định, trình duyệt vẽ một đường viền xung quanh bảng, cũng như xung quanh tổng thể những ô, với một khoảng chừng trống ở giữa, dẫn đến đường viền kép .
Để thoát khỏi yếu tố đường viền kép này, bạn hoàn toàn có thể chỉ cần thu gọn những đường viền ô liền kề và tạo những đường viền đơn .

Nó gọi là Collapsing Border

Collapsing Border

Có hai quy mô riêng không liên quan gì đến nhau để thiết lập đường viền trên những ô của bảng trong CSS :

  • separate: Tách biệt
  • collapse: Thu gọn

Trong mô hình separate border, nó là mặc định, mỗi ô của bảng có các viền riêng biệt (Vì thế bạn thấy đường viền kép)

Trong khi đó ở mô hình collapsed border, các ô của bảng liền kề có chung một viền.

Bạn có thể thiết lập mô hình viền cho bảng HTML bằng cách sử dụng thuộc tính border-collapse của CSS.

Đoạn code CSS sau đây sẽ thu gọn những viền ô của bảng ( thành viền đơn ) và vận dụng một viền đen 1 px .
Vẫn sử dụng bảng trên bạn nhé

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

Kết quả nhận được là :
CSS Table: Ví dụ Collapsing border với CSSCSS Table: Ví dụ Collapsing border với CSS
Lưu ý : Bạn cũng hoàn toàn có thể xóa khoảng chừng trắng giữa những viền của ô bảng trải qua đặt giá trị của thuộc tính border-spacing CSS thành 0. Tuy nhiên, nó chỉ xóa khoảng chừng trắng nhưng không hợp nhất những đường viền như khi bạn đặt thu gọn đường viền thành thu gọn .
Vì thế, nếu bạn sử dụng CSS :

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

Thì hiệu quả bạn nhận được là :
CSS Table: Xóa khoảng trắng giữa các đường viên bằng thuộc tính border-spacingCSS Table: Xóa khoảng trắng giữa các đường viên bằng thuộc tính border-spacing

CSS Table #2: Điều chỉnh không gian bên trong bảng

Theo mặc định, trình duyệt tạo những ô bảng đủ lớn để chứa vừa tài liệu trong những ô .
Nhưng nhìn nó vẫn rất eo hẹp .
Mà để tăng tính thưởng thức thì cần có nhiều khoảng chừng trắng hơn .
Do đó, cần phải thêm khoảng trống giữa nội dung ô của bảng và viền ô .

Để làm việc này, bạn chỉ cần sử dụng thuộc tính padding trong CSS. Hãy thử ví dụ sau và xem nó hoạt động như thế nào:

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

Kết quả nhận được là :
CSS Table: Thêm padding trong bảngCSS Table: Thêm padding trong bảng

Bạn cũng có thể điều chỉnh khoảng cách giữa các viền của các ô bằng cách sử dụng thuộc tính border-spacing trong CSS, nếu các viền của bảng của bạn đang sử dụng là mô hình separate border (mặc định đó).

Các quy tắc CSS sau vận dụng khoảng cách 10 px giữa tổng thể những viền trong một bảng :

table {
    border-spacing: 10px;
}
table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}

Kết quả tất cả chúng ta nhận được là :
CSS Table: Thêm khoảng cách giữa các đường viên trong bảngCSS Table: Thêm khoảng cách giữa các đường viên trong bảng

CSS Table #3: Thiết lập Width và Height cho bảng

Theo mặc định, một bảng sẽ hiển thị chỉ vừa đủ rộng và đủ cao để chứa tổng thể nội dung của nó .

Tuy nhiên, bạn cũng có thể đặt chiều rộng và chiều cao của bảng cũng như các ô của bảng một cách rõ ràng bằng cách sử dụng thuộc tính widthheight của CSS.

Các quy tắc CSS trong ví dụ sau sẽ thiết lập chiều rộng của bảng thành 100 % và chiều cao của những ô tiêu đề bảng thành 40 px .

table {
    width: 100%;        
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    border: 1px solid #dee2e6;
}
th {
    height: 40px;
    text-align: left;
}

Khi chạy trên trình duyệt, tác dụng tất cả chúng ta dùng được là :
CSS Table: Thiết lập width và height cho bảngCSS Table: Thiết lập width và height cho bảng

CSS Table #4: Kiểm soát bố cục của bảng

Một bảng tự động hóa lan rộng ra và teo lại để chứa vừa tài liệu chứa bên trong nó ( Đây là hành vi mặc định )
Khi tài liệu điền vào bên trong bảng, nó liên tục lan rộng ra miễn là còn có khoảng trống. Tuy nhiên, nhiều lúc, cần phải thiết lập chiều rộng cố định và thắt chặt cho bảng để quản trị bố cục tổng quan thống nhất .

Bạn có thể làm điều này với sự trợ giúp của thuộc tính table-layout trong CSS.

Thuộc tính này xác lập thuật toán được sử dụng để sắp xếp những ô, hàng và cột của bảng. Thuộc tính này có một trong hai giá trị :

  • auto: Sử dụng một thuật toán bố trí bảng tự động. Với thuật toán này, độ rộng của bảng và các ô của nó được điều chỉnh để phù hợp với nội dung. Đây là giá trị mặc định.
  • fixed: Sử dụng thuật toán bố trí bảng cố định. Với thuật toán này, bố cục ngang của bảng không phụ thuộc vào nội dung của các ô. Nó chỉ phụ thuộc vào chiều rộng của bảng, chiều rộng của các cột và đường viền hoặc khoảng cách ô. Bố trí bảng này trình duyệt sẽ thực thi nhanh hơn bảng auto.

Các quy tắc CSS trong ví dụ sau xác định rằng bảng HTML được trình bày bằng thuật toán bố cục fixed và có chiều rộng cố định 300 pixel.

Hãy dùng thử và xem nó hoạt động giải trí như thế nào nhé :
HTML :

Ví dụ 1. Bảng Auto
Họ và tên Nguyễn Linh Trang
Email [email protected]

Ví dụ 2. Bảng Fixed
Họ và tên Vũ Kim Thoa
Email [email protected]

CSS:

table {
    width: 300px;
    border-collapse: collapse;            
}
table, tr, th, td{
    border: 1px solid #000000;
}
.auto {
    table-layout: auto;
}
.fixed {
    table-layout: fixed;
}
td{
    width: 50%;
}

Kết quả nhận được là :
CSS Table: Kiểm soát bố cục của bảngCSS Table: Kiểm soát bố cục của bảng
Mẹo : Bạn hoàn toàn có thể tối ưu hóa hiệu suất kết xuất bảng ( trong trình duyệt ) bằng cách chỉ định giá trị fixed cho thuộc tính table-layout. Giá trị fixed của thuộc tính này làm cho bảng được hiển thị một hàng tại một thời gian, cung ứng cho người dùng thông tin với vận tốc nhanh hơn .
Note : Nếu không có giá trị fixed của thuộc tính table-layout trên những bảng lớn, người dùng sẽ không thấy bất kể phần nào của bảng cho đến khi trình duyệt render xong hàng loạt bảng .

CSS Table #5: Căn chỉnh văn bản bên trong các ô của bảng

Bạn hoàn toàn có thể chỉnh sửa nội dung văn bản bên trong những ô của bảng theo chiều ngang hoặc chiều dọc .

Căn chỉnh nội dung theo chiều ngang của ô trong bảng

Để căn chỉnh văn bản theo chiều ngang bên trong các ô của bảng, bạn có thể sử dụng thuộc tính text-align giống như cách bạn sử dụng với các phần tử khác.

  • Đọc thêm: Cách CSS text

Bạn hoàn toàn có thể chỉnh sửa văn bản sang trái ( left ), phải ( right ), giữa ( center ) hoặc căn đều ( justify ) .

Các quy tắc kiểu sau sẽ căn trái văn bản bên trong các thành phần

. (Sử dụng HTML ở ví dụ 1)

table {
    width: 100%;        
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    border: 1px solid #dee2e6;
}
th {
    text-align: left;
}

Kết quả nhận được như sau :
CSS Table: Căn chỉnh nội dung theo chiều ngang của ô

Lưu ý: Văn bản bên trong các phần tử

được căn trái theo mặc định, trong khi văn bản bên trong các phần tử

được căn giữa và được hiển thị bằng phông chữ đậm theo mặc định.

Sắp xếp nội dung theo chiều dọc của ô trong bảng

Tương tự, bạn có thể căn chỉnh nội dung theo chiều dọc bên trong các phần tử

thành trên cùng (top), dưới cùng (bottom) hoặc giữa (center) bằng cách sử dụng thuộc tính vertical-align trong CSS.

Căn dọc mặc định là giữa .

Các quy tắc CSS sau sẽ căn chỉnh văn bản theo chiều dọc, xuống dưới cùng bên trong các phần tử

.

table {
    width: 100%;        
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    border: 1px solid #dee2e6;
}
th {
    height: 40px;
    vertical-align: bottom;
}

Kết quả nhận được là :
CSS Table: Căn chỉnh nội dung theo chiều dọc của ôCSS Table: Căn chỉnh nội dung theo chiều dọc của ô

CSS Table #6: Kiểm soát vị trí chú thích của bảng

Bạn có thể thiết lập vị trí dọc của chú thích bảng bằng thuộc tính caption-side trong CSS.

Chú thích hoàn toàn có thể được đặt ở đầu ( top ) hoặc cuối bảng ( bottom ). Vị trí mặc định là top .
Trước tiên, bạn thêm chú thích bảng vào trong HTML :

BẢNG DANH SÁCH HỌC VIÊN

Sau đó, đây là CSS :

table, td, th {
    border: 1px solid gray;
}
caption {
    caption-side: bottom;
}

Khi chạy trên trình duyệt, ta có bảng sau :
CSS Table: Kiểm soát vị trí chú thích của bảngCSS Table: Kiểm soát vị trí chú thích của bảng
Mẹo : Để chỉnh sửa chiều ngang của văn bản chú thích của bảng ( ví dụ : căn trái hoặc phải ), bạn chỉ cần sử dụng thuộc tính text-align trong CSS, giống như cách bạn làm với văn bản thường thì là được .

CSS Table #7: Xử lý các ô trống trong bảng

Trong các bảng sử dụng mô hình separate border, theo mặc định, bạn cũng có thể kiểm soát việc render các ô không có nội dung hiển thị bằng cách sử dụng thuộc tính empty-cells trong CSS.

Thuộc tính này chấp nhận giá trị show hoặc hide.

Giá trị mặc định là show, hiển thị các ô trống như các ô bình thường.

Nhưng nếu giá trị hide được chỉ định, không có border hoặc background nào được vẽ xung quanh các ô trống.

Hãy thử một ví dụ để hiểu cách nó thực sự hoạt động giải trí :
Ta có HTML :

BẢNG VỚI CÁC Ô TRỐNG

Họ và tên Nguyễn Linh Trang
Email

BẢNG VỚI CÁC Ô TRỐNG BỊ ẨN

Họ và tên Vũ Kim Thoa
Email

Đây là CSS :

table {
    width: 300px;
    border-collapse: separate;
}
table, th, td{
    border: 1px solid #000000;
}
table.empty-show {
    empty-cells: show;                        
}
table.empty-hide {
    empty-cells: hide;           
}

Và tác dụng nhận được là đây :
CSS Table: Kiểm soát các ô trống trong bảngCSS Table: Kiểm soát các ô trống trong bảng
Mẹo : Đặt giá trị ( ) bên trong một ô của bảng làm cho nó không bị trống. Do đó, ngay cả khi ô đó nhìn thì trống rỗng, giá trị hide sẽ không ẩn đường viền và nền .

CSS Table #8: Tạo bảng sọc như ngựa vằn

Bạn hoàn toàn có thể thiết lập màu nền khác nhau cho những hàng xen kẽ là một kỹ thuật phổ cập để cải tổ năng lực đọc của những bảng có lượng tài liệu lớn .
Kỹ thuật này thường được gọi là : zebra-striping

Bạn chỉ có thể đạt được hiệu ứng này bằng cách sử dụng pesudo-class Selector trong CSS là :nth-child().

Các quy tắc CSS sau sẽ làm điển hình nổi bật mọi hàng lẻ trong thân bảng .

table {
    width: 100%;        
    font-family: arial, sans-serif;
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    text-align: left;
    border-top: 1px solid #dee2e6;
}
    tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
}

Kết quả nhận được là :
CSS Table: Tạo bảng kiểu ngựa vằnCSS Table: Tạo bảng kiểu ngựa vằn

Lưu ý: Các phần tử pesudo-class nth-child() dựa trên vị trí của chúng trong một nhóm anh chị em. Nó có thể lấy một số, một từ khóa chẵn (even) hoặc lẻ (odd) hoặc một biểu thức có dạng xn + y trong đó x và y là các số nguyên (ví dụ: 1n, 2n, 2n + 1, …) làm đối số.

CSS Table #9: Tạo bảng Responsive

Theo mặc định thì bảng không responsive ( năng lực thích hợp với những loại size màn hình hiển thị ) .
Tuy nhiên, để tương hỗ những thiết bị di động, bạn hoàn toàn có thể thêm năng lực responsive cho những bảng của mình bằng cách được cho phép cuộn ngang trên màn hình hiển thị nhỏ .

Để làm điều này, chỉ cần bọc bảng của bạn bằng một phần tử

và áp dụng kiểu overflow-x: auto; như hình dưới đây:

HTML :

ID Họ và tên đệm Tên Email Số điện thoại Địa chỉ hiện tại Quê quán
1 Nguyễn Minh Đức [email protected] 0989111222 Tầng 3, 25T2, Nguyễn Thị Thập, Cầu Giấy, Hà Nội Thanh Hóa
2 Vũ Kim Thoa [email protected] 0989222333 Tầng 3, 25T2, Nguyễn Thị Thập, Cầu Giấy, Hà Nội Hà Nội
3 Nguyễn Linh Trang [email protected] 0989333444 Tầng 3, 25T2, Nguyễn Thị Thập, Cầu Giấy, Hà Nội Tuyên Quang
4 Vi Đại Doanh [email protected] 0989444555 Tầng 3, 25T2, Nguyễn Thị Thập, Cầu Giấy, Hà Nội Tuyên Quang

Đây là CSS :

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    text-align: left;
    border: 1px solid #dee2e6;
    white-space: nowrap; /* Ngăn chặn văn bản xuống dòng */
}
.responsive-table {
    overflow-x: auto;
}

Kết quả nhận được là :
CSS Table: Tạo bảng ResponsiveCSS Table: Tạo bảng Responsive

Như vậy, trong bài hướng dẫn tự học CSS này mình đã hướng dẫn bạn cách CSS bảng, cách CSS bảng đẹp thông qua các thuộc tính của CSS.

Hi vọng bài viết có ích cho quá trình học CSS, cũng như học lập trình web của bạn.

Chú ý: Nếu bạn đang tìm kiếm khóa học Lập trình Web bài bản để trở thành lập trình viên phát triển web thực thụ thì hãy xem qua ngay KHÓA HỌC LẬP TRÌNH FULL STACK tại NIIT – ICT Hà Nội nhé.

Học tiếp: CSS Box Model

Đọc thêm: Cách CSS cho các danh sách