Sự Khởi Đầu Mới: PHẦN IV: TẠO BẢNG

Thứ Ba, 11 tháng 9, 2012 -

PHẦN IV: TẠO BẢNG

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)


<--This---	----is----	-----a----	---Table--	----Row-->
			cell
	cell			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 "

<HTML> <HEAD> <TITLE>Joe's a swell guy</TITLE> </HEAD> <BODY>

</BODY>
</HTML>
Mỗi bảng cần ít nhất một hàng:

<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>
và đương nhiên mỗi hàng phải có ít nhất một cell dữ liệu bảng:

<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

Để 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

<TABLE> <TR> <TD></TD> </TR> </TABLE>

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

Ed

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à

<TABLE> <TR> <TD>Ed</TD> </TR> </TABLE>

Cung cấp cho chúng ta là

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>

Ed, Rick and Tom

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>

Ed, Rick and Tom

Khi có chiều rộng 75%

<TABLE BORDER=3 WIDTH=75%> <TR> <TD>Ed, Rick and Tom</TD> </TR> </TABLE>

Ed, Rick and Tom

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.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=LEFT VALIGN=MIDDLE>Ed</TD> </TR> </TABLE>

Để đượ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 đó :

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD>Ed</TD> </TR> </TABLE>

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>

Tom

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>

Tom

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>

Tom

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>

Tom

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>

Tom

Rick

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>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

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:

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
</TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly

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>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

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>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

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>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

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>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

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:

<TABLE BORDER=3>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

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>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

<TABLE BORDER=3> <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> </TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

<TABLE BORDER=3> <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> </TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

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ự

Apples
Flour
Sugar
Cinnamon

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:

Apples
Flour
Sugar
Cinnamon

Bởi vì chúng ta muốn nó ở bên một ảnh táo

Apples
Flour
Sugar
Cinnamon

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

Ingredients for Apple Pie

Apples
Flour
Sugar
Cinnamon

Chúng ta thực hiện từng bước , nó khá đơn giản !

Bắt đầu với Ed

<TABLE BORDER=3> <TR> <TD>Ed</TD> </TR> </TABLE>

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>

Ingredients for Apple Pie

Apples
Flour
Sugar
Cinnamon

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>
<TD>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Cinnamon
</UL>
</TD>
</TR>
</TABLE>

Ingredients for Apple Pie

Apples
Flour
Sugar
Cinnamon

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:

<TABLE BORDER=3 WIDTH=100%> <TR>
<TD WIDTH=40%></TD>
<TD WIDTH=60%>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Cinnamon
</UL>
</TD>
</TR>
</TABLE>

Ingredients for Apple Pie

Apples
Flour
Sugar
Cinnamon

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:

<TABLE BORDER=3 WIDTH=100%> <TR>
<TD WIDTH=40%><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>
<TD WIDTH=60%>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Cinnamon
</UL>
</TD>
</TR>
</TABLE>

Ingredients for Apple Pie

Apples
Flour
Sugar
Cinnamon

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>
<TD WIDTH=60%>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Cinnamon
</UL>
</TD>
</TR>
</TABLE>

Ingredients for Apple Pie

Apples
Flour
Sugar
Cinnamon

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ỏ .
<TABLE BORDER=3> <TR> <TD>Ed</TD> </TR> </TABLE>

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>
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
</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>
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
</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 .
<CENTER> <TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD>
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>

<CENTER> <TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD>
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>

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>
</TABLE>
Sau đây là bố cục :

dragon4.gif

dragon3.gif

dragon5.gif

anidrag.gif

dragon2.gif

Sự Khởi Đầu Mới

Cảm Ơn Các Bạn Đã Ghé Thăm Site hahuyhoanglong

PHẦN IV: TẠO BẢNG

0 nhận xét:

Đăng nhận xét

Liên Hệ Email

Recent Posts

Danh Mục Bài Viết!!!

Bài viết yêu Thích