Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Bảng trong HTML

Bảng trong HTML


Ngày 27 Tháng 12 Năm 2019

HTML Bài 6

Xin chào các bạn quay lại blog của mình. Trong bài này mình sẽ giới thiệu các bạn về cấu trúc và cách tạo bảng bằng thẻ HTML cho trang web của mình. Bây giờ hãy cùng nhau tìm hiểu nhé!

1) Bảng trong HTML:

Đầu tiên mình xin nói sơ qua một tí về bảng. Bảng được tạo thành bằng cách sắp xếp dữ liệu theo hàng và cột giúp chúng ta tra cứu giá trị một cách nhanh chóng hoặc so sánh giá trị của nhiều dạng dữ liệu khác nhau... Để làm rõ hơn các bạn hãy xem ví dụ minh họa của mình về bảng :

Như các bạn thấy thì mình có thể dễ dàng tìm ra những người trong lớp thích môn thể thao nào một cách nhanh chóng thông qua bảng số liệu này. Các bạn cũng cần lưu ý là tên của bảng phải khái quát được chức năng và dữ liệu của bảng mang lại cho người dùng. Vậy cách tạo bảng trong HTML như thế nào?
Bảng được tạo bởi thẻ <table> trong HTML với dữ liệu dòng được tạo bởi thẻ <tr>, dữ liệu trong ô được tạo bởi thẻ <td> và ô tiêu đề được tạo bởi thẻ <th>. Ở đây mình lưu ý đến những từ viết tắt tiếng anh trong tên thẻ của bảng giúp các bạn dễ nhớ hơn:

  • Thẻ <tr>: Đây là từ viết tắt của table row có nghĩa là dòng trong bảng
  • Thẻ <td>: Đây là từ viết tắt của table data có nghĩa là dữ liệu trong bảng
  • Thẻ <th>: Đây là từ viết tắt của table headers có nghĩa là tiêu đề trong bảng

Các bạn xem ví dụ minh họa của mình về cấu trúc của bảng nhé:

Như các bạn thấy thì bên trong thẻ <table> thì sẽ chứa thẻ con là <tr> là để hiện thị số hàng có trong bảng và <td> hiển thị số ô có trong một dòng. Để cho do hiểu thì chúng mình hãy cùng nhau đi vào chi tiết cấu trúc một bảng nhé:

Mã Code HTML
<table>
<tr>
<th>Tên học sinh</th>
<th>Môn thể thao</th>
</tr>
<tr>
<td>Nguyễn Văn A</td>
<td>Đá banh</td>
</tr>
<tr>
<td>Nguyễn Văn B</td>
<td>Cầu lông</td>
</tr>
<tr>
<td>Nguyễn Văn C</td>
<td>Bóng chuyền</td>
</tr>
</table>
Hiện thị trên Web
Tên học sinhMôn thể thao
Nguyễn Văn AĐá banh
Nguyễn Văn BCầu lông
Nguyễn Văn CBóng chuyền

Các bạn có thể thấy một bảng trong HTML khá là đơn giản và rất khó nhìn vì vậy bây giờ chúng ta sẽ đi vào các thuộc tính trong bảng giúp cho nó sinh động và hữu ích hơn.

Thuộc tính style trong bảng:

Giá trị thuộc tính border trong thuộc tính style giúp chúng ta có thể tạo đường viền xung quanh bảng giúp cho nó dễ nhìn hơn. Chúng ta đã học thuộc tính style trong bài đoạn văn với cấu trúc như sau:

<p style="color:red">Nội dung</p>

Thì các bạn thấy là thuộc tính này được đặt trực tiếp vào thẻ HTML. Nhiều khi có quá nhiều giá trị thuộc tính CSS trong thuộc tính style sẽ làm cho chúng ta sau này nhìn vào code dễ bị rối và khó khăn trong việc sữa lỗi. Vậy nên chúng ta có một cách nữa là đặt thẻ này nằm ở trong thẻ <head>. Cũng với ví dụ thẻ <p> nhưng mình sẽ đặt thuộc tính style nằm trong thẻ <head>:

