CSS - Bảng

Chào mừng các bạn đang theo đuổi nghề lập trình web! Hôm nay, chúng ta sẽ khám phá thế giới của bảng trong CSS. Là giáo viên khoa học máy tính gần gũi của bạn, tôi rất vui mừng được hướng dẫn bạn trong hành trình này. Bảng có thể trông cũ kỹ, nhưng hãy tin tôi, chúng vẫn vô cùng hữu ích trong thiết kế web hiện đại. Hãy c rolled up our sleeves and get started!

CSS Tables - Border Collapse

Hãy tưởng tượng bạn đang xây dựng một hàng rào xung quanh vườn của bạn. Bạn muốn các cột rào chạm vào nhau, phải không? Đó chính xác là điều border-collapse làm cho các cạnh bảng. Nó xác định xem các cạnh của ô nên được tách biệt hay gộp lại thành một cạnh duy nhất.

table {
border-collapse: collapse;
}

Mã này sẽ làm cho các cạnh bảng của bạn chạm vào nhau, tạo ra một的外观整洁, thống nhất. Đó như thể cho bảng của bạn một cuộc cắt tóc gọn gàng!

CSS Tables - Border Spacing

Bây giờ, nếu bạn muốn có một khoảng cách giữa các ô bảng của mình? Đó là lúc border-spacing phát huy tác dụng. Nó như khoảng cách xã hội cho các ô bảng của bạn!

table {
border-spacing: 5px;
}

Điều này sẽ thêm một khoảng cách 5-pixel giữa các ô của bạn. Bạn thậm chí có thể đặt khoảng cách khác nhau cho chiều ngang và dọc:

table {
border-spacing: 5px 10px;
}

Ở đây, chúng ta có 5 pixel khoảng cách chiều ngang và 10 pixel khoảng cách dọc. Đó như thể cho các ô bảng của bạn một chút không gian cá nhân!

CSS Tables - Caption Side

Bảng có thể có chú thích, và bạn có thể kiểm soát vị trí của các chú thích này bằng cách sử dụng caption-side. Nó như việc quyết định đặt tựa đề của một cuốn sách ở trên cùng hay dưới cùng của bìa.

caption {
caption-side: bottom;
}

Điều này sẽ đặt chú thích bảng ở dưới cùng. Bạn cũng có thể sử dụng top nếu bạn muốn đặt nó ở trên cùng.

CSS Tables - Empty Cells

Bạn có bao giờ thắc mắc điều gì sẽ xảy ra với các ô trống trong bảng của bạn? Thuộc tính empty-cells cho phép bạn quyết định có hiển thị chúng hay không.

table {
empty-cells: hide;
}

Điều này sẽ làm cho các ô trống trở nên vô hình. Đó như thể chơi hide-and-seek với các ô bảng của bạn!

CSS Tables - Table Layout

Thuộc tính table-layout xác định cách các ô, hàng và cột của bảng được sắp xếp. Nó như việc chọn giữa một bản đồ chỗ ngồi严格 và một buổi tiệc tự do.

table {
table-layout: fixed;
}

Điều này thiết lập một bố cục bảng cố định, có thể cải thiện tốc độ render cho các bảng lớn.

CSS Table - with fixed Layout

Với bố cục cố định, chiều rộng của bảng được xác định bởi hàng đầu tiên hoặc các chiều rộng được chỉ định. Nó như việc có chỗ ngồi đã chỉ định tại buổi tiệc cưới.

table {
table-layout: fixed;
width: 100%;
}

th, td {
width: 25%;
}

Điều này tạo ra một bảng với bốn cột có chiều rộng bằng nhau, không phụ thuộc vào nội dung.

CSS Table - with auto Layout

Bố cục tự động điều chỉnh chiều rộng cột dựa trên nội dung của chúng. Nó như để khách tự chọn chỗ ngồi tại buổi tiệc casual.

table {
table-layout: auto;
width: 100%;
}

Ở đây, trình duyệt sẽ điều chỉnh chiều rộng cột dựa trên nội dung của chúng.

CSS Tables - Height and Width

Bạn có thể kiểm soát kích thước của bảng và các ô của nó bằng cách sử dụng các thuộc tính height và width. Nó như việc quyết định kích thước của bàn ăn của bạn.

table {
width: 100%;
}

td {
height: 50px;
}

Điều này thiết lập chiều rộng bảng là 100% của container và chiều cao của mỗi ô là 50 pixel.

CSS Tables - Table Alignment

Căn chỉnh nội dung trong các ô bảng rất quan trọng để dễ đọc. Nó như việc sắp xếp thức ăn trên đĩa - ngoại hình rất quan trọng!

td {
text-align: center;
vertical-align: middle;
}

