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
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>
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>
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">
5.
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.
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)