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 Tablebạ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áicơ 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ụngnhiều cặp TAG<td></td> để có nhiều ô. Cũng như<p>,<tr> và<td> thực ra là mộtTAG đơ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.
HTML Code của bảng trên được viết như sau:
Code:
<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à 800hay 1024 pixels.
<td width="33%"> cho biết, ô đó chiếm 33% chiều rộng củadò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
Trong table trên, bạnthấ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)
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ònrất nhiều thủ thuật trình bàynữ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.
Frames -"Windows Explorer" trong trang web
1. Frameset - Cols
Frames là sáng kiến của [Netscape] bắt đầu từ Navigator version 2.0. [Microsoft] Internet Explorer (version 3.0 trở lên) cũng đọc được Frames. Dùng Frames, bạn có thể chia một window ra làm nhiều phần riêng biệt, không phụ thuộc vào nhau và có thể chứa những nội dung khác nhau. Từ Frame này có thể thay đổi nội dung của Frame kia. Như vậy website của bạn sẽđược bố cục rõ ràng hơn, tiện lợi hơn và người xem cóthể tìm được cái mình tìm nhanh chóng hơn. Ai hay sử dụng Windows Explorer sẽ thấy được tác dụng tương tự của Frames.
Khi chia window, bạn sẽ có ítnhất 2 Frames. Những Frames này được gọi là một Frame-Set. Một trang sử dụng Frames có cấu trúc cơ bản như sau:
Code:
<html>
<frameset>
</frameset>
</html>Ðể chia một window ra làm hai phần theo chiều dọc, phần bên trái chiếm 30%, phần bên phải 70% chiều rộng của window ta làm như sau:
Code:
<html>
<frameset cols="30%,70%">
<frame name ="ben trai" src="trai.htm">
<frame name ="ben phai" src="phai.htm">
</frameset>
</html>Bạn hãy [xem ví dụ]
2. Frameset - Rows
Tương tự như vậy ta chia theo chiều ngang, nhưng lầnnày chia làm 3 phần (30%, 50% và * là phần còn lại củamàn hình):
Code:
<html>
<frameset rows="30%,50%,*">
<frame name ="tren" src="tren.htm">
<frame name ="duoi" src="duoi.htm">
<frame name ="con_lai" src="conlai.htm">
</frameset>
</html>Bạn hãy [xem ví dụ]
3. Frameset - Giải thích
* cols (columns) chia windowtheo chiều dọc. Các giá trị 30% , 70% có thể được thay bằng số pixels như 150 , 500
* rows cho phép chia theo chiều ngang. 30%, 50% là chiều caocủa hai Frames đầu. Dấu * cho biết chiều cao của Framethứ 3 là phần còn lại của window.
*<frame name ="ben trai" src="trai.htm"> tên và nội dung của frame bên trái. Bạn cứ tưởng tượng, bạn tạo được một khung ảnh có hai ngăn (tương tự như một frameset), mỗi ngăn chứa một bức ảnh (đây là một trang web). Frame bên trái tên là "trai" và chứa trang"trai.htm". Tương tự như vậy với "ben phai","phai.htm","tren","tren.htm","duoi","duoi.htm","con_lai","conlai.htm"
4. Frames - Navigation Menu
Như vậy ta đã có được những bức ảnh trong khung. Nhưngmục đích chính của Frames không phải là làm thế nào đểcó nhiều trang trong một window mà là làm thế nào đểdùng link của Frame này thay đổi nội dung của Frame kia. Bây giờ ta hãy thử dùng trang "trai.htm" làm navigation để thay đổi nội dung Frame"phai". Khi đó ta phải dùng thêm một dòng code nữa trong trang"trai.htm".
Code:
<base target="benphai">Bạn hãy click "xem vi du" sau đó dùng chuột phải click vào trang"trai.htm" trong frame "trai" để xem html-code.
Bạn hãy [xem ví dụ]
4. Frameset in Frameset
Và một ví dụ nữa sẽ cho thấy khả năng của Frames. Trong ví dụ này, đầu tiên tachia window ralàm 2 phần sau đó lại chia phần thứ 2 ralàm đôi. Code của nó như sau:
Code:
<html>
<frameset rows="20%,70%">
<frame src="tren.htm" name="ben tren">
<noframe>
<frameset cols="20%,80%">
<frame src="trai.htm" name="ben trai">
<frame src="phai.htm" name="ben phai">
</frameset>
<body>
This page uses frames but your browser doesn't support them.
Please download a higher version and visit me again. Thanks anyway!
</body>
</html>Bạn thấy đấy, ta đã chia window ra làm 4 Frames nhưng chỉ thấy có 3. Ðó là tác dụng củatag <noframe> Hiện nay số lượng browser không biết Frames hầu như không còn nữa, nhưng để chắc chắn, ta hãy viết thêm một phần <body> và chú thích rằng browser của người đọc không biết frames, nếu không người đósẽ chẳng đọc được một chữ gì khi đến thăm homepage của bạn.
Bạn hãy [xem ví dụ]
Ngoài ra còn một số đặc tính khác của Frames như:
* scrolling="no" (nếu bạn viết như vậy trongtag <frameset>, người đọc sẽ không thể scroll để đọc tiếp nếu như trang html có cỡ to hơn Frame chứa nó).
* frameborder="0" (frame không có khung)
* framespacing="0" (tương tự như trongtable)
* noresize (không cho phép người đọc thay đổi kích cỡ của window)
