NỘI DUNG BÀI VIẾT
Table (hay còn gọi là bảng) thường được sử dụng trong HTML để sắp xếp và hiển thị dữ liệu. Chúng giúp chuyển thông tin đến người dùng của trang web một cách dễ dàng hơn.
Trong bài viết hôm nay, mình sẽ trình bày những kiến thức cơ bản về bảng trong HTML, bao gồm cách tạo bảng trong HTML, cách sử dụng các thẻ bắt buộc và kiểu CSS của bảng trong HTML.
Khái niệm cơ bản về bảng trong HTML
Bảng là một tập hợp dữ liệu có cấu trúc được sắp xếp theo hàng và cột. Bảng được sử dụng rộng rãi để trình bày dữ liệu và phân tích dữ liệu, và chúng được sử dụng thường xuyên trong sách, tạp chí khoa học và trang web.
HTML, viết tắt của HyperText Markup Language, là một ngôn ngữ đánh dấu siêu văn bản được sử dụng để hướng dẫn các trình duyệt web cách chúng hiển thị các trang web. Phiên bản mới nhất của HTML (HTML5) đi kèm với sự hỗ trợ mạnh mẽ để hiển thị dữ liệu bằng cách sử dụng các bảng phức tạp hoặc đơn giản.
Khi chúng ta xác định một phần tử bảng, chúng ta sẽ sử dụng các thẻ sau:
- <table>: định nghĩa một bảng trong HTML
- <tr>: định nghĩa từng hàng trong bảng
- <th>: định nghĩa từng hàng trong bảng
- <th>: định nghĩa từng tiêu đề trong bảng
- <td>: định nghĩa từng dữ liệu bảng hoặc ô trong bảng
Lưu ý: tất cả các phần tử <th> được in đậm và căn giữa và các phần tử văn bản <td> được căn trái theo mặc định.
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Mark</td>
<td>Ruffallo</td>
<td>54</td>
</tr>
<tr>
<td>Reese</td>
<td>Witherspoon</td>
<td>48</td>
</tr>
</table>Code language: HTML, XML (xml)| Firstname | Lastname | Age |
|---|---|---|
| Mark | Ruffallo | 54 |
| Reese | Witherspoon | 48 |
Có nhiều phần tử HTML khác có thể được sử dụng để tùy chỉnh hình thức và cấu trúc của bảng. Chúng bao gồm <thead>, <tbody>, <tfoot>, mà chúng ta sẽ thảo luận sau.
Điều quan trọng cần lưu ý là các bảng phải có chức năng. Điều đó có nghĩa là dữ liệu hoặc thông tin được hiển thị trong bảng của bạn phải dễ đọc và dễ hiểu. Nếu bạn không có ý tưởng về cách định dạng bảng của mình, bạn có thể vẽ phác thảo trên giấy. Điều này sẽ giúp bạn hình dung và sắp xếp bảng trước khi viết mã.
Chú thích bảng và tiêu đề
Hầu hết các bảng cần một số loại văn bản mô tả mục đích của bảng. Chúng ta có thể sử dụng <caption> để giải quyết vấn đề này. Điều này sẽ giúp người dùng dễ sử dụng hơn rất nhiều.
<caption>Neonates Immunization Table</caption>
Code language: HTML, XML (xml)Phần tử <thead> xác định một tập hợp các hàng đại diện cho đầu các cột của bảng.
Thẻ <th> đánh dấu một ô làm tiêu đề bảng và nó thường ở đầu hàng hoặc cột. Thẻ <th> luôn được sử dụng trong thẻ <tr> và chúng có một số kiểu mặc định để giúp chúng nổi bật.
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Sex</th>
<th scope="col">Weight(kg)</th>
<th scope="col">Immunization Doses</th>
</tr>
</thead>Code language: HTML, XML (xml)Tóm tắt bảng
Phần tử <tfoot> là phần tử tùy chọn xác định một tập hợp các hàng tóm tắt các cột của bảng. Nó thường nằm sau thẻ <tbody>.
<tfoot>
<th>Mean Weight (kg)</th>
<td>2.9</td>
</tfoot>Code language: HTML, XML (xml)Thêm đường viền vào một ô trong bảng
Trước đây, các đường viền có thể được thêm vào bảng trong HTML của bạn bằng cách sử dụng thuộc tính border, lấy một số tự động tính bằng pixel.
<table border='1'>
<tr>
<th >Jerry Holmes</th>
<td>M</td>
<td>5</td>
<td>0</td>
<td>3.5</td>
</tr>
</table>Code language: HTML, XML (xml)| Jerry Holmes | M | 5 | 0 | 3.5 |
|---|
Hành vi này không được chấp nhận trong HTML5 vì thuộc tính CSS border. Với thay đổi này, bây giờ người ta có thể thêm đường viền trên bảng hoặc cho các phần tử riêng lẻ. Nếu bạn không muốn các ô của mình có các đường viền riêng biệt, bạn nên đặt thuộc tính border-collapse: collapse. Nếu không, các ô liền kề sẽ có các đường viền riêng biệt.
table {
border-collapse: collapse;
}
td, th {
border: 1px solid rgba(0, 0, 0, 0.5);
}Code language: CSS (css)| Jerry Holmes | M | 5 | 0 | 3.5 |
|---|
Trong phần tiếp theo, mình sẽ chỉ cho bạn cách tạo bảng với bố cục phức tạp, trong đó các ô của bảng có thể kéo dài nhiều hàng hoặc một số cột.
Kéo dài nhiều hàng và cột
Trong bảng chúng ta đang xây dựng, hãy lưu ý rằng ô “Mean Weight” kéo dài nhiều hơn một ô và “Immunization Doses” có vẻ giống như một “Super Heading” với các tiêu đề phụ (được lấy và sang trái).
Hành vi này có thể thực hiện được với các thuộc tính colspan và rowspan. Cả hai thuộc tính đều chấp nhận một giá trị số, là số hàng hoặc cột bạn muốn kéo dài.
<thead>
<tr>
<th rowspan="2">Name</th>
<th rowspan="2">Sex</th>
<th colspan="2">Immunization Doses</th>
<th rowspan="2">Weight(kg)</th>
<tr>
<th>Taken</th>
<th>Left</th>
</tr>
</tr>
</thead>Code language: HTML, XML (xml)Thuộc tính rowspan cho phép nội dung của một ô trong bảng trải dài nhiều hàng. Trong đoạn mã ở trên, chúng ta đã tạo các ô tiêu đề ‘Name’, ‘Sex’ và ‘Weight’ kéo dài hai hàng.
colspan tạo cho một ô bảng duy nhất có chiều rộng của nhiều hơn một cột hoặc các ô dữ liệu. Sử dụng thuộc tính colspan, chúng ta tạo tiêu đề ‘Immunization Doses’ kéo dài hai cột (và một hàng duy nhất). Sau đó, bằng cách thêm các tiêu đề phụ vào hàng tiếp theo, chúng sẽ tự động được thêm vào trong “Immunization Doses”.
Tạo kiểu bảng với CSS
Một số thuộc tính tạo kiểu bảng không còn được hỗ trợ trong HTML5; các thuộc tính CSS tương ứng đã thay thế chúng. Một số thuộc tính này bao gồm:
align: sử dụng CSSmargin-left,margin-righthoặcmargin: autobgcolor: tương tự thuộc tính CSSbackground-colorborder: tương tự thuộc tính CSS borderwidth: tương tự thuộc tính CSS width
Cellspacing và cellpadding có thể đạt được bằng cách sử dụng border-spacing và padding tương ứng. border-spacing không có bất kỳ ảnh hưởng nào nếu border-collapse: collapse.
Màu sắc và các thuộc tính khác của văn bản trong ô có thể được sửa đổi bằng cách chỉ định giá trị của thuộc tính có liên quan, chẳng hạn như color, font-size và font-family.
Dưới đây là code của phần bảng trong HTML ngày hôm nay:
Kết luận
Trên đây là những gì chúng ta cần biết để bắt đầu triển khai các bảng trong HTML. Bạn có thể lấy những gì bạn đã học ở đây và kiến thức HTML và CSS hiện có của bạn, để bắt đầu thiết kế và triển khai các bảng chức năng và đẹp mắt.
Cảm ơn bạn đã theo dõi bài viết!
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG
