Cũng giống như các cặp thẻ khác.Bảng cũng được giới hạn bởi 2 thẻ mở <TABLE> và đóng </TABLE>.
- Đặc trưng của Bảng là các dòng và cột:
Mỗi dòng được giới hạn bởi 1 cặp thẻ <tr></tr>.
Mỗi cột được giới hạn bởi cặp thẻ <td></td>
Ví dụ: Để định nghĩa một bảng có 1 dòng,3 cột Ta làm như sau:
<table>
<tr>
<td>cột 1</td>
<td>cột 2</td>
<td>cột 3</td>
</tr>
</table>
Kết quả:
Nhiều bạn sẽ thắc mắc rằng: Tại sao bảng lại không thấy hiển thị các đường kẻ ?. Nguyên nhân là ta chưa thêm thuộc tính đường viền cho nó.Để thêm đường viền, Ta dùng thuộc tính border="A" trong đó A là độ dày của đường viền (tính bằng px)
Ví dụ : Lần này tôi sẽ định nghĩa một bảng có 2 dòng, dòng 1 có 2 cột,dòng 2 có 3 cột và thêm đường viền có độ dày là 1px
<table border="1px">
<tr>
<td>cột 1.1</td>
<td>cột 1.2</td>
</tr>
<tr>
<td>cột 2.1</td>
<td>cột 2.2</td>
<td>cột 2.3</td>
</tr>
</table>
và đây là kết quả:
| cột 1.1 |
cột 1.2 |
| cột 2.1 |
cột 2.2 |
cột 2.3 |
<hr/><br/>
Ngoài thuộc tính border="" ,còn rất nhiều thuộc tính khác mà bạn cũng có thể thêm vào bảng của mình:<br/>
- 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
- height: Chiều cao
- 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).
Bây giờ là một ví dụ tổng hợp các thuộc tính để định nghĩa một menu đơn giản cho wap khi sử dụng thẻ TABLE
<table border="1" width="100%" bgcolor="#ff0000">
<tr>
<td width="50%" style="text-align: center;">hello</td>
<td width="50%"style="text-align: center;">hello</td>
</tr>
<tr>
<td width="33%" style="text-align: center;">
<a style="color: fuchsia;" href="/">HOME</a>
</td>
<td width="34%" style="text-align: center;">
<a href="http://">VER2</a>
</td>
<td width="33%" style="text-align: center;">
<a href="http:///">CHAT</a>
</td>
</tr>
</table>
Kết quả :
Tại tôi áp dụng lung tung nên nhìn nó không được đẹp.Chủ yếu để các bạn hiểu.Sau này chúng ta sẽ sử dụng CSS để định dạng thì sẽ gọn và đẹp hơn nhiều.
