HTML - Tables: Cổng vào Nội dung Web có 结构

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới kỳ diệu của các bảng HTML. Là người thầy máy tính gần gũi của bạn, tôi rất vui mừng được hướng dẫn các bạn trong hành trình này. Tin tôi đi, đến cuối bài hướng dẫn này, bạn sẽ tạo được các bảng như một chuyên gia!

HTML - Tables

Tại sao lại sử dụng Tables trong HTML?

Hãy tưởng tượng bạn đang cố gắng tổ chức sách yêu thích của mình, tên tác giả và năm xuất bản. Bạn có thể viết tất cả ra trong một đoạn văn, nhưng điều đó sẽ rất lộn xộn và khó đọc. Đây là lúc các bảng HTML đến để cứu nguy!

Các bảng HTML cho phép chúng ta trình bày dữ liệu theo một định dạng có cấu trúc, dạng lưới. Chúng hoàn hảo cho:

Hiển thị dữ liệu tabular (như bảng tính)
Tạo các bố cục gọn gàng cho nội dung
Tổ chức thông tin theo cách dễ đọc

Làm thế nào để tạo một bảng trong HTML?

Hãy bắt đầu từ những điều cơ bản. Tạo một bảng trong HTML giống như xây dựng bằng các khối LEGO. Bạn bắt đầu từ nền tảng và tiếp tục thêm các mảnh cho đến khi bạn có kiệt tác của mình.

Dưới đây là một ví dụ đơn giản:

<table>
<tr>
<th>Tiêu đề Sách</th>
<th>Tác giả</th>
<th>Năm Xuất bản</th>
</tr>
<tr>
<td>To Kill a Mockingbird</td>
<td>Harper Lee</td>
<td>1960</td>
</tr>
<tr>
<td>1984</td>
<td>George Orwell</td>
<td>1949</td>
</tr>
</table>

Hãy phân tích này:

<table>: Thẻ này告诉浏览器, "Hey, tôi đang bắt đầu một bảng ở đây!"
<tr>: Đây có nghĩa là "table row". Nó giống như bắt đầu một dòng mới trong bảng của bạn.
<th>: Đây là "table header". Nó được sử dụng cho tiêu đề của các cột của bạn.
<td>: Điều này có nghĩa là "table data". Đây là nơi bạn đặt thông tin thực tế trong bảng của bạn.

Tất cả về các bảng HTML

Bây giờ chúng ta đã có cơ bản, hãy khám phá một số tính năng thú vị khác của các bảng HTML!

Định nghĩa một bảng HTML

Khi định nghĩa một bảng, hãy tưởng tượng nó như đang vẽ một bản đồ. Bạn cần phải xác định rõ ràng cấu trúc của nó. Dưới đây là một ví dụ với một số thuộc tính bổ sung:

<table border="1" cellpadding="5" cellspacing="0">
<caption>Sách Yêu Thích Của Tôi</caption>
<thead>
<tr>
<th>Tiêu đề</th>
<th>Tác giả</th>
<th>Thể loại</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Great Gatsby</td>
<td>F. Scott Fitzgerald</td>
<td>Classic</td>
</tr>
<tr>
<td>The Hunger Games</td>
<td>Suzanne Collins</td>
<td>Young Adult</td>
</tr>
</tbody>
</table>

Trong ví dụ này:

border="1" thêm một viền xung quanh các ô của bảng.
cellpadding="5" thêm một khoảng trống bên trong mỗi ô.
cellspacing="0" loại bỏ khoảng trống giữa các ô.
<caption> thêm một tiêu đề cho bảng của bạn.
<thead> nhóm nội dung tiêu đề.
<tbody> nhóm nội dung chính của bảng.

Định dạng các bảng HTML

Nhớ khi chúng ta trang trí sổ tay trường học của mình? Định dạng các bảng HTML cũng tương tự! Hãy thêm một chút màu sắc:

