[back] [index]

Table - bố cục một trang web sử dụng bảng

 Table - một yếu tố rất quan trong trong c�c Website đẹp. Table cho ph�p bạn c� một sự ch�nh x�c đến từng pixel trong bố cục của Homepage. Với Table bạn c� thể trang tr� v� bố cục trang web của m�nh như một tờ b�o với nhiều cột kh�c nhau. Table l�m cho trang web của bạn c� một layout sinh động hơn. Trang n�y chỉ đề cập tới những c�i cơ bản nhất của Table.
Cặp TAG <table></table> tạo ra một Table. Như bạn biết, một Table được tạo ta từ nhiều d�ng v� mỗi d�ng lại c� thể chứa nhiều �. Mỗi cặp TAG <tr></tr> tạo ra một d�ng, trong d�ng ấy bạn c� thể sử dụng nhiều cặp TAG <td></td> để c� nhiều �. Cũng như <p>, <tr> v� <td> thực ra l� một TAG đơn, kh�ng cần đến </tr> v� </td> nhưng nếu cẩn thận, ta vẫn n�n d�ng n� như một cặp TAG.
 
Table - một yếu tố rất quan trong trong c�c Website đẹp. Table cho ph�p bạn c� một sự ch�nh x�c đến từng pixel trong bố cục của Homepage. Với Table bạn c� thể trang tr� v� bố cục trang web của m�nh như một tờ b�o với nhiều cột kh�c nhau. Table - một yếu tố rất quan trong trong c�c Website đẹp. Table cho ph�p bạn c� một sự ch�nh x�c đến từng pixel trong bố cục của Homepage. Với Table bạn c� thể trang tr� v� bố cục trang web của m�nh như một tờ b�o với nhiều cột kh�c nhau. Table - một yếu tố rất quan trong trong c�c Website đẹp. Table cho ph�p bạn c� một sự ch�nh x�c đến từng pixel trong bố cục của Homepage. Với Table bạn c� thể trang tr� v� bố cục trang web của m�nh như một tờ b�o với nhiều cột kh�c nhau.
 Với Table bạn c� thể trang tr� v� bố cục trang web của m�nh như một tờ b�o với nhiều cột kh�c nhau. Table l�m cho trang web của bạn c� một layout sinh động hơn. Với Table bạn c� thể trang tr� v� bố cục trang web của m�nh như một tờ b�o với nhiều cột kh�c nhau. Table l�m cho trang web của bạn c� một layout sinh động hơn. Với Table bạn c� thể trang tr� v� bố cục trang web của m�nh như một tờ b�o với nhiều cột kh�c nhau. Table l�m cho trang web của bạn c� một layout sinh động hơn.

HTML Code của bảng tr�n được viết như sau:

<table border="1" bordercolor="red" width="80%" align="center" cellpadding="10" cellspacing="5" bgcolor="gray">
<tr>
<td width="33%" bgcolor="#C0C0C0" align="left">D�ng 1 - � 1</td>
<td width="33%" bgcolor="#C0C0C0" align="left">D�ng 1 - � 2</td>
<td width="34%" bgcolor="#C0C0C0" align="left">D�ng 1 - � 3</td>
</tr>
<tr>
<td width="33%" bgcolor="#C0C0C0" align="left">D�ng 2 - � 1</td>
<td width="33%" bgcolor="#C0C0C0" align="left">D�ng 2 - � 2</td>
<td width="34%" bgcolor="#feedd1" align="left">D�ng 2 - � 3</td>
</tr>
</table>
  • <table width="100%"> cho biết chiều rộng của table n�y l� 100%, con số n�y kh�ng c� một gi� trị cố định, n� sẽ thay đổi theo mức rộng của m�n ảnh của người đến xem, như vậy người xem kh�ng phải scroll ngang. Nhưng khi bạn d�ng một gi� trị cố định, chẳng hạn: width="800", Table n�y sẽ lu�n lu�n rộng chừng ấy pixel, bất kể m�n ảnh l� 800 hay 1024 pixels.
     
  • <td width="33%"> cho biết, � đ� chiếm 33% chiều rộng của d�ng.
     
  • <table align="center"> hướng bảng v�o trung t�m của trang web, <td align= "left"> định hướng to�n bộ nội dung của một �. align c� thể mang c�c gi� trị sau: "left" (g�a trị mặc định - kh�ng cần viết cũng được), "center" (trung t�m), "right" (phải)
     
  • bgcolor c� thể sử dụng cho trang web (<body>), to�n bộ table (<table>) hoặc từng � (<td>)
     
  • border="1" bordercolor="red" c� nghĩa: bảng c� khung với độ d�y 1, m�u đỏ
     
  • Bạn c� thể định khoảng c�ch giữa nội dung v� khung trong một � bằng cellpadding, cellpadding="10" c� nghĩa l� text c�ch khung 10 pixels. Tương tự như vậy với khoảng c�ch giữa c�c � trong bảng (cellpadding): cellspacing="5" c� nghĩa l� c�c � của table c�ch nhau 5 pixels

