Chức năng: Tạo và trình bày bảng
Ngôn ngữ: html - Nhóm: table
<TABLE>...</TABLE>
SUMMARY=Text (Chỉ dẫn về bảng)
WIDTH=Length (Chiều rộng bản px hoặc %)
BORDER=Pixels (border width)
FRAME=[ void | above | below | hsides | lhs | rhs | vsides | box | border ] (Viền ngoài)
RULES=[ none | groups | rows | cols | all ] (Viền trong)
CELLSPACING=Length (Khoảng cách giữa các ô)
CELLPADDING=Length (Khoảng cách trong ô)
ALIGN=[ left | center | right ] (Vị trí tương đối trong bảng)
BGCOLOR=Color (Màu nền)
THUỘC TÍNH ĐẶC BIỆT
SUMMARY: Thông tin mô tả về table, ít được dùng đến.
WIDTH: Độ rộng của table, có thể được tính bằng pixel hoặc percent(%). Lúc thiết kế, ngoài một số trường hợp đặc biệt ra, bạn chỉ cần quan tâm tới thuộc tính width(chiều rộng) còn thuộc tính Height(Chiều cao) Tự động được thay đổi tùy vào nội dung bên trong bảng, vd với một hình ảnh height=500px, bạn định nghĩa một table chứa hình ảnh với height=400px thì chiều cao của table được tự động thay đổi để chứa đủ hình ảnh.
BORDER: Độ rộng tính bằng picel
FRAME: Kiểu khung bao ngoài của table, hầu hết các kiểu frame đều được tất cả các trình duyệt hổ trợ.
CELLSPACING: Khoảng cách giữa các ô, cần phân biệt với cellpadding là khoảng các từ viền của ô đến đối tượng bên trong ô.
ALIGN: Vị trí tương đối trong bảng, ở một số mô tả, align còn là vị trí tương đối của table so với các đối tượng quanh nó. Nếu như thuộc tính align không có tác dụng trong một số trường hợp, bạn có thể dùng tag:div với align=center bao ngoài table để đặt align cho table.
BGCOLOR: Mô tả màu nền của bảng. Ngoài mô tả màu nền chung của toàn bảng, bạn cũng có thể dùng thuộc tính này để mô tả riêng từng màu cho từng dòng hoặc từng ô trong bảng.
Tag:TABLE được sử dụng để tạo ra một bảng bao gồm hàng và cột. Ngoài định dạng trang bằng CSS, thông thường table được sử dụng để trình bày tất cả các phần của một trang web như banner, menu, left, right.
VÍ DỤ
<table width="100%" border="1" cellspacing="1" cellpadding="5">
<tr>
<td colspan="3">BANNER Ở ĐÂY - Chọn colspan cho cell này là 3 (<td colspan=3>...</td></td>
</tr>
<tr>
<td width="22%">MENU LEFT Ở ĐÂY</td>
<td width="60%">NỘI DUNG CHÍNH Ở ĐÂY</td>
<td width="18%">MENU RIGHT Ở ĐÂY</td>
</tr>
<tr>
<td> </td>
<td>copy 2009 by yoursite.com</td>
<td> </td>
</tr>
</table>
KẾT QUẢ
| BANNER Ở ĐÂY - Chọn colspan cho cell này là 3
(<td colspan=3>...</td>)
|
| MENU LEFT Ở ĐÂY |
NỘI DUNG CHÍNH Ở ĐÂY - chiều cao có thể tự động thay đổi tùy vào nội dung |
MENU RIGHT Ở ĐÂY |
| |
copy 2009 by yoursite.com |
|
Với cellspacing=0 cellpadding=0 border=0, các đường viền sẽ bị mất, lúc đó bạn sẽ sử dụng những đánh dấu để trình bày các phần còn lại của website.
VÍ DỤ
Sử dụng table bên trong một table: Tương tự như việc sử dụng table trong word, bạn có thể
sử dụng table bên trong một table khác để trình bày nội dung website. Việc này giúp bạn có thể bố trí những layout mà không bị phụ thuộc vào td hay tr của table
<table width="100%" border="1" cellspacing="1" cellpadding="5">
<tr>
<td colspan="3">
<table width="100%" border="1" cellspacing="1" cellpadding="0">
<tr>
<td width="68%">TABLE NÀY NẰM TRONG MỘT TD CỦA TABLE CHA</td>
<td width="32%">TD:1_2</td>
</tr>
<tr>
<td>TD: 2_1</td>
<td>TD: 2_2</td>
</tr>
</table></td>
</tr>
<tr>
<td width="22%">LEFT</td>
<td width="53%"> </td>
<td width="25%">RIGHT</td>
</tr>
<tr>
<td>LEFT</td>
<td>
<table width="100%" border="1" cellspacing="1" cellpadding="0">
<tr>
<td width="25%">TABLE CON</td>
<td width="75%"> </td>
</tr>
<tr>
<td> </td>
<td>TD: 2_2</td>
</tr>
</table></td>
<td>RIGHT</td>
</tr>
</table>
KẾT QUẢ
| TABLE NÀY NẰM TRONG MỘT TD CỦA TABLE CHA |
TD:1_2 |
| TD: 2_1 |
TD: 2_2 |
|
| LEFT |
|
RIGHT |
| LEFT |
|
RIGHT |
VÍ DỤ
Sử dụng table để trình bày dữ liệu:
<table width="100%" border="0" cellspacing="1" cellpadding="5" bgcolor="#AAAAAA">
<tr bgcolor="#CCCCCC">
<td>TITLE (tr bgcolor="#CCCCCC")</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr bgcolor="#DDDDDD">
<td>td với thuộc tính bgcolor="#DDDDDD"</td>
<td bgcolor="EEEEEE"><td với thuộc tính bgcolor#</td>
<td><td></td>
</tr>
<tr>
<td>tr có màu trùng với màu nền đã chọn của table</td>
<td> </td>
<td> </td>
</tr>
</table>
KẾT QUẢ
| TITLE (<tr bgcolor="#CCCCCC">) |
Content |
Content |
| <td với thuộc tính bgcolor="#DDDDDD"> |
<td với thuộc tính bgcolor#> |
<td> |
| <tr có màu trùng với màu nền đã chọn của table> |
|
|