XtGem.com

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 ralà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)