Table - một yếu tố rất quan trong trong c�c Website đẹp. Table cho ph�p bạn c� một sự ch�nh x�c đến từng pixel trong bố cục của Homepage. Với Table bạn c� thể trang tr� v� bố cục trang web của m�nh như một tờ b�o với nhiều cột kh�c nhau. Table - một yếu tố rất quan trong trong c�c Website đẹp. Table cho ph�p bạn c� một sự ch�nh x�c đến từng pixel trong bố cục của Homepage. Với Table bạn c� thể trang tr� v� bố cục trang web của m�nh như một tờ b�o với nhiều cột kh�c nhau.
Table - một yếu tố rất quan trong trong c�c Website đẹp. Table cho ph�p bạn c� một sự ch�nh x�c đến từng pixel trong bố cục của Homepage. Với Table bạn c� thể trang tr� v� bố cục trang web của m�nh như một tờ b�o với nhiều cột kh�c nhau. Table l�m cho trang web của bạn c� một....
Table - một yếu tố rất quan trong trong c�c Website đẹp. Table - một yếu tố rất quan trong trong c�c Website đẹp.
 Table - một yếu tố rất quan trong trong c�c Website đẹp. Table cho ph�p bạn c� một sự ch�nh x�c đến từng pixel trong bố cục của Homepage. Với Table bạn c� thể trang tr� v� bố cục trang web của m�nh như một tờ b�o với nhiều cột kh�c nhau. Table l�m cho trang web của bạn c� một layout sinh động hơn.


Trong table tr�n, bạn thấy c�c � c� chiều cao v� chiều rộng kh�c nhau, ch�nh x�c hơn l� � b�n tr�i, ph�a dưới rộng bằng 2 � tr�n, � b�n phải lại cao bằng hai � b�n tr�i n�. �iều đ� được thực hiện bởi colspan v� rowspan (xem HTML Code)
<table border="1" cellpadding="10" bordercolor="#FF0000" width="80%" cellspacing="5">
<tr>
<td width="33%" valign="top" bgcolor="#E8E8E8">D�ng 1 - � 1</td>
<td width="33%" valign="top" bgcolor="#E8E8E8">D�ng 1 - � 2</td>
<td width="34%" valign="top" bgcolor="#feedd1" rowspan="2">

<table width="100%" cellpadding="5" cellspacing="5" border="0"           bgcolor="white">
<tr>
<td width="50%" bgcolor="#e8e8e8">Text</td>
<td width="50%" bgcolor="#e8e8e8">Text</td>
</tr>
<tr>
<td width="50%" bgcolor="#e8e8e8">Text</td>
<td width="50%" bgcolor="#e8e8e8">Text</td>
</tr>
</table>

</td>
</tr>

<tr>
<td width="66%" valign="top" bgcolor="#ffcc99" colspan="2">D�ng 2 - 1 �</td>
</tr>
</table>

V� đặc biệt nữa l� trong � b�n phải, bạn lại thấy một table nữa c� hai d�ng, mỗi d�ng hai �. Như vậy, bạn c� thể lồng một table trong một table kh�c.

Cũng c�n rất nhiều thủ thuật tr�nh b�y nữa nhưng t�i nghĩ, nếu sử dụng những kỹ thuật tr�n c�ng với một ch�t s�ng tạo, bạn cũng đ� đạt được rất nhiều rồi. C� một điều cần lưu � l� Netscape Version 2 kh�ng thể hiện được một table nền tối với chữ s�ng. Nhưng bạn kh�ng cần ngại bởi ng�y nay chắc chẳng ai d�ng NS 2 nữa.