<table style="border-collapse: collapse; width: 100%;">
<tr style="background-color: #f2f2f2;">
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Tên</th>
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Tuổi</th>
</tr>
<tr>
<td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">John Doe</td>
<td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">25</td>
</tr>
</table>

Ở đây, chúng ta đang sử dụng CSS nội tuyến để định dạng bảng của mình. Đó giống như cho mỗi phần của bảng một bộ trang phục riêng!

Màu nền và Hình ảnh nền cho Bảng

Muốn làm bảng của bạn nổi bật? Hãy thêm một chút nền và hình ảnh nền:

<table style="background-color: #e6f7ff; background-image: url('paper.gif');">
<tr>
<th>Cột 1</th>
<th>Cột 2</th>
</tr>
<tr>
<td>Dữ liệu 1</td>
<td>Dữ liệu 2</td>
</tr>
</table>

Bảng này sẽ có nền màu xanh nhạt với một hình ảnh nền là giấy. Đó giống như tổ chức một buổi tiệc chủ đề cho bảng của bạn!

Chiều rộng và Chiều cao của Bảng

Giống như cách chúng ta điều chỉnh không gian bàn làm việc của mình, chúng ta có thể thiết lập kích thước của bảng:

<table style="width: 100%; height: 200px;">
<tr>
<td style="width: 30%;"> Ô này chiếm 30% chiều rộng của bảng</td>
<td> Ô này điều chỉnh để.fill vào phần còn lại</td>
</tr>
</table>

Bảng này sẽ kéo dài toàn bộ chiều rộng của container và cao 200 pixel. Ô đầu tiên luôn chiếm 30% chiều rộng tổng thể.

Bảng nhúng trong Bảng

Đôi khi, bạn cần một bảng trong một ô của bảng khác. Đó giống như những con dolls Nga嵌套, nhưng với dữ liệu!

<table border="1">
<tr>
<td>
Ô chính
<table border="1">
<tr>
<td>Ô bảng nhúng 1</td>
<td>Ô bảng nhúng 2</td>
</tr>
</table>
</td>
<td>Ô chính khác</td>
</tr>
</table>

Điều này tạo ra một bảng bên trong ô của một bảng khác. Nó hoàn hảo cho các cấu trúc dữ liệu phức tạp!

Các thẻ liên quan đến bảng HTML

Hãy tóm tắt tất cả các thẻ liên quan đến bảng mà chúng ta đã học trong một bảng gọn gàng:

Thẻ	Mô tả
`<table>`	Định nghĩa một bảng
`<tr>`	Định nghĩa một dòng bảng
`<th>`	Định nghĩa một tiêu đề bảng
`<td>`	Định nghĩa một ô bảng
`<caption>`	Định nghĩa tiêu đề của bảng
`<thead>`	Nhóm nội dung tiêu đề trong bảng
`<tbody>`	Nhóm nội dung chính trong bảng
`<tfoot>`	Nhóm nội dung chân trang trong bảng
`<colgroup>`	Xác định một nhóm một hoặc nhiều cột trong bảng để định dạng
`<col>`	Xác định thuộc tính cột cho mỗi cột trong `<colgroup>`

Video - HTML Tables

Mặc dù tôi không thể chèn video trực tiếp ở đây, tôi rất khuyến khích bạn tìm kiếm "HTML Tables Tutorial" trên YouTube. Thấy các bảng được xây dựng trực tiếp có thể rất hữu ích!

Và thế là bạn đã hoàn thành bài học crash course về các bảng HTML. Nhớ rằng, thực hành là cách tốt nhất để trở nên hoàn hảo. Hãy thử tạo các bảng cho các loại dữ liệu khác nhau - có thể là lịch trình lớp học của bạn, danh sách phim yêu thích, hoặc thậm chí là một gia phả. Các khả năng là vô tận!

Chúc các bạn vui vẻ lập trình, và mong rằng bảng của bạn luôn được căn chỉnh hoàn hảo!

Credits: Image by storyset

Hướng Dẫn Trước:

HTML - Nền

Hướng Dẫn Tiếp Theo:

HTML - Đầu trang và Caption