Căn bản về HTML - Các thẻ tạo 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ẻ - 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ẻ .
- Trong mỗi dòng lại có các ô , giới hạn bởi cặp thẻ
- Chẳng hạn để định nghĩa 1 bảng gồm có 1 dòng và 3 ô, ta làm như sau:

Code:

<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 ô:

Code:

<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ẻ để 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:

Code:

<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ẻ
- 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>