<!DOCTYPE html>
<html>
<head>
<style>
p {color:red;}
</style>
</head>
<body>
<p>Nội Dung</p>
</body>
</html>

Ta có thể thấy là ở trong thẻ <head> thì thuộc tính style đã được chuyển sang thẻ <style>. Trong thẻ này thì ta sẽ có cú pháp như sau:

Tên Thẻ{ giá trị thuộc tính CSS }

Sau này các bạn học sâu hơn thì ta ngoài lựa chọn phần tử theo tên thẻ thì mình cũng có thể chọn theo Class hay Id. Mình sẽ có một bài nói riêng về vấn đề này nhé.
Lưu ý là khi ta dùng phương pháp chọn tên thẻ này thì nó sẽ chọn tất cả các thẻ <p> có trong file HTML hiện tại và như ví dụ trên là tất cả thẻ này đều có chữ màu đỏ nhé!

Bây giờ thì chúng ta thử tạo đường viền cho bảng bằng đoạn code sau nhé:

Mã Code HTML
<!DOCTYPE html>
<html>
<title>HTML bài 6</title>
<head>
<style>
td, th {
border: 1px solid black;
padding: 16px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Tên học sinh</th>
<th>Môn thể thao</th>
</tr>
<tr>
<td>Nguyễn Văn A</td>
<td>Đá banh</td>
</tr>
<tr>
<td>Nguyễn Văn B</td>
<td>Cầu lông</td>
</tr>
<tr>
<td>Nguyễn Văn C</td>
<td>Bóng chuyền</td>
</tr>
</table>
</body>
</html>
Hiện thị trên Web
Tên học sinhMôn thể thao
Nguyễn Văn AĐá banh
Nguyễn Văn BCầu lông
Nguyễn Văn CBóng chuyền

Như các bạn thấy thì mình đã có đường viền cho bảng. Còn các giá trị thuộc tính CSS trong thẻ style này thì mình sẽ nói rõ hơn trong khi học CSS nhé. Sẽ có vài bạn học qua thì sẽ nói tại sao mình phải làm rắc rối như vậy vì thẻ <table> cũng có thuộc tính border cho phép tạo ra đường viền như ví dụ sau đây:

Mã Code HTML
<table border="2">
<tr>
<th>Tên học sinh</th>
<th>Môn thể thao</th>
</tr>
<tr>
<td>Nguyễn Văn A</td>
<td>Đá banh</td>
</tr>
<tr>
<td>Nguyễn Văn B</td>
<td>Cầu lông</td>
</tr>
<tr>
<td>Nguyễn Văn C</td>
<td>Bóng chuyền</td>
</tr>
</table>
Hiện thị trên Web
Tên học sinhMôn thể thao
Nguyễn Văn AĐá banh
Nguyễn Văn BCầu lông
Nguyễn Văn CBóng chuyền

Các thuộc tính như vậy trong bảng HTML thì không khuyến khích sử dụng vì bây giờ thì nó không được hỗ trợ trong HTML5. Nên chúng ta phải dùng giá trị thuộc tính CSS để xét đường viền cho bảng. Cũng có các thuộc tính khác mà cũng không được sử dụng trong bảng nữa là align, bgcolor, cellpadding, cellspacing, width... Các thuộc tính này nếu các bạn muốn tìm hiểu để đọc và hiểu các thuộc tính bảng trong HTML cũ thì có thế truy cập vào đây xem nhé Thuộc tính cũ trong table.

Cách gộp cột trong bảng HTML:
Trong bảng có thuộc tính cho phép chúng ta gộp cột có tên là colspan được sử dụng trong hai thẻ là <th> và <td>. Như tên gọi thì chức năng của nó giúp chúng ta gộp hai hay nhiều ô theo chiều từ trái sang phải lại với nhau. Bây giờ thì chúng ta hãy cùng nhau đi tìm hiểu thông qua ví dụ sau đây nhé:
Mã Code HTML
<table>
<tr>
<th style="border:1px solid black; padding:16px;"></th>
<th style="border:1px solid black; padding:16px;">7h đến 8h</th>
<th style="border:1px solid black; padding:16px;">8h đến 9h</th>
<th style="border:1px solid black; padding:16px;">9h đến 10h</th>
</tr>
<tr>
<td style="border:1px solid black; padding:16px;">Thứ hai</td>
<td style="border:1px solid black; padding:16px;">Toán</td>
<td style="border:1px solid black; padding:16px;">Văn</td>
<td style="border:1px solid black; padding:16px;">Anh</td>
</tr>
<tr>
<td style="border:1px solid black; padding:16px;">Thứ ba</td>
<td colspan="2" style="border:1px solid black; padding:16px;">Thể Dục</td>
<td style="border:1px solid black; padding:16px;">Lịch Sử</td>
</tr>
</table>
Hiện thị trên Web
7h đến 8h8h đến 9h9h đến 10h
Thứ haiToánVănAnh
Thứ baThể DụcLịch Sử

Ở đây thì các bạn thấy ở ô thể dục thì mình đã gộp hai cột với nhau bằng thuộc tính là colspan="2". Bằng cách thay đổi giá trị thuộc tính này thì có thể gộp được hai hay nhiều cột như colspan="3",colspan="4"... Nhưng các bạn phải để ý là giá trị thuộc tính gộp cột lúc nào cũng nhỏ hơn so với số cột có trong bảng nhé. Một lưu ý nhỏ nữa là mình ghi trực tiếp thuộc tính style vào các thẻ th, td để các bạn dễ nhìn và đỡ mất công phải ghi thêm một file HTML để cài đặt thẻ <style> trong <head>.

Cách gộp dòng trong bảng HTML:

Thì cũng như gộp cột thì trong bảng HTML cho phép chúng ta có thể gộp nhiều dòng lại với nhau bằng thuộc tính rowspan được sử dụng trong hai thẻ <th> và <td>rowspan>. Nó giúp chúng ta gộp hai hay nhiều ô lại với nhau theo chiều từ trên xuống dưới. Bây giờ thì chúng ta hãy cùng nhau đi tìm hiểu thông qua ví dụ sau đây nhé:

Mã Code HTML
<table>
<tr>
<th style="border:1px solid black; padding:16px;"></th>
<th style="border:1px solid black; padding:16px;">Đài VTV2</th>
<th style="border:1px solid black; padding:16px;">Đài VTV3</th>
</tr>
<tr>
<td style="border:1px solid black; padding:16px;">7h đến 8h</td>
<td style="border:1px solid black; padding:16px;" rowspan="2" >Phim tài liệu</td>
<td style="border:1px solid black; padding:16px;">Ca nhạc</td>
</tr>
<tr>
<td style="border:1px solid black; padding:16px;">8h đến 9h</td>
<td style="border:1px solid black; padding:16px;">Phim truyền hình</td>
</tr>
</table>
Hiện thị trên Web
Đài VTV2Đài VTV3
7h đến 8hPhim tài liệuCa nhạc
8h đến 9hPhim truyền hình

Mình đã gắn thuộc tính rowspan="2" vào ô Phim tài liệu các bạn cũng có thể thay đổi số ô được gộp như trong tính chất của gộp cột vậy.

Chú thích trong bảng HTML:

Khi nhìn vào một bảng thì người dùng cũng khó có thể hiểu được dữ liệu của nó thể hiện mục đích gì ? Vì thế HTML cung cấp cho chúng ta một tiêu đề chú thích cho bảng với thẻ là <caption>. Cái này thì mình cũng có thể dùng các thẻ tiêu đề để chú thích bảng nhưng để SEO tốt hơn thì mình khuyên các bạn nên dùng thẻ này. Thẻ chú thích luôn được đặt nằm đầu tiên trong các thẻ của bảng HTML. Bây giờ mình hãy tìm hiểu thông qua ví dụ nhé:

See the Pen HTML caption bảng by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thành Phần đầy đủ trong bảng HTML:

Nãy giờ chúng ta đã tìm hiểu được cách xây dựng bảng trong HTML nhưng đối với người lập trình thì ngoài việc tạo ra và hiển thị bảng trên trình duyệt thì họ cũng quan tâm đến khuôn mẫu cách hiện thị code làm sao cho người lập trình khác khi nhìn vào code của chúng ta thì có thể hiểu được và dễ sửa chữa. Thì cũng giống như cấu trúc file HTML thì bảng cũng cung cấp cho chúng ta một cấu trúc để xây dựng bảng làm cho việc quản lý code dễ dàng hơn, còn về khả năng hiển thị theo mình thấy nó cũng giống như những bảng mình đã tạo ở trên. Để rõ hơn thì mình đi vào tìm hiểu ví dụ sau đây nhé các bạn:

Mã Code HTML
<table>
<thead>
<tr>
<th style="border:1px solid black; padding:16px;">Tên Trái Cây</th>
<th style="border:1px solid black; padding:16px;">Số Tiền</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border:1px solid black; padding:16px;">Táo</td>
<td style="border:1px solid black; padding:16px;">15.000</td>
</tr>
<tr>
<td style="border:1px solid black; padding:16px;">Ổi</td>
<td style="border:1px solid black; padding:16px;">10.000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td style="border:1px solid black; padding:16px;">Tổng</td>
<td style="border:1px solid black; padding:16px;">25.000</td>
</tr>
</tfoot>
</table>
Hiện thị trên Web
Tên Trái CâySố Tiền
Táo15.000
Ổi10.000
Tổng25.000

Như các bạn thấy thì mình đã tạo ra một bảng với cấu trúc file là :

  • Header (Tiêu đề) của bảng tương ứng với thẻ <thead>

  • Body (Nội Dung) của bảng tương ứng với thẻ <tbody>

  • Footer (Tổng kết các cột) của bảng tương ứng với thẻ <tfoot>

Bài tập HTML:

Sau đây mình sẽ có bài tập nhỏ giúp các bạn nhớ những gì mà mình đã học trong ngày hôm nay.

  1. Các bạn tạo một cấu trúc file HTML với tên là HTML6baitap.html
  2. Sau đó các bạn nhập bảng bảng có nội dung như sau đây nha:

    Tiền Tiết Kiệm Tháng

    Tiền Tiết Kiệm
    Tháng 11.000.000
    Tháng 22.000.000
    Tháng 33.000.000
    Tổng5.000.000

Đây là file lời giải của bài tập các bạn tham khảo. Nhưng trước khi xem hãy cố gắng hoàn thành bài tập để mình nhớ lâu hơn nhé!

<table>
<caption>Tiền Tiết Kiệm Tháng</caption>
<thead>
<tr>
<th style="border:1px solid black; padding:16px;" colspan="2">Tiền Tiết Kiệm</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border:1px solid black; padding:16px;">Tháng 1</td>
<td style="border:1px solid black; padding:16px;">1.000.000</td>
</tr>
<tr>
<td style="border:1px solid black; padding:16px;">Tháng 2</td>
<td style="border:1px solid black; padding:16px;">2.000.000</td>
</tr>
<tr>
<td style="border:1px solid black; padding:16px;">Tháng 3</td>
<td style="border:1px solid black; padding:16px;">3.000.000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td style="border:1px solid black; padding:16px;">Tổng</td>
<td style="border:1px solid black; padding:16px;">5.000.000</td>
</tr>
</tfoot>
</table>

Còn điều này mình quên nói là khi các bạn làm xong và lưu vào HTML6baitap.html. Thì để mở mình vào thư mục đã lưu file và nhấn trực tiếp vào thì trình duyệt sẽ tự động chạy file đó nhé.

Tổng kết:

Qua bài này chúng mình đã hiểu và nắm được cách tạo một bảng trong HTML. Sau này học về CSS thì mình sẽ nói tiếp về cách chỉnh sửa trang trí cho bảng kĩ hơn. Phần này các bạn lưu ý giúp mình các thẻ có trong bảng và cấu trúc bảng nhé. Bài sau mình sẽ học về bảng mẫu hay đơn mà giúp chúng ta thu thập thông tin người dùng, khảo sát người dùng... Nếu các bạn có gì thì cứ liên hệ mình sẽ liên lạc với các bạn sớm nhất có thể!

Load WooCommerce Stores in 249ms!