Lp trình Web c bn

Dành cho học sinh khối 9 - vinschool

Contents
Bài 8: Bảng – Table.........................................................................................................................2
1. Tạo bảng............................................................................................................................ 2
2. Sự khác nhau giữa <tr> và<td>?........................................................................................2
3. Những thuộc tính cho bảng............................................................................................... 4
 Bài 8: 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.
1. Tạo bả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

2. 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.
• <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.
Đâ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:
1. <table>
2. <tbody>
3. <tr>
4. <td>Cell 1</td>
5. <td>Cell 2</td>
6. <td>Cell 3</td>
7. <td>Cell 4</td>
8. </tr>
9. <tr>
10. <td>Cell 5</td>
11. <td>Cell 6</td>
12. <td>Cell 7</td>
13. <td>Cell 8</td>
14. </tr>
15. <tr>
16. <td>Cell 9</td>
17. <td>Cell 10</td>
18. <td>Cell 11</td>
19. <td>Cell 12</td>
20. </tr>
21. </tbody>
22. </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

3. Những thuộc tính cho bảng

3.1 Thuộc tính Border
Ví dụ:

1. <table border="1">
2. <tbody>
3. <tr>
4. <td>Cell 1</td>
5. <td>Cell 2</td>
6. </tr>
7. <tr>
8. <td>Cell 3</td>
9. <td>Cell 4</td>
10. </tr>
11. </tbody>
12. </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ụ:
<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.
3.2 Thuộc tính Align
• 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.
3.3 Thuộc tính Avalign
• 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.
Ngoài ra, còn nhiều thuộc tính khác với bảng mà các bạn có thể
tìm hiều thêm.

Ví dụ 5:
• <td align="right" valign="top">Cell 1</td>

Note: 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ật nhiều với những gì đã học.

3.4 Thuộc tính Colspan và Rowspan

Đó là 2 thuộc tính colspan và rowspan nếu bạn muốn tạo ra bảng có những
tính chất đặc biệt hơn.
a) Colspan:
Colspan là từ viết tắt của “column span” – mở rộng cột. Colspan được sử
dụng trong thẻ <td> để xác định một ô sẽ mở rộng ra thêm bao nhiêu
cột:

Ví dụ 1:
<table border="1">
<tbody>
<tr>
<td colspan="3">Ô1</td>
</tr>
<tr>
<td>Ô 2</td>
<td>Ô 3</td>
<td>Ô 4</td>
</tr>
</tbody>
</table>

Đây là kết quả bạn nhìn thấy trên trình duyệt:

Ô1
Ô2 Ô3 Ô4

Khi thiết lập colspan bằng “3”, Ô của hàng đầu tiên sẽ mở rộng ra bằng 3
cột. Nếu bạn thiết lập colspan bằng “2”, ô sẽ mở rộng ra thành 2 cột ,
do đó bạn cần thêm 1 ô nữa để đủ 3 cột trong hàng đầu tiên, như thế nó
mới có thể cân bằng với số cột ở hàng thứ hai
Ví dụ:
<table border="1">
<tbody>
<tr>
<td colspan="2">Ô 1</td>
<td>Ô 2</td>
</tr>
<tr>
<td>Ô 3</td>
<td>Ô 4</td>
<td>Ô 5</td>
Xem trên trình duyệt bạn sẽ có bảng như sau:
Ô1 Ô2
Ô3 Ô4 Ô5

b) Rowspan:
Ch ắc bborder="1">
<table ạn cũng đoán ra, nó sẽ cũng tương tự, rowspan xác định một ô sẽ
m<tbody>
ở rộng ra bao nhiêu hàng:
Ví<tr>
dụ:
<td rowspan="3">Ô1</td>
<td>Ô 2</td>
</tr>
<tr>
<td>Ô 3</td>
</tr>
<tr>
<td>Ô 4</td>
</tr>
</tbody>
</table>