HTML - Định dạng Bảng

Xin chào các bạn future web developers! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị vào thế giới định dạng bảng HTML. Là người đã dạy khoa học máy tính trong nhiều năm, tôi có thể nói rằng việc thành thạo việc định dạng bảng giống như học vẽ tranh - nó bắt đầu từ việc hiểu canvas và công cụ của bạn. Vậy hãy cùng nhau lặn sâu và làm cho những bảng này trở nên lung linh!

Bảng HTML Thường

Trước khi chúng ta bắt đầu thêm phong cách vào bảng của mình, hãy nhắc nhở mình về hình dạng cơ bản của một bảng HTML. Dưới đây là một ví dụ đơn giản:

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>

Mã này tạo ra một bảng cơ bản với hai cột và ba hàng (bao gồm hàng tiêu đề). Nó hoạt động, nhưng hãy thành thật, nó nhàm chán như việc nhìn sơn khô. Đó là lúc phong cách bước vào!

Phong cách Bảng HTML

Bây giờ, hãy nói về các cách khác nhau chúng ta có thể định dạng bảng của mình. Hãy tưởng tượng chúng như những cọ và màu trong bộ công cụ thiết kế web của bạn:

Thuộc tính	Mô tả
border	Đặt viền xung quanh bảng và các ô
border-collapse	Xác định liệu các viền của ô có bị gộp lại thành một viền duy nhất hay tách biệt
width	Đặt chiều rộng của bảng
height	Đặt chiều cao của bảng
text-align	Canh lề văn bản trong các ô (trái, phải, giữa)
vertical-align	Canh lề văn bản theo phương dọc trong các ô (trên, giữa, dưới)
padding	Đặt khoảng cách giữa viền của ô và nội dung của nó
background-color	Đặt màu nền của bảng hoặc các ô
color	Đặt màu văn bản
font-family	Đặt phông chữ cho văn bản
font-size	Đặt kích thước của văn bản

Ví dụ Định dạng Bảng HTML

Hãy áp dụng các thuộc tính này vào một số ví dụ. Tôi hứa, vào cuối bài này, bạn sẽ định dạng bảng như một chuyên gia!

Ví dụ 1: Định dạng Bảng Cơ bản

<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>

<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
</tr>
</table>

Trong ví dụ này, chúng ta đã thêm một số phong cách cơ bản. Thuộc tính border-collapse: collapse合并 các viền của ô, tạo ra một外观 sạch sẽ hơn. Chúng ta đã đặt chiều rộng bảng là 100% của containner, thêm viền cho các ô, bao gồm một chút padding và cho header một nền màu xám nhạt. Đó như việc cho bảng của bạn một cắt tóc gọn gàng và một áo sơ mi mới!

Ví dụ 2: Ghi chép Zebra

<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>

<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td>$1.00</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.75</td>
</tr>
<tr>
<td>Orange</td>
<td>$0.90</td>
</tr>
</table>

Ở đây, chúng ta đã giới thiệu khái niệm về ghi chép zebra. Selector tr:nth-child(even) nhắm đến các hàng chẵn và cho chúng một nền màu xám nhạt. Schema màualternating này giúp người dùng dễ dàng theo dõi các hàng qua bảng. Đó như việc cho bảng của bạn một suit kẻ sọc thời trang!

Ví dụ 3: Bảng T响应

<style>
.responsive-table {
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
min-width: 600px;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
@media screen and (max-width: 600px) {
th, td {
display: block;
}
tr {
margin-bottom: 15px;
}
th {
text-align: center;
}
}
</style>

<div class="responsive-table">
<table>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
</tr>
</table>
</div>

Ví dụ này giới thiệu tính năng响应 ứng vào bảng của chúng ta. Trên màn hình lớn, nó hành xử như một bảng bình thường. Nhưng trên màn hình nhỏ hơn (dưới 600px rộng), nó chuyển sang một layout card-like nơi mỗi ô được hiển thị như một block. Đó như việc dạy bảng của bạn làm yoga - nó trở nên linh hoạt và phù hợp với các kích thước màn hình khác nhau!

Kết luận

Và thế là bạn đã có, các bạn! Chúng ta đã chuyển đổi bảng của mình từ đơn giản và nhàm chán thành thời trang và响应 ứng. Nhớ rằng, việc định dạng bảng là tất cả về việc cải thiện khả năng đọc và trải nghiệm người dùng. Điều đó không chỉ là việc làm cho mọi thứ trở nên đẹp hơn (dù điều đó cũng rất vui vẻ!).

Trong hành trình phát triển web của bạn, tiếp tục thử nghiệm với các phong cách khác nhau. Hãy thử thêm hiệu ứng hover vào các hàng, hoặc chơi với các schema màu khác nhau. Các possibilities là vô tận!

Giống như một bữa ăn ngon không thể hoàn chỉnh mà không có cách trình bày đúng, một tài liệu HTML được cấu trúc tốt không thể hoàn chỉnh mà không có bảng được định dạng đúng. Vậy hãy tiếp tục và định dạng những bảng của bạn! Và nhớ rằng, trong thế giới phát triển web, thực hành làm cho hoàn hảo. Chúc các bạn may mắn với việc mã hóa!

Credits: Image by storyset