Học HTML cơ bản -Bài 10

Bài 10: Bảng – Table

Table (Bảng) được sử dụng khi bạn cần trình bày bảng dữ liệu, loại thông tin được sắp xếp theo các cột dọc và hàng ngang.

Tạo bảng có khó không?

Tạo các bảng trong HTML thoạt đầu trong có vẻ phức tạp nhưng nếu bạn tiếp tục bình tĩnh và xem từng bước tiếp theo, nó thật sự rất logic cũng giống như mọi thứ khác trong HTML.

Ví dụ 1:

<table>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>

Đây là kết quả xem trên trình duyệt:

Cell 1	Cell 2
Cell 3	Cell 4

Sự khác nhau giữa <tr> và<td>?

Như bạn đã xem ở trên, đây có lẽ là ví dụ phức tạp nhất trong các bài học về HTML vừa qua, chúng ta hãy cùng xem xét từng thẻ khác nhau trong ví dụ trên.

Có 3 phần tử trong cấu trúc bảng:

• Thẻ mở <table> và thẻ đóng </table> bắt đầu và kết thúc tạo bảng, rất logic.
• <tr> là viết tắt của “table row” là bắt đầu và kết thúc tạo ra 1 hàng ngang. rất logic.
• <td> là viết tắt của “table data”. Thẻ này bắt đầu và kết thúc để ra một ô (cell) trong hàng. Tất cả đều đơn giản và hợp lý.

Đây là cách giải thích ở ví dụ 1: Một bảng sẽ bắt đầu bằng thẻ mở <table>, sau đó là thẻ mở <tr>, để xác định một hàng được thêm vào. Có 2 ô trong hàng này, vì vậy ta có: <td>Cell 1</td> and <td>Cell 2</td>. Tiếp theo là thẻ đóng hàng thứ nhất </tr> và một hàng mới được thêm vào bằng thẻ mở <tr> và tiếp theo sẽ tương tự như hàng thứ nhất, hàng thứ hai cũng có 2 ô. Sau cùng bảng sẽ được đóng bằng thẻ </table>.

Bạn phải phân biệt rõ ở đây: hàng (rows) là các đường ngang của các ô (cellls) và cột là đường dọc của các ô.

Cell 1	Cell 2
Cell 3	Cell 4

Cell 1 và Cell 2được xem là hàng. Cell 1 và Cell 3 được xem là cột.

Ở ví dụ trên, ta có hai hàng và hai cột, trên thực tế bạn có thể tạo ra các bảng có không giới hạn số cột và số hàng.

Ví dụ 2:

<table>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 9</td>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
</tr>
</tbody>
</table>

Kết quả xem trên trình duyệt:

Cell 1	Cell 2	Cell 3	Cell 4
Cell 5	Cell 6	Cell 7	Cell 8
Cell 9	Cell 10	Cell 11	Cell 12

Có thuộc tính nào cho bảng không?

Dĩ nhiên có một số thuộc tính dành cho bảng, ví dụ như border – dùng để tạo độ dày các đường biên xung quanh bảng.

Example 3:

<table border="1">
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>

Kết quả trên trình duyệt:

Cell 1	Cell 2
Cell 3	Cell 4

Độ dày của đường biên được xác định bởi thuộc tính border

Cũng như các hình ảnh, bạn cũng có thể xác định chiều ngang của table bằn pixels hoặc phần trăm

Ví dụ 4:

<table border="1" width="30%"></table>

Như ví dụ trên table sẽ có chiều ngang bằng 30% chiều ngang mà hình.

Them các thuộc tính khác?

Có rất nhiều thuộc tính khác, đây là hai thuộc tính kể thêm:

• align: dùng để xác định lề so hàng theo chiều ngang của nội dung bên trong ô. Ví dụ như trái – left, giữa – center hay phải – right.
• valign: dùng để xác định lề so hàng theo chiều đứng của nội dung bên trong ô. Ví dụ như, trên – top, giữa  -middle hay đáy – bottom.

Ví dụ 5:

<td align="right" valign="top">Cell 1</td>

Có thể chèn những gì vào table?

Theo lý thuyết, bạn có thể chèn bất cứ thứ gì vào trong bảng như chữ, liên kết và hình ảnh … nhưng vì table có công dụng để trình bày bảng dữ liệu (dữ liệu trình bày theo hàng và cột), vì vậy hãy đặt tất cả mọi thứ vào trong bảng khi bạn muốn sắp xếp chúng theo thứ tự ngang và dọc.

Trong quá khứ vài năm trước đây, table đã được dùng như là một công cụ để dàn trang  Web. Nhưng nếu bạn thật sự muốn trang web mình có một layout chính xác, và chi tiết như ý muốn, bạn nên áp dụng dàn trang bằng cách kết hợp CSS. Bạn có thể xem các hướng dẫn ở các bài học CSS sau này. Còn bây giờ, hãy thực tập thậtt nhiều với những gì đã học.

Bài tiếp theo

Ý kiến của bạn

--------------------------------------------------------------------------------------------------------------------------

• Bài 1: Nhập môn
  Tìm hiểu những công cụ cần thiết khi làm web.
• Bài 2: HTML là gì?
  Tìm hiểu về HTML
• Bài 3: Phần tử và thẻ – Elements and tags?
  Phần tử và thẻ – làm thế nào để sử dụng chúng
• Bài 4: Tạo trang web
  Bài học cách tạo ra trang HTML đầu tiên – trang mẫu để tạo ra các trang khác sau này
• Bài 5: Bạn đã được học những gì?
  Ôn tập những gì đã học và xem trước các bài kế tiếp
• Bài 6: Thêm một vài phần tử
  Làm quen với 6 phần tử HTML thường được sử dụng
• Bài 7: Thuộc tính
  Học cách thêm những thông tin vào thẻ và x6y dựng câu lệnh chính xác hơn
• Bài 8: Liên kết
  Khám phá các liên kết các trang web của bạn và các trang ở web khác trên internet.
• Bài 9: Hình ảnh
  Khám phá việc chèn ảnh vào trang web.
• Bài 10: Tạo bảng – Tables
  Cấu trúc bảng để dàn trang web.
• Bài 11: Tìm hiểu thêm về bảng – table
  Học nâng cao cấu trúc bảng – table
• Bài 12: Dàn trang (CSS)
  Tìm hiểu làm thế nào Cascading Style Sheets (CSS) có thể giúp dàn trang thú vị hơn.
• Bài 13: Đưa trang web lên internet
  Khám phá làm cách nào để đưa trang web lên internet để ai cũng có thể xem
• Bài 14: Những tiêu chuẩn cho Web và xác nhận
  Học các tiêu chuẩn HTML thông dụng và cách kiểm tra code có được viêt đúng không
• Bài 15: Những lời khuyên sau cùng
  Một vài lời khuyên bổ ích cho những dự án về web của bạn