1. Bài học
Việc trình bày trang Web theo dạng bảng sẽ làm cho trang Web của bạn chuyên nghiệp hơn. Với dạng bảng bạn có thể chia trang Web thành nhiều phần, bạn có thể áp dụng các kiến thức đã học để trang trí riêng cho từng phần...
Khi xây dựng bảng, bạn hãy nhớ quy tắc sau: bắt đầu từ ô cao nhất bên trái, tiếp theo xây dựng các ô của hàng đầu tiên, sau đó chuyển xuống hàng thứ hai, xây dựng các phần tử của hàng thứ 2...
--> --> --> --> ---> -->
|
----------------------------
|
--> --> --> --> ---> -->
16.1.a. Những tag cơ bản của bảng
Ðể tìm hiểu về các tag cơ bản của bảng, trước hết ta xét ví dụ sau.
<table border = 1>
<tr>
<td> Hàng 1 cột 1 </td>
<td> Hàng 1 cột 2 </td>
<td> Hàng 1 cột 3 </td>
</tr>
<tr>
<td> Hàng 2 cột 1 </td>
<td> Hàng 2 cột 2 </td>
<td> Hàng 2 cột 3 </td>
</tr>
</table>
Trong tag <table> ta thấy thuộc tính border có giá trị là 1, điều này nghĩa là vẽ 1 đường viền quanh bảng với độ dày là 1 điểm.
Mỗi hàng được xác định bởi <tr> và </tr> viết tắt của table row.
Mỗi ô được định nghĩa bởi <td> và </td> viết tắt của table data.
Ðể căn chỉnh lề trong mỗi ô, bạn thêm các thuộc tính sau vào tag <td>.
Chỉnh lề theo chiều ngang
<td align = left> sắp xếp về bên trái
<td align = right> sắp xếp về bên phải
<td align = center> sắp xếp vào giữa
1.b. Các hàng và cột
Bảng mà bạn tạo ở trên mới chỉ là bảng đơn giản với ba hàng và ba cột đều nhau.
Bạn hãy chú ý các bảng sau.
Bảng 1
Bảng 2
Bảng 3
Ðể tạo được những bảng như trên, chúng ta sử dụng các thuộc tính colspan và rowspan trong tag <td> ... </td>
Thuộc tính colspan=x có tác dụng mở rộng cột của bảng, ví dụ trong bảng 1 để mở rộng ô thứ 2 của hàng 1 ra rộng bằng hai cột bình thường ta đặt:
<td colspan = 2>Hàng 1 cột 2-3</td>
Thuộc tính rowspan có tác dụng mở rộng hàng của bảng, trong bảng 2 để mở rộng ô thứ 2 của hàng 2 ra rộng bằng 2 hàng bình thường ta đặt:
<td rowspan = 2>Hàng 2-3 cột 2</td>
16.1.c. Ðiều khiển xuống hàng trong một ô.
Trong một ô, nếu muốn giữ dòng văn bản trên một dòng, tức là không cho nó xuống hàng thì thêm thuộc tính NOWRAP vào trong tag <TD> hoặc <TH>.
16.1.d. Thêm đầu đề vào bảng (caption)
Ngay sau tag <table>, bạn gõ vào tag <catpion> tựa đề của bảng, và kết thúc bằng tag đóng </caption>
<table >
<caption align="center" valign="top"><u>Tựa đề của bảng</u> </caption >
<tr><td width="50%" align="center">Cột 1 - dòng 1</td>
<td width="50%">Cột 2 - dòng 1</td>
</tr>
<tr><td width="50%" align="center">Cột 1 - dòng 2</td>
<td width="50%"><p align="center">Cột 2 - dòng 2</td>
</tr>
</table>
</body>
Trong tag <caption> bạn thấy có thuộc tính valign="top", nghĩa là tạo tựa đề ở trên đỉnh của bảng. Nếu valign="bottom" thì tựa để của bảng sẽ ở đáy bảng.
16.1.e.Thêm các thông số cho các đường viền tạo ra bảng
Muốn thay đổi thông số của các đường tạo bảng ta thêm các thuộc tính cho tag <table> như sau:
<table border = X cellpadding = Y cellspacing = Z>
X: Chiều rộng đường viền ngoài bảng
Y: "Khoảng trắng" giữa dữ liệu bên trong ô và vách ngăn của ô
Z: Ðộ rộng của những đường bên trong bảng để chia các ô
Ví dụ bảng sau có tag <table> như sau:
<table border=3 cellpadding=4 cellspacing=8>
Khi border = 0 thì ta sẽ có một bảng không có bất kỳ một đường viền nào. Dùng bảng dạng này để sắp xếp văn bản theo các hàng thẳng đứng. Ðối với dữ liệu trong bảng bạn vẫn có thể áp dụng các tag đã học như ví dụ sau đây chia màn hình thành hai cột danh sách trong đó mỗi cột là một siêu liên kết
<div align=center>
<h2>Các Website ở việt nam</h2>
<table border="0" cellpadding =2 cellspacing =20>
<tr>
<td align=left><a href ="http://www.vnn.vn"> Công ty VASC - VNN</a> </td>
<td ><a href ="http://www.tlnet.com.vn"> Mạng Phương nam</a></td>
</tr>
<tr>
<td><a href ="http://www.fpt.vn">Công ty FPT</a></td>
<td ><a href ="http://www.saigonnet.vn">Sài gòn net</a></td>
</tr>
<tr>
<td><a href ="http://www.netnam.vn"> Công ty Netna@m</a></td>
<td><a href ="http://www.vinaone.com.vn">Mạng của Bộ thương mại</a></td>
</tr>
</table>
</div>
1.f.Thêm màu sắc cho bảng
Ðể tô màu cho bảng, ta thêm thuộc tính bgcolor với giá trị màu tương ứng vào các tag của bảng. Tô màu nền cho toàn bảng
<table bgcolor = #XXXXXX>
Tô màu nền cho 1 hàng
<tr bgcolor = #XXXXXX>
Tô màu nền cho 1 ô
<td bgcolor = #XXXXXX>
Trong đó XXXXXX là các giá trị màu
Ví dụ
Khi chưa tô màu cả bảng
Khi tô màu cả bảng bằng cách thêm thuộc tính bgcolor vào tag <table>
2.Thực hành
Bạn hãy ứng dụng các tag về xây dựng bảng để xây dựng một danh sách, ví dụ danh sách lớp. Yêu cầu bảng có thuộc tính border = 0 và mỗi tên trong danh sách là một siêu liên kết đến địa chỉ thư điện tử của người tương ứng. Sau khi đã xây dựng xong danh sách và siêu liên kết, bạn có thể thêm màu sắc vào bảng cho đẹp.
Latest topics
» Hướng dẫn làm nhiệm vụ GTA San AnDreas
by Dương Tiến Vinh Tue Jul 28, 2015 11:02 pm
» I-Ninja [Full PC]
by thanglun2 Sun Apr 26, 2015 4:53 pm
» Theme - Naruto ( Cực Hot Cực Hot )
by sayedn73 Fri Feb 13, 2015 10:14 am
» Dynasty Warriors 6 [Full PC]
by dungfa1992 Wed Dec 31, 2014 9:17 pm
» Gun Metal - Tranfomer Wars [Full PC]
by nghia6541 Tue Dec 30, 2014 9:11 am
» Theme :Sao Băng
by sayedn73 Sun Dec 21, 2014 9:41 am
» Theme dành cho fangirl(đặc biệt là fan DBSK)
by sayedn73 Sun Dec 21, 2014 9:31 am
» Share Code Viewtopic_body VBB By SockDust
by sayedn73 Sun Dec 21, 2014 8:12 am
» The House Of The Dead III [Full PC]
by kriskiller Sat Sep 13, 2014 9:36 am
» [Da Liễu] Bệnh vảy nến
by con_zubo Wed Nov 13, 2013 10:31 am
» Game Lego Batman (Full DVD)
by hotel1221 Mon May 27, 2013 11:02 am
» Game G-Force | Biệt Đội Chuột Lang (Full DVD)
by hotel1221 Mon May 27, 2013 10:52 am
» Game Phá Hàng Xóm 2
by hotel1221 Mon May 27, 2013 10:49 am
» Day Of The Zombie [Full PC]
by hotel1221 Sun May 26, 2013 6:25 pm
» Neighbours From Hell 1 + 2
by tuanvu0707 Wed Apr 10, 2013 10:10 am
by Dương Tiến Vinh Tue Jul 28, 2015 11:02 pm
» I-Ninja [Full PC]
by thanglun2 Sun Apr 26, 2015 4:53 pm
» Theme - Naruto ( Cực Hot Cực Hot )
by sayedn73 Fri Feb 13, 2015 10:14 am
» Dynasty Warriors 6 [Full PC]
by dungfa1992 Wed Dec 31, 2014 9:17 pm
» Gun Metal - Tranfomer Wars [Full PC]
by nghia6541 Tue Dec 30, 2014 9:11 am
» Theme :Sao Băng
by sayedn73 Sun Dec 21, 2014 9:41 am
» Theme dành cho fangirl(đặc biệt là fan DBSK)
by sayedn73 Sun Dec 21, 2014 9:31 am
» Share Code Viewtopic_body VBB By SockDust
by sayedn73 Sun Dec 21, 2014 8:12 am
» The House Of The Dead III [Full PC]
by kriskiller Sat Sep 13, 2014 9:36 am
» [Da Liễu] Bệnh vảy nến
by con_zubo Wed Nov 13, 2013 10:31 am
» Game Lego Batman (Full DVD)
by hotel1221 Mon May 27, 2013 11:02 am
» Game G-Force | Biệt Đội Chuột Lang (Full DVD)
by hotel1221 Mon May 27, 2013 10:52 am
» Game Phá Hàng Xóm 2
by hotel1221 Mon May 27, 2013 10:49 am
» Day Of The Zombie [Full PC]
by hotel1221 Sun May 26, 2013 6:25 pm
» Neighbours From Hell 1 + 2
by tuanvu0707 Wed Apr 10, 2013 10:10 am
No Comment.