Thống kê lượt truy cập
Trình bày văn bản dạng bảng trong html với thẻ table
Phần tử bảng được dùng khi ta muốn trình bày văn bản có cấu trúc nhất định, việc trình bày bảng giúp người đọc nhanh chóng hình dung được ý của người trình bày và có thể nhanh chóng nắm bắt được thông tin một các khái quát.
Bảng được tạo từ các hàng, mỗi hàng có nhiều ô - mỗi ô đại diện cho 1 cột. Trên cùng của bảng có thể tạo ra nhãn của bảng.
| Loại phần tử | Tên thẻ | Ví dụ | Ghi chú |
| Bảng | table | <table> … </table> | Là phần tử ngoài cùng |
| Hàng | tr | <table><tr></tr></table> | Là phần tử con của phần tử table, mỗi bảng có thể có nhiều hàng |
| Ô | th | <table><tr> <th>…</th> <th>…</th> </tr></table> | + Là phần tử con của phần tử tr Mỗi hàng có thể có nhiều ô, mỗi ô là 1 cột + Phần tử th thường dành cho hàng đầu hoặc hàng cuối là tiêu đề bảng, |
| Ô | td | <table><tr> <td>…</td> <td>…</td> </tr></table> | + Là phần tử con của phần tử tr. Mỗi hàng có thể có nhiều ô. + phần tử td thường dùng để trình bày dữ liệu của bảng, từ dòng thứ 2 |
Ví dụ 1:
<table width="100%" border="1" cellspacing="0">
<caption>Lịch hoạt động CLB Thể thao</caption>
<tr>
<th rowspan="2">Bộ môn</th>
<th rowspan="2">Giáo viên phụ trách</th>
<th colspan="5">Ngày</th>
</tr>
<tr>
<th>Thứ 2</th>
<th>Thứ 3</th>
<th>Thứ 4</th>
<th>Thứ 5</th>
<th>Thứ 6</th>
</tr>
<tr>
<td>Bóng đá</td>
<td>Thầy Khải</td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td>X</td>
</tr>
<tr>
<td>Bóng chuyền</td>
<td>Cô Lan</td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Bóng rổ/td>
<td>Thầy Vũ</td>
<td></td>
<td></td>
<td>X</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Võ thuật</td>
<td>Thầy Hoàng - Karatedo<br>
Thầy Đức - Taekwondo<br>
Thầy Thắng - Vivonam
</td>
<td>X</td>
<td>X</td>
<td></td>
<td>X</td>
<td></td>
</tr>
<tr>
<td>Bơi/td>
<td>Cô Bích</td>
<td></td>
<td></td>
<td>X</td>
<td></td>
<td>X</td>
</tr>
</table>Kết quả:
Một số thuộc tính trong phần tử Table:
| Tên thuộc tính | Ý nghĩa | Các loại giá trị | Ví dụ |
| border | Là độ dày của đường viền của bảng, các ô | npx | border="2px" |
| cellspacing | Là khoảng cách giữa các ô trong bảng | npx | cellspacing="1px" |
| width | Là chiều rộng của bảng | n% hoặc npx | width="100%" |
| rowspan | là thuộc tính của ô, dùng để gộp các ô liên tiếp theo chiều dọc | n | rowspan="3" |
| colspan | là thuộc tính của ô, dùng để gộp các ô liên tiếp theo chiều ngang | n | colspan="2" |
Ngoài ra các ô, hàng, bảng còn có nhiều thuộc tính khác: padding, margin, color,background… cách dùng như những thẻ khác
Bài tập vận dụng: Thiết kế trang web có giao diện như sau:
Xem clip hướng dẫn: Xem