Điều này căn giữa nội dung cả theo chiều ngang và chiều dọc trong mỗi ô.

CSS Tables - Border

Cạnh có thể làm cho bảng của bạn hấp dẫn hơn về thị giác và dễ đọc hơn. Nó như việc vẽ các đường trên giấy để tổ chức thông tin.

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

Điều này thêm một cạnh 1-pixel solid black vào bảng và tất cả các ô của nó.

CSS Tables - Background color

Thêm màu nền có thể làm cho bảng của bạn hấp dẫn hơn về thị giác và giúp phân biệt các phần khác nhau của bảng. Nó như việc sơn các phòng trong nhà bạn với các màu khác nhau.

table {
background-color: #f2f2f2;
}

th {
background-color: #4CAF50;
color: white;
}

Điều này đặt nền màu xám nhạt cho bảng và nền màu xanh với chữ trắng cho các ô tiêu đề.

CSS Tables - Font styles

Thiết kế字体 trong bảng của bạn có thể cải thiện khả năng đọc. Nó như việc chọn字体 đúng cho một cuốn sách - nó có thể tạo ra sự khác biệt lớn trong trải nghiệm đọc.

table {
font-family: Arial, sans-serif;
}

th {
font-weight: bold;
}

td {
font-size: 14px;
}

Điều này đặt Arial là字体 cho toàn bộ bảng, làm cho chữ trong tiêu đề in đậm và đặt kích thước chữ trong ô là 14 pixel.

CSS Tables - Other Styles

Có rất nhiều thuộc tính khác mà bạn có thể áp dụng cho bảng. Dưới đây là một nhanh chóng:

Thuộc tính	Mô tả	Ví dụ
padding	Khoảng cách trong các ô	td { padding: 10px; }
border-radius	Góc tròn	table { border-radius: 5px; }
box-shadow	Hiệu ứng bóng	table { box-shadow: 2px 2px 5px grey; }
opacity	Độ trong suốt	table { opacity: 0.8; }

CSS Tables - Margin

Margines có thể cho bảng của bạn một chút không gian từ các yếu tố khác trên trang. Nó như việc để một khoảng trống xung quanh khung hình trên tường.

table {
margin: 20px auto;
}

Điều này thêm một margines 20-pixel ở trên và dưới của bảng, và căn giữa nó theo chiều ngang.

CSS Tables - Table Dividers (vertical / horizontal)

Bạn có thể thêm các đường phân cách vào bảng để phân cách các cột hoặc hàng. Nó như việc sử dụng một thước để vẽ các đường thẳng trong sổ tay.

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

tr {
border-bottom: 1px solid black;
}

Điều này thêm các đường vertica بین các cột và các đường horizontal giữa các hàng.

CSS Tables - Striped Table

Bảng kẻ sọc có thể làm cho việc đọc các hàng dữ liệu dễ dàng hơn. Nó như việc highlighting mỗi dòng khác nhau trong một cuốn sách để giữ vị trí.

tr:nth-child(even) {
background-color: #f2f2f2;
}

Điều này tạo ra các hàng trắng và xám nhạt xen kẽ trong bảng của bạn.

CSS Tables - Responsive Table

Làm cho bảng responsive đảm bảo chúng trông tốt trên tất cả các thiết bị. Nó như việc có một bàn ăn có thể mở rộng hoặc thu nhỏ dựa trên số lượng khách.

@media screen and (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}

thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid #ccc; }

td {
border: none;
position: relative;
padding-left: 50%;
}

td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
content: attr(data-label);
}
}

Mã này chuyển đổi bảng thành định dạng danh sách trên màn hình nhỏ, làm cho nó dễ đọc hơn trên các thiết bị di động.

CSS Table - Related Properties

Dưới đây là bảng các thuộc tính liên quan mà bạn có thể tìm thấy hữu ích khi làm việc với bảng:

Thuộc tính	Mô tả
border-collapse	Xác định xem các cạnh ô riêng lẻ hay gộp lại
border-spacing	Đặt khoảng cách giữa các cạnh ô
caption-side	Chỉ định vị trí của chú thích bảng
empty-cells	Đặt có hiển thị các ô trống hay không
table-layout	Đặt thuật toán được sử dụng để sắp xếp các ô, hàng và cột của bảng
vertical-align	Đặt căn chỉnh vertica của nội dung trong ô
text-align	Đặt căn chỉnh horizonta của nội dung trong ô

Và đó là tất cả! Bây giờ bạn đã được trang bị đầy đủ để tạo và thiết kế bảng trong CSS. Nhớ rằng, thực hành là cách tốt nhất để trở thành người thợ giỏi, vì vậy đừng ngại thử nghiệm với các thuộc tính này. Chúc bạn may mắn với việc lập trình!

Credits: Image by storyset