bố cục sử dụng bảng 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. 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à 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 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) 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. 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ó ít nhấ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ần này chia làm 3 phần (30%, 50% và * là phần còn lại của
mà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 window theo
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 cao của
hai Frames đầu. Dấu * cho biết chiều cao
của Frame thứ 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ưng mụ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="ben phai">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 ta
chia window ra làm 2 phần sau đó lại
chia phần thứ 2 ra là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ủa tag <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
trong tag <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ư
trong table)
* noresize (không cho phép người đọc
thay đổi kích cỡ của window)
