Có một số loại thông tin cần được hiển thị trong một grid hoặc table. Ví dụ: kết quả thể thao, chứng khoán báo cáo, lịch trình tàu,… Khi biểu diễn thông tin trong một table, table cần nghĩ về mặt grid được tạo thành từ các hàng và cột (hơi giống table tính). Trong chương này, table sẽ học cách:
- Sử dụng bốn yếu tố chính để tạo table
- Biểu diễn dữ liệu phức tạp table table
- Thêm chú thích vào table
Table trong html là gì?
Thẻ “table” trong HTML được sử dụng để tạo ra một bảng. Nó định nghĩa một bảng và các hàng và cột của nó, và nó được sử dụng để tổ chức và trình bày dữ liệu theo cấu trúc. Thẻ table chứa một hoặc nhiều thẻ tr (table row) mỗi thẻ tr định nghĩa một hàng trong bảng. Mỗi thẻ tr chứa một hoặc nhiều thẻ td (table data) hoặc th (table heading) mà định nghĩa các ô trong bảng. Thẻ table còn có thể chứa caption, colgroup, thead, tfoot, tbody như các thẻ con.
<table>
<tr>
<th>Tiêu đề 1</th>
<th>Tiêu đề 2</th>
</tr>
<tr>
<td>Hàng 1, Ô 1</td>
<td>Hàng 1, Ô 2</td>
</tr>
<tr>
<td>Hàng 2, Ô 1</td>
<td>Hàng 2, Ô 2</td>
</tr>
</table>Một table biểu thị thông tin ở định dạng grid.
Ví dụ về các table bao gồm báo cáo tài chính, TV lịch thi đấu và kết quả thể thao grid cho phép chúng tôi hiểu dữ liệu phức tạp table cách tham chiếu thông tin trên hai trục.
Mỗi khối trong grid được tham chiếu thành một ô trong table. Trong HTML a table được viết ra từng hàng.
Cấu trúc của table element
- <table>
Phần tử <table> được sử dụng để tạo một table. Nội dung của table được viết ra hàng theo hàng.
- <tr>
tr table chỉ ra điểm bắt đầu của mỗi hàng sử dụng thẻ mở <tr>. (Tr là viết tắt của hàng trong table.)
Nó được theo sau bởi một hoặc nhiều phần tử <td> (một phần tử cho mỗi ô trong hàng đó).
Ở cuối hàng, table sử dụng dấu đóng thẻ </tr>.
- <td>
<td> Mỗi ô của một table là được biểu diễn table <td> yếu tố. (Td là viết tắt của table dữ liệu.)
Ở cuối mỗi ô, table sử dụng đóng thẻ </td>.
- <th>
Phần tử <th> chỉ được sử dụng giống như phần tử <td> nhưng mục đích là đại diện cho tiêu đề cho một cột hoặc một hàng. (Thứ là viết tắt của cái table phần mở đầu.)
Ngay cả khi một ô không có nội dung, table vẫn nên sử dụng <td> hoặc phần tử <th> để đại diện sự hiện diện của một ô trống nếu không thì cái table sẽ không kết xuất một cách chính xác. (Ô đầu tiên trong hàng đầu tiên của ví dụ này hiển thị một ô trống.)
Sử dụng các phần tử <th> cho tiêu đề giúp những body sử dụng trình đọc màn hình, cải thiện.
khả năng cho các công cụ tìm kiếm để lập chỉ mục các trang của table và cũng cho phép table kiểm soát sự xuất hiện của table tốt hơn khi table bắt đầu sử dụng CSS.
table có thể sử dụng thuộc tính phạm vi trên phần tử <th> để chỉ ra cho dù nó là một tiêu đề cho một cột hoặc một hàng. Nó có thể lấy giá trị: hàng để chỉ ra một tiêu đề cho một hàng hoặc cột để chỉ ra một đầu đề cho một cột.
- colspan
Đôi khi table có thể cần các mục trong một table để kéo dài trên nhiều cột.
Thuộc tính colspan có thể là được sử dụng trên phần tử <th> hoặc <td> và cho biết có bao nhiêu cột ô đó sẽ chạy ngang qua.
<table> <tr> <th></th> <th>9am</th> <th>10am</th> <th>11am</th> <th>12am</th> </tr> <tr> <th>Monday</th> <td colspan="2">Geography</td> <td>Math</td> <td>Art</td> </tr> <tr> <th>Tuesday</th> <td colspan="3">Gym</td> <td>Home Ec</td> </tr> </table>
- rowspan
Thuộc tính rowspan có thể là được sử dụng trên phần tử <th> hoặc <td> để cho biết một ô có bao nhiêu hàng nên kéo dài xuống table.
<table> <tr> <th></th> <th>ABC</th> <th>BBC</th> <th>CNN</th> </tr> <tr> <th>6pm - 7pm</th> <td rowspan="2">Movie</td> <td>Comedy</td> <td>News</td> </tr> <tr> <th>7pm - 8pm</th> <td>Sport</td> <td>Current Affairs</td> </tr> </table>
Trong ví dụ bên trên, table có thể thấy rằng ABC đang hiển thị một phim từ 18h – 20h, ngược lại các kênh BBC và CNN là cả hai đều chiếu hai chương trình trong khoảng thời gian này (mỗi kéo dài một giờ).
Nếu table nhìn vào <tr> cuối cùng phần tử, nó chỉ chứa ba các yếu tố mặc dù có bốn cột trong kết quả bên dưới.
Điều này là do bộ phim trong Phần tử <tr> phía trên nó sử dụng thuộc tính rowspan để kéo dài xuống cả hàng dưới phía dưới.
- Long table
Có ba yếu tố giúp phân biệt giữa nội dung chính của table và hàng đầu tiên và hàng cuối cùng (có thể chứa nội dung khác nhau).
Những yếu tố này giúp mọi body những body sử dụng trình đọc màn hình và cũng cho phép table tạo kiểu cho các phần này theo một cách khác với phần còn lại của table (như table sẽ thấy khi table tìm hiểu về CSS).
- <thead> Các tiêu đề của table nên ngồi bên trong phần tử <thead>.
- <body> Cơ thể nên ngồi bên trong phần tử <body>.
- <tfoot> Chân trang thuộc về phần tử <tfoot>.
Một số trình chỉnh sửa HTML tham gia quản lý nội dung hệ thống cung cấp các công cụ để trợ giúp vẽ table. Nếu hàng đầu tiên của table của table chỉ chứa <th> thì table có thể thấy rằng trình soạn thảo chèn một <thead> phần tử tự động.
<table> <thead> <tr> <th>Date</th> <th>Income</th> <th>Expenditure</th> </tr> </thead> <tbody> <tr> <th>1st January</th> <td>250</td> <td>36</td> </tr> <tr> <th>2nd January</th> <td>285</td> <td>48</td> </tr> <!-- additional rows as above --> <tr> <th>31st January</th> <td>129</td> <td>64</td> </tr> </tbody> <tfoot> <tr> <td></td> <td>7824</td> <td>1241</td> </tr> </tfoot> </table>
Một phần lý do để có tách <thead> và <tfoot> các yếu tố đó, nếu table có một cái table cao hơn màn hình (hoặc, nếu được in, dài hơn một trang) rồi đến trình duyệt có thể giữ đầu trang và chân trang hiển thị trong khi nội dung của cuộn table. Đây là dự định để giúp body dùng dễ dàng hơn xem dữ liệu ở cột nào (tuy nhiên chức năng này không được triển khai theo mặc định trong bất kỳ trình duyệt hiện tại).
Các thuộc tính về thẻ table trong html
Thẻ table trong HTML có nhiều thuộc tính khác nhau để tùy chỉnh hiển thị và tùy chỉnh bảng. Một số thuộc tính thường dùng như:
- border: định nghĩa độ rộng của viền của bảng.
- cellpadding: định nghĩa khoảng cách giữa viền của ô và nội dung của ô.
- cellspacing: định nghĩa khoảng cách giữa các ô trong bảng.
- width: định nghĩa chiều rộng của bảng.
- align: định nghĩa vị trí của bảng (left, center, right).
- style: cho phép bạn thêm mã CSS để tùy chỉnh hiển thị của bảng.
- class: cho phép bạn thêm class cho bảng để sử dụng CSS.
- id: cho phép bạn thêm id cho bảng để sử dụng CSS.
<table border="1" cellpadding="5" cellspacing="0" width="50%" align="center"> <!-- table content --> </table>
Lưu ý về table
Có một số lỗi thời thuộc tính mà table không nên sử dụng trên các trang web mới. table có thể, tuy nhiên, đi qua một số code cũ, vì vậy tôi sẽ đề cập đến chúng ở đây. Tất cả các thuộc tính này đều có đã được thay thế table việc sử dụng CSS.
Thuộc tính width đã được sử dụng trên thẻ <table> mở tới cho biết table đó rộng bao nhiêu nên được và đang mở một số thẻ <th> và <td> để chỉ định chiều rộng của các ô riêng lẻ.
<table width="400" cellpadding="10" cellspacing="5"> <tr> <th width="150"></th> <th>Withdrawn</th> <th>Credit</th> <th width="150">Balance</th> </tr> <tr> <th>January</th> <td>250.00</td> <td>660.50</td> <td>410.50</td> </tr> <tr> <th>February</th> <td>135.55</td> <td>895.20</td> <td>1170.15</td> </tr> </table>
Giá trị của thuộc tính này là chiều rộng của table hoặc ô trong điểm ảnh.
Các cột trong table cần tạo thành một đường thẳng, vì vậy table thường chỉ xem thuộc tính width trên hàng đầu tiên (và tất cả các hàng tiếp theo hàng sẽ sử dụng cài đặt đó).
Thẻ <table> mở có thể cũng sử dụng cellpadding thuộc tính để thêm không gian bên trong mỗi ô của table và thuộc tính cellspacing để tạo khoảng cách giữa mỗi ô của cái table. Các giá trị cho những thuộc tính được cho table pixel.
Thuộc tính border đã được sử dụng trên cả <table> và <td> các yếu tố để chỉ ra chiều rộng của đường viền tính table pixel.
<table border="2" bgcolor="#efefef"> <tr> <th width="150"></th> <th>Withdrawn</th> <th>Credit</th> <th width="150" bgcolor="#cccccc">Balance</th> </tr> <tr> <th>January</th> <td>250.00</td> <td>660.50</td> <td bgcolor="#cccccc">410.50</td> </tr> <tr> <th>February</th> <td>135.55</td> <td>895.20</td> <td bgcolor="#cccccc">1170.15</td> </tr> </table>
Thuộc tính bgcolor đã được sử dụng để chỉ ra màu nền của toàn bộ tableg hoặc ô tableg riêng lẻ. Giá trị thường là mã hex.
Ví dụ này sử dụng HTML thuộc tính đường viền và bgcolor.
Không có thuộc tính CSS nào được sử dụng trong ví dụ này.
Khi xây dựng một trang web mới table nên sử dụng CSS để kiểm soát sự xuất hiện của cái table hơn là các thuộc tính này.
Chúng chỉ được đề cập ở đây bởi vì table có thể bắt gặp chúng nếu table nhìn vào mã của các trang web cũ hơn.
