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
Tóm Tắt
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.
Bạn đang đọc: Cách CSS Bảng (Table) – Tự học CSS3
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ử
| và | . |
|---|
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 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 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-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ả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ả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 width và height 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ả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:
Xem thêm: Ép kiểu trong Java | How Kteam
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ả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
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 :
Lưu ý: Văn bản bên trong các phần tử
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ử
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 #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ả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ả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ằ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ử
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 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.
Xem thêm: Khối finally trong Java
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
Source: https://final-blade.com
Category: Kiến thức Internet
