CHƯƠNG TR�NH JAVASCRIPT D�NH CHO SINH VI�N HỌC SINH
Phần n�y cung cấp c�c hướng dẫn về c�ch tạo c�c bảng cho c�c t�i liệu web của bạn.bạn c� thể nghĩ n� l� một c�c bảng đơn giản như :
Đ�y l� một TABLE
A Đạo
Tr�c Linh
Đại Nguy�n
Thưởng
Tường
Huy
Bạn c� thế quan t�m đến c�ch tạo trang web của bạn nh�n hấp dẫn bằng c�ch sử dụng c�c thẻ<TABLE>!để minh họa , sau l� một trang tương tự c� nền m�u x�mva bảng c� c�c BORDER.
Tất cả c� 3 thẻ :
<TABLE>
Thẻ ch�nh.Được sử dụng để cho tr�nh duyệt biết"đ�y l� một bảng "c�ng một số thuộc t�nh như k�ch thước,chiều rộng đường viền v� một số thứ kh�c.
<TR>
Table Rowx�c định h�ng ngang của <TD>(table data)của c�c cell
<TD>
Ấn định khối c� biệt hoặc cell(�)bằng một h�ng của bạn.
Bảng(table)được thiết lập bằng c�c h�ng (row)để tạo th�nh c�c �(cell)
Đ� l� c�c bảng trong một bảng t�m tắt.b�y giờ bạn sẳn s�ng tạo một số bảng . Để biết c�ch tạo c�c t�i liệu chất lượng , bạn cần c� thời gian t�m hiểu về c�c thẻ .Nếu ạn chỉ dựa v�o c�c "table wizard",bạn sẽ rất bị giới hạn v� kết quả cuối c�ng kh�ng thể đ�p ứng nhu cầu của bạn.
B�I 1 : BỐ CỤC BẢNG
Bạn c� thể mở ngay Notepad thực ghiện.Ch�p v� d�n m� nguồn sau để bắt đầu:
<HTML><HEAD><TITLE>Joe's a swell guy</TITLE></HEAD><BODY>
</BODY></HTML>
Lưu n� l� table1.html trong thư liệu n�o đ� .Tiếp tục v� tạo cho n� một thư liệu ri�ng v� ch�ng ta cũng đưa một số thứ kh�c v�o đ� .Khởi động tr�nh duyệt của bạn. sử dụng n� để mở table1.html ,để chạy tr�nh duyệtv� Notepad c�ng vời nhau.Bằng c�ch n�y c� thể tạo c�c trang của m�nh v� hầu như thấy ngay kết quả những g� bạn đ� thực hiện. Bạn cần c� 'Wizard' 9 megabyte.
G� nhập c�c thẻ về bảng của bạn.C�c thẻ n�y c� nghĩa l� "Bắt đầu một bảng " v�" Kết th�c một bảng "
<TABLE></TABLE>
</BODY></HTML>Mỗi bảng cần �t nhất một h�ng:
<TABLE><TR></TR></TABLE>
</BODY></HTML>v� đương nhi�n mỗi h�ng phải c� �t nhất một cell dữ liệu bảng:
<TABLE><TR><TD></TD></TR></TABLE>
Để cho mọi thứ được gọn g�ng , chỉ viết những g� trong c�c thẻ bảng . Bỏ đầu mục, th�n v� ti�u đề,v�n v�n trong t�i liệu của bạn
Giờ bạn cần đưa điều g� đ� v�o trong � .C�n Ed? ch�ng ta đưa Ed v�o trong � <TD>:
<TABLE><TR><TD>Ed</TD></TR></TABLE>
b�y giờ bạn c� một bảng html c� đủ chức năng .Mở n� bằng tr�nh duyệt kiểm tra lại.Nếu bạn thực hiện tất cả ch�nh x�c bảng của bạn sẽ tr�nh b�y như sau
một c�ch đơn giản hnư thế th�i!
B�I 2 : ĐỊNH DẠNG BẢNG
Những � ch�ng ta c� đuợc l�
Cung cấp cho ch�ng ta l�
Ed
Trước hết để tạo cho n� nh�n giống một bảng bằng c�ch tạo cho n� một đường viền.mỗi lần thay đổi v� muốn cho n� được tr�nh b�y như thế n�o, bạn c� thể ấn n�t reload tr�n tr�nh duyệt của m�nh .nếu tr�nh duyệt đ� kh�ng c� n�t reload,t�m một tr�nh duyệt kh�c.
<TABLE BORDER=1><TR><TD>Ed</TD></TR></TABLE>
K�ch thước của đường viền bao nhi�u:
<TABLE BORDER=5><TR><TD>Ed</TD></TR></TABLE>
Đường viền HUGE bao nhi�u?
<TABLE BORDER=25><TR><TD>Ed</TD></TR></TABLE>
Kh�ng c� đường viền:
<TABLE BORDER=0><TR><TD>Ed</TD></TR></TABLE>
Như bạn thấy mặc định l� kh�ng c� đường viền.
ch�ng ta h�y d�ng đường viền phổ biến nhất hiện nay:
<TABLE BORDER=3><TR><TD>Ed</TD></TR></TABLE>
khi k�ch thước kh�ng được ấn định bảng sẽ lớn tối đa c� thể
<TABLE BORDER=3><TR><TD>Ed, Rick and Tom</TD></TR></TABLE>
Tuy nhi�n ấn định k�ch thước bảng kh� đơn giản:
<TABLE BORDER=3 WIDTH=100%><TR><TD>Ed, Rick and Tom</TD></TR></TABLE>
Khi c� chiều rộng 75%
<TABLE BORDER=3 WIDTH=75%><TR><TD>Ed, Rick and Tom</TD></TR></TABLE>
B�y giờ ch�ng ta bỏ c�c bạn của Ed:
<TABLE BORDER=3 WIDTH=75%><TR><TD>Ed</TD></TR></TABLE>
Ch�ng ta giảm k�ch thước bảng xuống c�n 50%cửa sổ của tr�nh duyệt:
<TABLE BORDER=3 WIDTH=50%><TR><TD>Ed</TD></TR></TABLE>
Giờ ch�ng ta ấn định chiều rộng l� 50 thay v� 50%:
<TABLE BORDER=3 WIDTH=50><TR><TD>Ed</TD></TR></TABLE>
B�y giờ l� 100:
<TABLE BORDER=3 WIDTH=100><TR><TD>Ed</TD></TR></TABLE>
như bạn thấy c� 2 c�ch ấn định chiều rộng của bảng. Mỗi kiểu đ�p ứng c�ch sử dụng của n� .B�y giờ kiểu sử dụng kh�ng c�n quan trọng .
ch�ng ta c� thể thay đổi chiều cao :
<TABLE BORDER=3 WIDTH=100 HEIGHT=75><TR><TD>Ed</TD></TR></TABLE>
ch�ng ta c� thể điều khiển nơi � m� dữ liệu sẽ xuất hiện:
<TABLE BORDER=3 WIDTH=100 HEIGHT=75><TR><TD ALIGN=CENTER>Ed</TD></TR></TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75><TR><TD ALIGN=RIGHT>Ed</TD></TR></TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75><TR><TD ALIGN=LEFT>Ed</TD></TR></TABLE>
Như bạn thấy, gi� trị mặc định l� ALIGN=LEFT. C� thể bạn đ� biết rồi, default value l� gi� trị tr�nh duyệt thừa nh�n nếu như bạn kh�ng khai b�o gi� trị kh�c.
Ch�ng ta c� thể điều khiển nơi dữ liệusẽ xuất hiện theo chiều dọc trong một �.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75><TR><TD ALIGN=LEFT VALIGN=TOP>Ed</TD></TR></TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75><TR><TD ALIGN=LEFT VALIGN=BOTTOM>Ed</TD></TR></TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75><TR><TD ALIGN=LEFT VALIGN=MIDDLE>Ed</TD></TR></TABLE>
Mặc định l� ở giữa.
Cũng c� thể sử dụng c�c ảnh v� điều t�c n� trong một � dữ liệu của bảng . Trong thư liệu c� t�i liệu n�ybạn sẽ thấy một ảnh nhỏ c� t�n ed.gif.Ch�p n� v�o thư liệu m� bạn đang l�m việc (ảnh m� nơi bạn đưa v�o tables1.html).Thay thẻ Ed bằng IMG:
<TABLE BORDER=3 WIDTH=100 HEIGHT=75><TR><TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="ed.gif" WIDTH=32 HEIGHT=32></TD></TR></TABLE>
B�y giờ cung cấp c�c thuộc t�h bằng c�c thẻ ảnh của bạn.
B�I 3 : HIỆU CHỈNH BẢNG
Ch�ng ta trở lại bảng Ed đơn thuần ban đầu.
Để được s�ng sủa v� đơn giản, ch�ng ta bỏ c�c thuộc t�nh c�n chỉnh .Ch�ng ta biết những g� sẽ xảy ra v� ch�ng ta biết c�c gi� trị mặc định như thế n�o.TAG cho tr�nh duyệt biết phải thực hiện điều g�.ATTRIBUTE ở v�o b�n trong TAG v� cho tr�nh duyệt biết c�ch thực hiện đ� :
B�y giờ ch�ng ta tạo ra một bảng lớn hơn:
<TABLE BORDER=3 WIDTH=300 HEIGHT=75><TR><TD>Ed</TD></TR></TABLE>
fuzz l� một thuật ngữ chỉ bảng lớn v� phức tạp chỉ th�ch hợp đối với t�i liệu html cao cấp.
Tom l� bạn của Ed ,anh ta muốn c� một � ri�ng :
<TABLE BORDER=3 WIDTH=300 HEIGHT=75><TR><TD>Ed</TD><TD>Tom</TD></TR></TABLE>
khi kh�ng c� c�c chỉ lệnh n�o được cung cấp cho tr�nh duyệt, mỗi � c� thể(nhưng kh�ng phải lu�n lu�n)c� k�och thước kh�c nhau .Tuy nhi�n, tốt hơn cần ấn định k�ch thước của từng � .cần phải t�nh t�an ch�nh x�c nếu kh�ng người xem sẽ thấy h�an t�an kh�c với những g� m� bạn muốn họ thấy
<TABLE BORDER=3 WIDTH=300 HEIGHT=75><TR><TD WIDTH=150>Ed</TD><TD WIDTH=150>Tom</TD></TR></TABLE>
C�c thuộc t�ng Width n�y cũng c� thể được biểu thị bằng phần trăm:
<TABLE BORDER=3 WIDTH=300 HEIGHT=75><TR><TD WIDTH=50%>Ed</TD><TD WIDTH=50%>Tom</TD></TR></TABLE>
ch�ng ta tạo chop Ed một � lớn v� anh ta ở đ�y từ đầu.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75><TR><TD WIDTH=80%>Ed</TD><TD WIDTH=20%>Tom</TD></TR></TABLE>
Giờ Rich ở ph�a sau v� đương nhi�n anh ta cũng muốn c� một � ri�ng .ch�ng ta cần x�c định của h�ng ch�ng ta sẽ tạo cho anh ta. Giả sử bằng cặp thẻ 20%. Chắc chắn cũng điều chỉnh k�ch thước của Ed:
<TABLE BORDER=3 WIDTH=300 HEIGHT=75><TR><TD WIDTH=60%>Ed</TD><TD WIDTH=20%>Tom</TD><TD WIDTH=20%>Rick</TD></TR></TABLE>
C� ba tay yahoo băng qua phố để xem những g� x�y ra v� họ muốn c� mặt trong bảng của c�c bạn.Ch�ng ta cho họ một h�ng ri�ng
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR><TD WIDTH=60%>Ed</TD><TD WIDTH=20%>Tom</TD><TD WIDTH=20%>Rick</TD></TR>
<TR><TD>Larry</TD><TD>Curly</TD><TD>Mo</TD></TR>
</TABLE>
c�c thuộc t�nh Width ở h�ng thứ nhất chuyển sang h�ng thứ hai
Nếu Mo bị bỏ x�t, ch�ng ta vẫn c� một bảng h�an chỉnh , n� chỉ khuyết mất một t�n:
<TR><TD>Larry</TD><TD>Curly</TD></TR>
Ch�ng ta đưa Mo trở lại v� x�a tất cả c�c thuộc t�nh ngọai trừ boder:
<TABLE BORDER=3>
<TR><TD>Ed</TD><TD>Tom</TD><TD>Rick</TD></TR>
Tiếp theo l� hai thuộc t�nh được gọi l� CELLPADDING v� CELLSPACING. cả hai đuợc sử dụng để l�m nổi bậttrong thẻ <TABLE>.CELLPADING l� khỏang trống giữa c�c đường viền của � v� nội dung của � đ� .
<TABLE BORDER=3 CELLPADDING=12>
Gi� trị mặc định đối với thuộc t�nh n�y bằng 1 .Kh�ng ấn định thuộc t�nh đ� bằng kh�ng để tr�nh văn bản trong � s�t với đường viền(Tuy nhi�n, bạn c� thể ấn định bằng 0 nếu muốn)
nếu ch�ng ta thay CELLPADING bằng CELLSPACING , ch�ng ta sẽ c� một kết quả hơi kh�c
<TABLE BORDER=3 CELLSPACING=12>
Gi� trị mặ định đối với CELLSPACING l� 2
Đương nhi�n , ch�ng ta c� thể kết hợp c�c thuộc t�nh n�y:
<TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12>
B�I 4 : M�U NỀN V� XỬ L� BẢNG
Lọai bỏ c�c thuộc t�nh CELLPADDING v� CELLSPACING để trở lại bảng đơn giản trước đ�y:
Một đặc trưng cool của c�c tr�nh duyệt mới hơn l� khả năng ấn định c�c m�u nền cho một � bảng, h�ng hoặc cả bảng . Bạn sử dụng BGCOLOR giống như bạn thực hiện thẻ <BODY>
<TABLE BORDER=3 BGCOLOR="#FFCC66">
<TR BGCOLOR="#FF9999"><TD>Ed</TD><TD>Tom</TD><TD>Rick</TD></TR>
<TR BGCOLOR="#99CCCC"><TD>Larry</TD><TD>Curly</TD><TD>Mo</TD></TR>
<TR BGCOLOR="#FFCCFF"><TD>Ed</TD><TD>Tom</TD><TD>Rick</TD></TR>
<TR><TD BGCOLOR="#FF0000">Larry</TD><TD>Curly</TD><TD BGCOLOR="#3366FF">Mo</TD></TR>
Biểu đồ sau được sử dụng để chọn c�c m�u nền:
B�I 5 : TẠO DANH S�CH
Ch�ng ta thử thực hiệnmột v�i thứ để xem những g� x�y ra .
Sau đ�y l� một danh s�ch kh�ng c� thứ tự
C�ng thức l�m b�nh t�o tr�n đ� đầy đủ th�nh phần cần thiết rồi, nhưng giả sử ch�ng ta muốn đưa n� v�o một bảng như sau:
Bởi v� ch�ng ta muốn n� ở b�n một ảnh t�o
Ch�ng ta c� thể sử dụng một bảng để thực hiện điều đ� !
Khi t�m hiểu hoặc thiết lập một bảng , lu�n lu�n dễ hơn khi c� c�c đường viền
Ch�ng ta thực hiện từng bước , n� kh� đơn giản !
Bắt đầu với Ed
Thay Ed bằng danh s�ch kh�ng c� thứ tự :
<TABLE BORDER=3><TR>
<TD>Ingredients for Apple Pie<UL><LI>Apples<LI>Flour<LI>Sugar<LI>Cinnamon</UL></TD>
</TR></TABLE>
Nhớ l� kh�ng c� c�c chỉ lệnh kh�c, bảng sẽ tự tạo k�ch thước đủ lớn để chứa dữ liệu.V� vậy trong trường hợp n�y , kh�ng cần đến thuộc t�nh k�ch thước.
Kế tiếp ch�ng ta sẽ mở rộng bảng c� đủ k�ch thước của cửa sổ tr�nh duyệt:
<TABLE BORDER=3 WIDTH=100%><TR>
Giờ ch�ng ta cần tạo một � thứ hai ..Ch�ng ta muốn � b�n tr�i nhỏ hơn � b�n phải:
<TD WIDTH=40%></TD>
<TD WIDTH=60%>Ingredients for Apple Pie<UL><LI>Apples<LI>Flour<LI>Sugar<LI>Cinnamon</UL></TD>
B�y giờ l� l�c thuận tiện để ch�p appepie.gif v�o thư liệu họat động của bạn
Đưa ảnh v�o � thứ nhất:
<TD WIDTH=40%><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>
Giờ chỉ c�n căn ảnh b�nh t�o về b�n phải � v� bỏ thuộc t�nh đường viền:
<TABLE BORDER=0 WIDTH=100%><TR>
<TD WIDTH=40% ALIGN=RIGHT><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>
B�I 6 : LỒNG BẢNG
Ch�ng ta c� thể sử dụng một bảng ở trong một bảng kh�ng ?
Ch�ng ta thực hiện.Bắt đầu bảng Ed thật nhỏ .
Tạo một bảng lớn hơn
<TABLE BORDER=3 WIDTH=200 HEIGHT=100><TR><TD>Ed</TD></TR></TABLE>
Thay Ed bằng một bảng Ed thật nhỏ :
<TABLE BORDER=3 WIDTH=200 HEIGHT=100><TR><TD>
</TD></TR></TABLE>
Bảng của ch�ng ta c� thể căn giữa rất dễ:
<CENTER><TABLE BORDER=3 WIDTH=200 HEIGHT=100><TR><TD>
</TD></TR></TABLE></CENTER>
sau đ�y l� trường hợp bảng c� thể giải quyết một vấn để thường gặp .Nghĩa l� bạn c� � tưởng về ảnh động gif .Nhưng ảnh bạn muốn sử dụng kh� lớn .V� bạn biết ảnh động gif về cơ bản l� một lọat c�c ảnh gif được hiển thị nối tiếp, bạn thấy sợ về k�ch thước ảnh n�y v� người xem sẽ kh�n thấy hấp dẫn với ảnh (700K) của bạn .kh�ng những như thế m� c�n v� c�n k�ch thước của n� tr�nh duyệt của họ sẽ hiển thị n� rất mệt . bạn cần cắt bớt bn� v� hiển thị bằng một bảng .
Sau đ�y l� một bảng tương tự c� CELLSPACING
Chỉ một phần của ảnh (đ�i mắt) l� h�nh ảnh động
Sau đ�y l� HTML cho bảng đ�(Kh�ng nhất thiết phải sử dụng chủ hoa):
<TABLE WIDTH=591 BORDER=0 CELLSPACING=0 CELLPADDING=0><CAPTION ALIGN=top><FONT SIZE=6><STRONG><EM>Netscape vs. Microsoft?</EM></STRONG></FONT></CAPTION>
<TR><TD ROWSPAN=3><IMG SRC="dragon/dragon4.gif" WIDTH=250 HEIGHT=406></TD><TD><IMG SRC="dragon/dragon3.gif" WIDTH=122 HEIGHT=109></TD><TD ROWSPAN=3><IMG SRC="dragon/dragon5.gif" WIDTH=219 HEIGHT=406></TD></TR>
<TR><TD><IMG SRC="dragon/anidrag.gif" WIDTH=122 HEIGHT=50></TD></TR>
<TR><TD><IMG SRC="dragon/dragon2.gif" WIDTH=122 HEIGHT=247></TD></TR>
Sau đ�y l� bố cục :
dragon3.gif
dragon2.gif