Bạn muốn viết một trang Web?

Bài 7. Tạo bảng

Mở đầu Bài học Phần kết

Bạn hãy mở trang khuon.html trong Notepad và viết vào phần BODY các dòng sau:

<TABLE>
</TABLE>

Đó là các tags dùng để tạo một bảng. Trước khi đi tiếp bạn hãy save thay đổi vừa rồi vào trang07.html.


Bạn dùng attribute BORDER="n" trong tag TABLE để chọn bề dày của các đường viền, với n là bề dày đo bằng pixels.

<TABLE BORDER="1">
</TABLE>


Giữa các tags <TABLE></TABLE> bạn viết thêm:

<TABLE BORDER="1">
<TR></TR>
</TABLE>

Đó là các tags dùng để tạo một hàng (TR là chữ viết tắt của Table Row).


Giữa các tags <TR></TR> bạn viết thêm:

<TABLE BORDER="1">
<TR><TD></TD></TR>
</TABLE>

Đó là các tags dùng để tạo một ô trong hàng (TD là chữ viết tắt của Table Data).


Hãy thêm một ô nữa vào hàng nói trên:

<TABLE BORDER="1">
<TR><TD></TD><TD></TD></TR>
</TABLE>


Và thêm một hàng thứ hai y như hàng trên:

<TABLE BORDER="1">
<TR><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD></TR>
</TABLE>


Bây giờ hãy ghi cái gì đó vào trong các ô nói trên:

<TABLE BORDER="1">
<TR><TD>Hàng 1 Cột 1</TD><TD>Hàng 1 Cột 2</TD></TR>
<TR><TD>Hàng 2 Cột 1</TD><TD>Hàng 2 Cột 2</TD></TR>
</TABLE>

Sau khi Save và mở trang07.html trong Internet Explorer bạn sẽ thấy một bảng như thế này:

Hàng 1 Cột 1Hàng 1 Cột 2
Hàng 2 Cột 1Hàng 2 Cột 2


Khi nội dung của các ô dài quá, bạn cũng có thể viết tách rời các ô ra cho dễ phân biệt, như trong ví dụ sau:

<TABLE BORDER="1">
<TR>
<TD>Hàng 1 Cột 1</TD>
<TD>Hàng 1 Cột 2</TD>
</TR>
<TR>
<TD>Hàng 2 Cột 1</TD>
<TD>Hàng 2 Cột 2</TD>
</TR>
</TABLE>


Sau đây là các attributes của tag <TABLE>:

BGCOLOR="#nnnnnn" Dùng để chọn màu nền cho cả bảng, #nnnnnn là mã số của màu.
BACKGROUND="file" Dùng để chọn ảnh nền cho cả bảng, file là đường dẫn và tên của ảnh nền.
BORDER="n" Dùng để định bề dày của các đường viền bảng, n là bề dày đo bằng pixels.
WIDTH="n", HEIGHT="n" Xác định chiều rộng và chiều cao của bảng, n là chiều rộng hay chiều cao đo bằng pixels hay bằng phần trăm kích thước cửa sổ browser.
CELLSPACING="n" Dùng để định khoảng cách giữa các ô trong bảng, n là khoảng cách đo bằng pixels.
CELLPADDING="n" Dùng để định khoảng cách giữa nội dung trong ô với đường viền của ô, n là khoảng cách đo bằng pixels.


Bạn cũng có thể tạo những ô trải rộng trên nhiều cột hay nhiều hàng bằng cách dùng các attributes COLSPAN="n"ROWSPAN="n", với n là số cột hay số hàng mà ô đó chiếm. Bạn hãy xem các ví dụ sau:

<TABLE BORDER="1">
<TR><TD COLSPAN="2">Hàng 1 Cột 1-2</TD></TR>
<TR><TD>Hàng 2 Cột 1</TD><TD>Hàng 2 Cột 2</TD></TR>
</TABLE>

Hàng 1 Cột 1-2
Hàng 2 Cột 1Hàng 2 Cột 2

<TABLE BORDER="1">
<TR><TD ROWSPAN="2">Hàng 1-2 Cột 1</TD><TD>Hàng 1 Cột 2</TD></TR>
<TR><TD>Hàng 2 Cột 2</TD></TR>
</TABLE>

Hàng 1-2 Cột 1Hàng 1 Cột 2
Hàng 2 Cột 2


Sau đây là các attributes của tag <TD>:

BGCOLOR="#nnnnnn" Dùng để chọn màu nền cho một ô, #nnnnnn là mã số của màu.
BACKGROUND="file" Dùng để chọn ảnh nền cho một ô, file là đường dẫn và tên của ảnh nền.
WIDTH="n" Xác định chiều rộng của ô, n là chiều rộng đo bằng pixels hay bằng phần trăm chiều rộng của bảng.
COLSPAN="n" Ô trải rộng trên n cột.
ROWSPAN="n" Ô trải rộng trên n hàng.
ALIGN="v" Nội dung trong ô được sắp thẳng hàng ở đường biên trái, ở giữa hay ở đường biên phải của ô, theo giá trị của vLEFT (là giá trị mặc định), CENTER hay RIGHT.
VALIGN="v" Nội dung trong ô được sắp xếp theo đường biên trên, ở giữa hay theo đường biên dưới của ô, theo giá trị của vTOP, MIDDLE (là giá trị mặc định) hay BOTTOM.


Và bây giờ bạn sẽ thực tập dùng bảng để tạo một sitemap, là một hình ảnh mà khi bạn click lên những phần khác nhau của nó thì bạn sẽ được đưa tới những trang Web khác nhau.

Bạn hãy save ba ảnh sau đây vào folder hinhanh trong folder làm việc của bạn, giữ nguyên tên của chúng là wagon_1.gif, wagon_2.gif và wagon_3.gif.


Công việc tiếp theo là tạo một bảng như sau, vì nó có dạng phù hợp để ghép ba ảnh trên:

<TABLE BORDER="1">
<TR>
<TD>Hàng 1 Cột 1</TD>
<TD ROWSPAN="2">Hàng 1-2 Cột 2</TD>
</TR>
<TR>
<TD>Hàng 2 Cột 1</TD>
</TR>
</TABLE>

Hàng 1 Cột 1Hàng 1-2 Cột 2
Hàng 2 Cột 1


Thay thế nội dung trong các ô bằng các ảnh:

<TABLE BORDER="1">
<TR>
<TD><IMG SRC="hinhanh/wagon_2.gif" WIDTH="120" HEIGHT="70"></TD>
<TD ROWSPAN="2"><IMG SRC="hinhanh/wagon_1.gif" WIDTH="100" HEIGHT="111"></TD>
</TR>
<TR>
<TD><IMG SRC="hinhanh/wagon_3.gif" WIDTH="120" HEIGHT="41"></TD>
</TR>
</TABLE>


Bỏ đi đường viền, khoảng cách giữa các ô và khoảng cách giữa ảnh với đường viền bằng cách dùng các attributes BORDER="0", CELLSPACING="0"CELLPADDING="0" trong tag TABLE:

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD><IMG SRC="hinhanh/wagon_2.gif" WIDTH="120" HEIGHT="70"></TD>
<TD ROWSPAN="2"><IMG SRC="hinhanh/wagon_1.gif" WIDTH="100" HEIGHT="111"></TD>
</TR>
<TR>
<TD><IMG SRC="hinhanh/wagon_3.gif" WIDTH="120" HEIGHT="41"></TD>
</TR>
</TABLE>


Cuối cùng bạn hãy biến các ảnh thành những liên kết tới ba trang khác nhau của bạn, chẳng hạn như:

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD><A HREF="trang02.html"><IMG SRC="hinhanh/wagon_2.gif" WIDTH="120" HEIGHT="70" BORDER="0"></A></TD>
<TD ROWSPAN="2"><A HREF="trang01.html"><IMG SRC="hinhanh/wagon_1.gif" WIDTH="100" HEIGHT="111" BORDER="0"></A></TD>
</TR>
<TR>
<TD><A HREF="trang03.html"><IMG SRC="hinhanh/wagon_3.gif" WIDTH="120" HEIGHT="41" BORDER="0"></A></TD>
</TR>
</TABLE>

Trong đó chúng ta đã bỏ đi đường viền màu xanh quanh các ảnh liên kết bằng cách dùng attribute BORDER="0" trong tag IMG. Bây giờ khi click lên những phần có ghi chữ Pics, Music hay Mail trên ảnh, bạn sẽ được đưa tới ba trang Web khác nhau.

previous <-- Trang trước Tiếp theo --> next

Mở đầu Bài:

1 -  2 -  3 -  4 -  5 -  6 -  7 -  8 -  9

Phần kết


nguyen-chi@hcm.vnn.vn