CSS có thể được sử dụng như thế nào để tạo kiểu cho bảng?

Nhưng khi bạn tạo một bảng HTML không có bất kỳ kiểu hoặc 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. Với CSS, bạn có thể cải thiện đáng kể diện mạo của bảng

CSS cung cấp một số thuộc tính cho phép bạn kiểm soát bố cục và cách trình bày của các thành phần bảng. Trong phần sau, bạn sẽ thấy cách sử dụng CSS để tạo các bảng thanh lịch và nhất quán

Thêm viền vào bảng

Thuộc tính CSS

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

2 là cách tốt nhất để xác định đường viền cho bảng

Ví dụ sau sẽ đặt viền đen cho thuộc tính

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

3

Các quy tắc kiểu sau sẽ thu gọn viền ô của bảng và áp dụng viền đen một pixel

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

Ghi chú. Bạn cũng có thể loại bỏ khoảng cách giữa các đường viền ô của bảng thông qua việc đặt giá trị của thuộc tính CSS

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

4 thành 0. Tuy nhiên nó chỉ xóa khoảng trắng chứ không gộp viền như khi bạn set

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

5 thành

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

6

Điều chỉnh không gian bên trong bảng

Theo mặc định, trình duyệt tạo các ô của bảng vừa đủ lớn để chứa dữ liệu trong các ô

Để thêm khoảng trống giữa nội dung ô của bảng và đường viền ô, bạn chỉ cần sử dụng thuộc tính CSS

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

7. Hãy thử ví dụ sau và xem nó hoạt động như thế nào

th, td {
    padding: 15px;
}

Bạn cũng có thể điều chỉnh khoảng cách giữa các đường viền của các ô bằng cách sử dụng thuộc tính CSS

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

4, nếu các đường viền của bảng của bạn được phân tách [là mặc định]

Các quy tắc kiểu sau áp dụng khoảng cách 10 pixel giữa tất cả các đường viền trong bảng

table {
    border-spacing: 10px;
}

Đặt chiều rộng và chiều cao của bảng

Theo mặc định, một bảng sẽ hiển thị vừa đủ rộng và cao để chứa tất cả 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 CSS

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

9 và

th, td {
    padding: 15px;
}

0. Quy tắc kiểu trong ví dụ sau sẽ đặt chiều rộng của bảng thành 100% và chiều cao của các ô tiêu đề bảng thành 40px

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

2

Kiểm soát bố cục bảng

Một bảng mở rộng và co lại để chứa dữ liệu chứa bên trong nó. Đây là hành vi mặc định. Khi dữ liệu lấp đầy bên trong bảng, nó sẽ tiếp tục mở rộng miễn là còn chỗ trống. Tuy nhiên, đôi khi cần đặt chiều rộng cố định cho bảng để quản lý bố cục

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

th, td {
    padding: 15px;
}

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

• tự động — Sử dụng 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
• cố định — 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ó thường nhanh hơn tự động

Các quy tắc kiểu trong ví dụ sau xác định rằng bảng HTML được trình bày bằng cách sử dụng thuật toán bố cục cố định và có chiều rộng cố định là 300 pixel. Hãy dùng thử và xem nó hoạt động như thế nào

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

4

Mẹo. Bạn có thể tối ưu hóa hiệu suất kết xuất bảng bằng cách chỉ định giá trị

th, td {
    padding: 15px;
}

2 cho thuộc tính

th, td {
    padding: 15px;
}

1. Giá trị cố định 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 điểm, cung cấp cho người dùng thông tin với tốc độ nhanh hơn

Ghi chú. Nếu không có giá trị

th, td {
    padding: 15px;
}

2 của thuộc tính

th, td {
    padding: 15px;
}

1 trên các 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 hiển thị toàn bộ bảng

Căn chỉnh văn bản bên trong các ô của bảng

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

Căn ngang nội dung ô

Để 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

th, td {
    padding: 15px;
}

6 giống như cách bạn sử dụng với các phần tử khác. Bạn căn chỉnh văn bản sang trái, phải, giữa hoặc căn đều

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

yếu tố

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

0

Ghi chú. 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à hiển thị bằng phông chữ đậm theo mặc định

Căn dọc nội dung ô

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

và các phần tử lên trên cùng, dưới cùng hoặc ở giữa bằng cách sử dụng thuộc tính CSS

th, td {
    padding: 15px;
}

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

Các quy tắc kiểu sau đây sẽ căn chỉnh dưới cùng theo chiều dọc văn bản bên trong

yếu tố

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

2

Kiểm soát vị trí của chú thích bảng

Bạn có thể đặt vị trí dọc của chú thích bảng bằng thuộc tính CSS

th, td {
    padding: 15px;
}

8

Chú thích có thể được đặt ở đầu hoặc cuối bảng. Vị trí mặc định là trên cùng

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

4

Mẹo. Để thay đổi căn ngang của văn bản chú thích của bảng [e. g. trái hoặc phải], bạn có thể chỉ cần sử dụng thuộc tính CSS

th, td {
    padding: 15px;
}

6, giống như bạn làm với văn bản bình thường

Xử lý các ô trống

Trong các bảng sử dụng mô hình đường viền riêng biệt, là mô hình mặc định, bạn cũng có thể kiểm soát việc hiển thị các ô không có nội dung hiển thị bằng thuộc tính CSS

table {
    border-spacing: 10px;
}

0

Thuộc tính này chấp nhận giá trị của

table {
    border-spacing: 10px;
}

1 hoặc

table {
    border-spacing: 10px;
}

2. Giá trị mặc định là

table {
    border-spacing: 10px;
}

1, sẽ hiển thị các ô trống giống như các ô bình thường, nhưng nếu giá trị

table {
    border-spacing: 10px;
}

2 được chỉ định thì không có đường viền hoặc nền nào được vẽ xung quanh các ô trống. Hãy thử một ví dụ để hiểu nó thực sự hoạt động như thế nào

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

1

Ghi chú. Đặt một khoảng trắng không ngắt [_______95] bên trong một ô của bảng làm cho nó không trống. Do đó, ngay cả khi ô đó trông trống rỗng, giá trị

table {
    border-spacing: 10px;
}

2 sẽ không ẩn đường viền và nền

Tạo bảng sọc vằn

Đặt các màu nền khác nhau cho các hàng thay thế là một kỹ thuật phổ biến để cải thiện khả năng đọc của các bảng có lượng dữ liệu lớn. Điều này thường được gọi là sọc ngựa vằn trên bàn

Bạn chỉ có thể đạt được hiệu ứng này bằng cách sử dụng bộ chọn lớp giả CSS

table {
    border-spacing: 10px;
}

7

Các quy tắc kiểu sau sẽ đánh dấu mọi hàng lẻ trong phần thân bảng

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

0

Một bảng sọc ngựa vằn thường trông giống như hình ảnh sau đây

Ghi chú. Lớp giả

table {
    border-spacing: 10px;
}

7 chọn các phần tử 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 hoặc lẻ hoặc một biểu thức có dạng xn+y trong đó x và y là các số nguyên [e. g. 1n, 2n, 2n+1,. ] như một đối số

Tạo một bảng đáp ứng

Các bảng không đáp ứng trong tự nhiên. Tuy nhiên, để hỗ trợ các thiết bị di động, bạn có thể thêm khả năng phản hồi cho các bảng của mình bằng cách cho phép cuộn ngang trên màn hình nhỏ. Để làm điều này, chỉ cần bọc bàn của bạn bằng một

Làm cách nào chúng ta có thể tạo kiểu cho bảng bằng cách giải thích CSS?