Tự Học PHP - Level 2 - Bài 5: Căn bản về HTML - Các thẻ tạo bảng

Nguồn: http://tutorial.phpvn.org

4. Các cặp thẻ xử lý bảng:
Các bảng trong HTML được định nghĩa như sau:
Định nghĩa 1 bảng bởi cặp thẻ <table></table>
Trong 1 bảng (table) được chia làm nhiều dòng , mỗi dòng giới hạn bởi 1 cặp thẻ <tr></tr>.
Trong mỗi dòng lại có các ô , giới hạn bởi cặp thẻ <td></td>
Chẳng hạn để định nghĩa 1 bảng gồm có 1 dòng và 3 ô, ta làm như sau:

<table>
<tr>
<td>Ô thứ nhất</td>
<td>Ô thứ 2</td>
<td>Ô thứ 3</td>
</tr>
</table>

Hoặc để định nghĩa một bảng gồm 2 dòng, mỗi dòng 3 ô:

<table>
<tr>
<td>Ô thứ nhất dòng 1</td>
<td>Ô thứ 2 dòng 1</td>
<td>Ô thứ 3 dòng 1</td>
</tr>
<tr>
<td>Ô thứ nhất dòng 2</td>
<td>Ô thứ 2 dòng 2</td>
<td>Ô thứ 3 dòng 2</td>
</tr>
</table>

Chú ý: Số lượng các ô trong các dòng phải bằng nhau, nếu 1 dòng nào đó có số ô khác với dòng khác, bảng sẽ bị "vỡ kế hoạch". Để khắc phục điều này, ta phải tính trước trong 1 bảng, số lượng tối đa các ô của 1 dòng sẽ là bao nhiêu, sau đó có thể dùng thuộc tính colspan của thẻ <td> để gộp các ô trống trong cùng 1 hàng lại với nhau.

Thuộc tính colspan sẽ chỉ định số lượng các ô được gộp vào nhau trên một hàng.
Chẳng hạn:

<table>
<tr>
<td colspan = "2" >Chập ô thứ nhất và ô thứ 2 của dòng 1</td>
<td>Ô thứ 3 dòng 1</td>
</tr>
<tr>
<td>Ô thứ nhất dòng 2</td>
<td>Ô thứ 2 dòng 2</td>
<td>Ô thứ 3 dòng 2</td>
</tr>
</table>

Một số thuộc tính có liên quan:
Thẻ Table:
- border: Xác định độ dày của khung bao quanh bảng
- bordercolor: Màu của khung bao quanh, viết dưới dạng dấu # và 6 chữ số HEX tiếp theo.
- cellspacing: Xác định khoảng cách giữa các ô trong bảng.
- width: Xác định độ rộng của bảng
- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho toàn bảng
- bgcolor: Xác định màu nền của bảng, viết theo kiểu #XXXXXX (số HEX).
Thẻ <td>
- width: Độ rộng của ô
- height: Chiều cao của ô
- colspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 dòng)
- rowspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 cột).
- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho ô
- bgcolor: Xác định màu nền ô, viết theo kiểu #XXXXXX (số HEX).

Ví dụ: Đoạn HTML sau đây trình diễn phần đầu của trang web phpvn.org:

Code:

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="catbg" height="32">
<span style="font-family: Verdana, sans-serif; font-size: 140%; ">PHP Vietnam Programmers</span>
</td>
<td align="right" class="catbg">
<img src="http://www.phpvn.org/Themes/default/images/smflogo.gif" style="margin: 2px;" alt="" />
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0" >
<tr>
<td class="titlebg2" height="32">
<span style="font-size: 130%;"> Hello <b>Admin</b></span>
</td>
</tr>
</table>