Căn bản về HTML - Các thẻ tạo bảng

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> <td class="titlebg2" height="32" align="right"> <span class="smalltext">January 27, 2007, 06:25:29 PM</span> <a href="#" onclick="shrinkHeader(!current_header); return false;"><img id="upshrink" src="http://www.phpvn.org/Themes/default/images/upshrink.gif" alt="*" title="Shrink or expand the header." align="bottom" style="margin: 0 1ex;" /></a> </td> </tr> <tr id="upshrinkHeader"> <td valign="top" colspan="2"> <table width="100%" class="bordercolor" cellpadding="8" cellspacing="1" border="0" style="margin-top: 1px;"> <tr> <td colspan="2" width="100%" valign="top" class="windowbg2"><span class="middletext"> <a href="http://www.phpvn.org/index.php?action=unread">Show unread posts since last visit.</a> <br /> <a href="http://www.phpvn.org/index.php?action=unreadreplies">Show new replies to your posts.</a><br /> Total time logged in: 20 hours and 1 minutes.<br /> </span> </td> </tr> </table> </td> </tr> </table> Theo ddtkw (ngothaithuan)