Trang chủ
Bảng (Table)
| Hãy tạo một bảng... |
|
|||||||||||||||||
| ...và hoàn tất cuộc cách mạng hóa trên những trang Web thông thường |
||||||||||||||||||
Mục đích
Sau bài học này bạn sẽ có thể:
- Thiết kế một bảng với những hàng và cột văn bản trình bày theo dạng lưới trên trang Web.
- Viết HTML tạo sự trộn lẫn phức tạp giữa hình ảnh và văn bản.
- Viết HTML cho một bảng ẩn để trình bày các cột dữ kiện.
- Tạo một bảng với những ô có màu khác nhau.
Bài học
Chú ý: Nếu bạn chưa có tài liệu từ những bài học trước, bạn có thể download ngay bây giờ. Bạn cũng có thể xem trang kiểm tra để biết web browser đang sử dụng có hổ trợ cho những tag trong bài này không.Bảng được giới thiệu trong HTML 3.0 và được NetScape phát triển thêm để tạo ra một hướng thiết kế khác cho trang Web. Chúng cung cấp một cấu trúc để tổ chức những phần tử HTML trong trang thành dạng "lưới" (grid). Một trong những ứng dụng rõ ràng nhất của bảng là khi bạn phải định dạng... một bảng theo từng cột! Nhưng bảng cũng mở ra một chân trời mới cho nhiều khả năng trình bày trang khác nhau.
Dạng HTML cho bảng trông có thể rất phức tạp - nhưng chúng ta sẽ bắt đầu một cách đơn giản với việc xây dựng một vài bảng đơn giản trong bài Volcano Web.
Đối với những người mới bắt đầu, hãy nhớ kỹ khái niệm sau:
Các bảng được xây dựng bắt đầu từ phần tử cao nhất bên trái, tiếp theo xây dựng các phần tử của hàng đầu tiên, xong chuyển đến hàng thứ hai, xây dựng các phần tử của hàng thứ hai....
--> --> --> --> --> --> ___________________________| | --> --> --> --> -->Chúng ta gọi mỗi ô lưới trong một bảng là một phần tử (cell)
Những tag cơ bản của Bảng
HTML cho cấu trúc cơ bản của một bảng được trình bày như dưới đây:| HTML | Kết quả | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
<table border=1>
<tr>
<td>Row 1 col 1</td>
<td>Row 1 col 2</td>
<td>Row 1 col 3</td>
</tr>
<tr>
<td>Row 2 col 1</td>
<td>Row 2 col 2</td>
<td>Row 2 col 3</td>
</tr>
<tr>
<td>Row 3 col 1</td>
<td>Row 3 col 2</td>
<td>Row 3 col 3</td>
</tr>
</table>
|
|
| Chỉnh lề theo chiều ngang | Chỉnh lề theo chiều dọc |
|---|---|
|
|
<td align=left valign=bottom>
Dạng HTML này sẽ hiển thị một phần tử với các thành phần dọc theo bên trái và từ
dưới lên.
Các Hàng và Cột
Bảng ở ví dụ trên trông rất đơn giản và vuông vức - ba hàng và ba cột. Bây giờ hãy xem chúng ta làm được gì khi sử dụng các tag thuộc tính colspan và rowspan trong tag <td>...</td>.| HTML | Kết quả | ||||||||
|---|---|---|---|---|---|---|---|---|---|
<table border>
<tr>
<td>Row 1 col 1</td>
<td align=center colspan=2>
Row 1 col 2-3</td>
</tr>
<tr>
<td>Row 2 col 1</td>
<td>Row 2 col 2</td>
<td>Row 2 col 3</td>
</tr>
<tr>
<td>Row 3 col 1</td>
<td>Row 3 col 2</td>
<td>Row 3 col 3</td>
</tr>
</table>
|
** Lưu ý đến thuộc tính cho phần tử thứ hai của hàng đầu tiên - nó mở rộng ra thành 2 cột. Chúng ta cũng chỉnh văn bản vào chính giữa của phần tử này này. |
||||||||
|
|||||||||
| Được rồi, chúng ta đã biết một phần tử mở rộng trong hai cột - giờ đây, chúng ta sẽ tạo một phần tử mở rộng trong hai hàng. Hãy nhớ rằng HTML xây dựng bảng từ bên trái, băng qua hàng, rồi xuống dưới, rồi băng qua... | |||||||||
| HTML | Kết quả | ||||||||
<table border=1>
<tr>
<td>Row 1 col 1</td>
<td align=center colspan=2>
Row 1 col 2-3</td>
</tr>
<tr>
<td>Row 2 col 1</td>
<td valign=top rowspan=2>
Row 2 col 2</td>
<td>Row 2 col 3</td>
</tr>
<tr>
<td>Row 3 col 1</td>
<td>Row 3 col 3</td>
</tr>
</table>
|
|
||||||||
Một bảng dữ liệu
Trong trang Introduction của chúng ta có một bảng ("Volumes of Some Well Known Eruptions") mà chúng ta đã tạo ra lần đầu tiên trong bài 9 bằng cách sử dụng tag preformat <pre>...</pre>. Giờ đây chúng ta sẽ cải thiện nó bằng cách sử dụng tag table.- Mở tập tin intro.htm trong trình soạn thảo.
- Xoá bỏ mọi thứ bên trong tag <pre>...</pre> và cả chính nó.
- Thay vào chính chỗ đó bằng:
<table border> <tr> <th>Eruption</th> <th>Date</th> <th>Volume in km<sup>3</sup></th> </tr> <tr> <td>Paricutin, Mexico</td> <td align=center>1943</td> <td align=center>1.3</td> </tr> <tr> <td>Mt. Vesuvius, Italy</td> <td align=center>79 A.D.</td> <td align=center>3</td> </tr> <tr> <td>Mount St. Helens,<br>Washington</td> <td align=center>1980</td> <td align=center>4</td> </tr> <tr> <td>Krakatoa, Indonesia</td> <td align=center>1883</td> <td align=center>18</td> </tr> <tr> <td>Long Valley, California</td> <td align=center>pre-historic</td> <td align=center>>450 & <700</td> </tr> <tr> <td>Yellowstone, Wyoming</td> <td align=center>pre-historic</td> <td align=center>400</td> </tr> </table>Chú ý: Hãy nhìn dòng HTML đầu tiên. Tag Table Header là <th>...</th> có kết quả giống y như tag <td>...</td> ngoại trừ là mọi văn bản trong nó đều được in đậm và tất cả các thành phần của nó đều tự động được canh giữa.
- Lưu trữ và Nạp lại trong Web browser. Bạn có thể so sánh với
bản mẫu để xem nó nên xuất hiện như thế nào
tại lúc này.
Chú ý: Bảng có thể xem không được rõ khi sử dụng nền màu đen.
- Bây giờ hãy thêm một vài thứ vào trong bảng của chúng ta.
- Một vài browser cho phép bạn chỉ định một vài thông số cho các đường tạo ra bảng.
Chúng là các thuộc tính của tag <table>:
<table border=X cellpadding=Y cellspacing=Z>trong đó X là chiều rộng (tính bằng điểm) đường viền bên ngoài của bảng. Thuộc tính cellpadding cho biết có bao nhiêu "khoảng trắng" giữa khối bên trong phần tử và vách ngăn - trị Y càng lớn càng làm cho các phần tử (cell) lớn hơn do "độn thêm" (padding). Thuộc tính cellspacing cho biết độ rộng (tính bằng điểm) của những đường bên trong bảng để phân chia các phần tử. Hãy sửa tag <table> của bạn thành:
<table border=3 cellpadding=4 cellspacing=8> - Tag <caption> đặt một chuỗi văn bản (được chỉnh vào giữa theo
chiều rộng) như là tiêu đề cho bảng. Hãy sửa đổi những dòng trong bảng của bạn thành:
<table border=3 cellpadding=4 cellspacing=8> <caption><b><font size=+1> Volumes of Some Well-Known Volcanic Eruptions</font></b></caption>Bạn có thể lồng vào trong tag <caption> các HTML khác; nhưng phải nhớ là tag này phải nằm trong tag <table>...</table>. - Và để tăng sự thích thú, hãy tô màu đoạn văn trong tag
<th>...</th> thành màu cam (để biết thêm về tô màu cho văn bản,
xem bài 19). Điều chỉnh phần HTML cho hàng đầu tiên thành:
<tr> <th><font color=#EE8844>Eruption</font></th> <th><font color=#EE8844>Date</font></th> <th><font color=#EE8844>Volume in km<sup>3</sup></font></th> </tr> - Và hãy di chuyển bảng này vào giữa trang. Nếu browser của bạn có hổ trợ tag <center>...</center>, thì chỉ cần bao quanh bảng bằng tag này. Để biết thêm về chỉnh lề cho văn bản, xem lesson 20.
- Lưu trữ và Nạp lại trong web browser của bạn. Bạn có thể so sánh với ví dụ mẫu để biết bảng này nên như thế nào. Vẫn tốt chứ, phải không?
- Cuối cùng, chúng ta sẽ thêm một cột về phía bên trái -
chúng ta muốn ghép nhóm các núi lửa đã phun lại trong lịch sử (bốn hàng đầu tiên)
và các núi lửa thời tiền sử (hai dòng cuối). Bây giờ chúng ta sẽ thêm một phần tử rỗng
bằng cách thêm <th></th> vào hàng đầu tiên - lý do của
việc làm này sẽ được làm rõ hơn trong những bước sắp tới khi chúng ta xây dựng cột
mới này .
<tr> <th></th> <th><font color=#EE8844>Eruption</font></th> <th><font color=#EE8844>Date</font></th> <th><font color=#EE8844>Volume in km<sup>3</sup></font></th> </tr> - Chúng ta đến dòng đầu tiên và thêm một phần tử ở đầu tiên mà phần tử này
sẽ mở rộng ra 4 hàng:
<tr> <td rowspan=4> <font color=#EE8844> <i>eruptions<br> observed<br> by humans</i> </font></td> <td>Paricutin, Mexico</td> <td align=center>1943</td> <td align=center>1.3</td> </tr>Chú ý: Chúng ta đã thêm một vài tag <br> để cột đầu tiên này không trở nên quá rộng. Bạn có thể tự đánh giá khi bỏ qua những tag này.
- Và trong hàng thứ năm, chúng ta thêm một phần tử mà nó được mở rộng trong
hai hàng:
<tr> <td rowspan=2> <font color=#EE8844> <i>inferred<br> by study<br> of deposits</i> </font></td> <td>Long Valley, California</td> <td align=center>pre-historic</td> <td align=center>>450 & <700</td> </tr> - Lưu trữ và Nạp lại một lần nữa trong browser của bạn. Bạn có thể so sánh với bài mẫu để biết kết quả lúc này nên như thế nào. Đây là tất cả những gì chúng ta sẽ thêm vào bảng này.
Bảng không nhìn thấy hay Bảng Ma
Một bảng cùng với những đường viền thì rất tiện lợi nhưng đôi khi chúng ta muốn tạo nên một sự trình bày ở dạng lưới và không muốn có các đường viền. Chúng ta gọi đó là các bảng "ma" (phantom) vì người đọc không nhìn thấy rõ ràng đó là một bảng. Một bảng ma được xây dựng theo cách giống như bảng mà chúng ta đã thực hiện ở trên ngoại trừ tag <table> có dạng như sau: <table>
hoặc
<table border=0>
Trên một vài browser, khi không có thuộc tính border sẽ làm cho nó hiển thị một bảng
không có bất kỳ đường viền nào. Trên vài browser khác, bạn cần phải cài đặt border là
0 điểm để tạo ra hiệu quả này.
Nếu bạn xem lại phần gần đầu của trang này, thật sự nó là một bảng ma mà trong đó
có một phần tử của nó lại là một bảng có đường viền! Tuy vậy, chúng ta hãy cứ tiếp tục.
Để làm ví dụ, chúng ta sẽ định dạng lại tập tin usa.htm (Volcanoes in the USA)
thành dạng có hai cột. Thay vì tạo các đoạn văn
được sắp đặt thẳng đứng dựa theo độ rộng của trang,
chúng ta sẽ làm chúng giống như bản phác họa sau:
| XXXXX [tiêu đề] |
XXXXX
[tiêu đề] |
||
xxxxx xxxxx xxxx
xxx xx xxxxx xx xx
xxxx xxxxx xxxxx
|
xxx xx x xxxx
xxx xx x x xx xx
xxxx xxxxx xx
x xxxxx xxx xxxxx
|
_______
| img |
| |
|_____|
|
[hình liên kết đến hình lớn] |
| xxx xx xx [siêu liên kết đến hình lớn] |
|||
- Mở tập tin usa.htm trong trình soạn thảo.
- Tìm phần sau đây:
<font size=+1><B>Mount St Helens</B></font><br> On May 18, 1980, after a long period of rest, this quiet mountain in Washington provided <a href="msh.htm">detailed observations</a> on the mechanics of highly explosive eruptions. <p> <font size=+1><B>Long Valley</B></font><br> This field seismometer measures earthquakes associated with subsurface volcanic forces and may help to predict future events. It sits on a plateau known as the "Volcanic Tableland" formed by a major eruption 600,000 years ago.<p> <a href="../pictures/seismo.jpg"> <img src="../pictures/stamp.gif"> -- [full size image] --</a>và thay thế nó bằng đoạn HTML sau:<table cellpadding=6> <tr> <td><font size=+1><B>Mount St Helens</B></font></td> <td colspan=2><font size=+1><B>Long Valley</B></font></td> </tr> <tr> <td valign=top>On May 18, 1980, after a long period of rest, this quiet mountain in Washington provided <a href="msh.htm"> detailed observations</a> on the mechanics of highly explosive eruptions. </td> <td valign=top> This field seismometer measures earthquakes associated with subsurface volcanic forces and may help to predict future events. It sits on a plateau known as the "Volcanic Tableland" formed by a major eruption 600,000 years ago. </td> <td valign=top><a href="../pictures/seismo.jpg"> <img src="../pictures/stamp.gif"></a> </td> </tr> <tr> <td colspan=3 align=right> <a href="../pictures/seismo.jpg"> -- [full size image] --</td> </tr> </table>Chú ý: Hãy xem cẩn thận dạng HTML ở đây. Thật sự chúng ta đã sử dụng một bảng có 3 cột - đoạn văn đầu tiên (Mount St Helens) ở trong cột bên trái. Còn cột bên phải bao gồm một cột văn bản và một cột khác có một ảnh nhỏ. Hàng dưới cùng được chỉnh lề phải và mở rộng trong 3 cột được dùng để nối liên kết siêu văn bản đến một hình ảnh giống như hình thu nhỏ này nhưng lớn hơn.
- Lưu trữ và Nạp lại một lần nữa trong web browser.
Chia đoạn một danh sách dài
Một cách sử dụng khác nữa của bảng là đổi dạng cho một danh sách dài (tạo bởi tag list , xem bài 6). Danh sách được kéo dài theo trang, và rất là có giá trị nếu chúng ta có thể sử dụng thêm được phân bên phải của trang. Hiệu quả là sự chuyển dạng của danh sách:| Danh sách Dài | Cột 1 | Cột 2 | |
|---|---|---|---|
<ul>
<li> xxxxxx
<li> xxxx xxxx
<li> xxx x xxxx
<li> xxx xxxxx
<li> xx x xxxxx
<li> xxx xx
<li> xxxx x
<li> xxx x xxx
</ul>
|
thành |
<ul>
<li> xxxxxx
<li> xxxx xxxx
<li> xxx x xxxx
<li> xxx xxxxx
</ul>
|
<ul>
<li> xxx xx
<li> xxxx x
<li> xxx x xxx
</ul>
|
- Mở tập tin proj.htm trong trình soạn thảo.
- Tìm danh sách <ul>...</ul> bên dưới tiêu đề
References và nhập như sau :
<table> <tr> <td valign=top> <ul> <li><A HREF="http://www.avo.alaska.edu/"> Alaska Volcano Observatory</A> <li><A HREF="http://vulcan.wr.usgs.gov/home.html"> Cascades Volcano Observatory</A> <li><A HREF= "http://www.dartmouth.edu/pages/rox/volcanoes/elecvolc.html"> The Electronic Volcano</A> <li><A HREF="http://www.geo.mtu.edu/volcanoes/"> Michigan Tech Volcanoes Page</a> <li><A HREF="http://www.geo.mtu.edu/eos/"> NASA Earth Observing System (EOS) IDS Volcanology Team</A> </ul> </td> <td valign=top> <ul> <li><A HREF= "http://spso2.gsfc.nasa.gov/NASA_FACTS/volcanoes/volcano.html"> NASA Facts: Volcanoes and Global Climate Change</A> <li><A HREF= "http://www.ngdc.noaa.gov/seg/hazard/hazards.html"> NGDC Natural Hazards Data</a> <li><a href= "gopher://hoshi.cic.sfu.ca:5555/11/epix/topics/volcano"> Volcano Listserv</a> <li><a href= "http://www.soest.hawaii.edu/hvo"> Volcano Watch Newsletter</a> <li><a href= "http://seawifs.gsfc.nasa.gov/JASON/HTML/EXPEDITIONS_JASON_6_home.html"> JASON Project VI: Island Earth</a> <li><A HREF="http://volcano.und.nodak.edu/"> VolcanoWorld</A> </ul> </td> </tr> </table>Chú ý: chúng ta chỉ lấy danh sách đi <ul>...</ul> và chia nó thành hai danh sách. Mỗi một danh sách là một phần tử của một bảng ma có một hàng và hai cột.
- Lưu trữ và Reload trong Web browser. Bạn có thể so sánh với mẫu để biết bảng nên có dạng như thế nào tại đây.
Màu sắc của bảng
Một vài browser hiện nay hổ trợ để tô màu bảng, hàng và những cell của phantom table. Thật ra, chúng ta đã sử dụng nó trong suốt tài liệu này - trong trang Giới thiệu , trong Mục Lục, và trong các bài khi trình bày các ví dụ HTML. Bạn có thể xem trang kiểm tra cuối cùng để biết browser của bạn có hổ trợ việc tô màu cho bảng không.Chúng ta sẽ sử dụng mã màu hệ thập lục phân đã biết trong bài 16 để tô màu nền của những trang Web và trong bài 18 để tô màu chữ.
Dưới đây là một ví dụ đơn giản về việc chèn màu bgcolor=#FF0000 trong các tag <table>:
| Phần của Bảng | Dạng HTML |
|---|---|
| bảng Tô màu nền cho toàn bảng |
<table bgcolor=#880000>
|
| hàng tô màu nền cho một hàng đơn |
<tr bgcolor=#880000>
|
| phần tử tô màu nền cho một phần tử |
<td bgcolor=#880000>
|
- Mở tập tin intro.htm trong trình soạn thảo.
- Trước hết tìm tất cả tag <th> để giữ các tiêu đề của cột:
<th><font color=#EE8844>Eruption</font></th> <th><font color=#EE8844>Date</font></th> <th><font color=#EE8844>Volume in km<sup>3</sup></font></th>và thêm thuộc tính để tô màu các phần tử này thành màu xám (#222222):<th bgcolor=#222222><font color=#EE8844>Eruption</font></th> <th bgcolor=#222222><font color=#EE8844>Date</font></th> <th bgcolor=#222222><font color=#EE8844>Volume in km<sup>3</sup></font></th> - Bây giờ, tìm hai tag đặt tên cho các hàng và tô với cùng màu sắc vào như trên:
<td bgcolor=#222222 rowspan=4> <font color=#EE8844> <i>eruptions<br> observed<br> by humans</i> </font></td> : : : <td bgcolor=#222222 rowspan=2> <font color=#EE8844> <i>inferred<br> by study<br> of deposits</i> </font></td> - Lưu trữ và Nạp lại trong Web browser của bạn. Bạn có thể so sánh với mẫu để biết bảng nên xuất hiện như thế nào tại đây.
Kiểm tra lại công việc của bạn
So sánh trang của bạn với mẫu để biết chúng nên như thế nào. Nếu trang của bạn khác với mẫu hoặc các liên kết siêu văn bản hoạt động không đúng, kiểm tra lại văn bản bạn đã đánh trong trình soạn thảo. Các bảng trở nên phức tạp rất nhanh, vì vậy nên kiểm tra lại một lần nữa xem các hàng và cột có hoàn toàn đúng không.Xem lại
Xem lại những chủ đề sau cho bài này:- Các phần tử của tag bảng được một browser diễn dịch theo thứ tự nào?
- Sự khác nhau giữa tag <td>...</td> và tag <th>...</th> là gì?
- Thuộc tính colspan=X để làm gì? Cách hoạt động của nó?
- Làm thế nào tạo một bảng có các cạnh không trông thấy được?
- Làm thế nào tô màu một dòng của bảng?
