Tạo bảng biểu với thẻ <table>

Bảng biểu được định nghĩa với thẻ <table>, các dòng của bảng được phân chia bởi thẻ <tr> (table row), các dòng trong bảng chia thành các cột (table data) bởi thẻ <td>

Đây là một ví dụ về tạo bảng:

<table border="1">
   <tr>
      <td>Abc1</td>
      <td>Abc2</td>
      <td>Abc3</td>
   </tr>
</table>

Thẻ <td> là nơi chứa dữ liệu của bảng, nó có thể chứa các thẻ HTML khác như văn bản, hình ảnh, danh sách thậm chí chứa một bảng khác.

Thuộc tính border và colspan, rowspan

Độ rộng của đường kẻ bảng biểu được thiết lập bởi thuộc tính border, nếu border="0" thì bảng không có đường kẻ.

<table border="2">

Một ô trong bảng biểu có thể thiết lập độ rộng thành 2 cột hay nhiều cột bằng thuộc tính colspan ở thẻ td:

<table border="2">
    <tr>
        <td>Red</td>
        <td>Blue</td>
        <td>Green</td>
    </tr>
    <tr>
        <td>ABC</td>
        <td colspan="2">XYZ</td>
    </tr>
</table>

Bạn thấy ô dữ liệu XYZ có độ rộng là 2 cột. Tương tự bạn có thể mở rộng ô thành 2 hay nhiều dòng với thuộc tính rowspan

<table border="2">
    <tr>
        <td>Red</td>
        <td>Blue</td>
        <td>Green</td>
    </tr>
    <tr>
        <td>ABC1</td>
        <td colspan="2" rowspan="2">XYZ</td>
    </tr>
    <tr>
        <td>ABC2</td>
    </tr>
</table>

Thuộc tính border và colspan, rowspan

Để ấn định vị trí của bảng trong trang bạn có thể sử dụng thuộc tính align với các giá trị left|right|center

<table align="center">

Để thiết lập màu nền của một ô, bạn có thể sử dụng thuộc tính bgcolor trong thẻ td

<table border="2">
    <tr>
        <td bgcolor="red">Red</td>
        <td>Blue</td>
        <td>Green</td>
    </tr>
    <tr>
        <td>Yellow</td>
        <td colspan="2">Orange</td>
    </tr>
</table>