Bài F3. Tạo bảng và khung trong trang web với HTML
Nội dung lý thuyết
1. Tạo bảng
Để trình bày nội dung dưới dạng bảng, HTML cung cấp thẻ <table> để định nghĩa bảng, thẻ <tr> định nghĩa hàng, <th> định nghĩa ô tiêu đề và <td> định nghĩa các ô còn lại.
Ví dụ:
<h1>Lịch sinh hoạt hằng tuần</h1>
<table border="1">
<tr>
<th></th>
<th>Thứ Hai</th>
<th>Thứ Ba</th>
<th>Thứ Tư</th>
</tr>
<tr>
<td>Sáng</td>
<td>Học chính khoá</td>
<td>Học chính khoá</td>
<td>Học chính khoá</td>
</tr>
<tr>
<td>Chiều</td>
<td>Học chính khoá</td>
<td>Học chính khoá</td>
<td>CLB Tin học</td>
</tr>
</table>
Một số thuộc tính định dạng bảng (Bảng 1):
| Thuộc tính | Dùng trong thẻ | Giải thích |
|---|---|---|
border | <table> | Định dạng đường viền của bảng |
cellspacing | <table> | Thiết lập khoảng cách giữa các ô trong bảng |
cellpadding | <table> | Thiết lập khoảng cách giữa nội dung và đường viền của ô |
colspan | <td>, <th> | Gộp cột |
rowspan | <td>, <th> | Gộp hàng |
width | <table>, <td>, <th> | Thiết lập chiều rộng |
height | <table>, <td>, <th> | Thiết lập chiều cao |
bgcolor | <table>, <td>, <th> | Màu nền |
align | <table>, <td>, <th> | Căn lề ngang |
Tạo bố cục trang bằng bảng: (Hình 2)
Ví dụ: Tạo bố cục trang gồm tiêu đề, nội dung chia 2 cột, và phần cuối:
<table border="1" width="100%">
<tr height="80" bgcolor="#66ccff">
<td colspan="2">Tiêu đề trang</td>
</tr>
<tr height="150">
<td width="30%" bgcolor="#ffffff">Nội dung A</td>
<td width="70%" bgcolor="#ffcc99">Nội dung B</td>
</tr>
<tr height="80">
<td colspan="2" bgcolor="#66ccff">Phần cuối trang</td>
</tr>
</table>
2. Tạo khung
Thẻ <iframe> dùng để nhúng một trang web khác vào trang hiện tại.
Cú pháp:
<iframe src="đường_dẫn" width="chiều_rộng" height="chiều_cao"></iframe>
Thuộc tính:
src: đường dẫn tới trang cần nhúngwidth: chiều rộng của khungheight: chiều cao của khung
Ví dụ:
<h1>Những trang web thường ghé thăm</h1> <ul> <li>Chân trời sáng tạo:</li> <iframe src="https://chantroisangtao.vn" width="80%" height="500"></iframe> </ul>
