Mục đích

• 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

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

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

Bạn có thể kết hợp các thuộc tính này lại với nhau:

  <td align=left valign=bottom>

Các Hàng và Cột

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

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

Vẫn còn một vài điều phải xét đến, nhưng chúng ta tạm ngưng các ví dụ minh họa ở đây để thực hiện công việc trên trang Web của chúng ta.

Một bảng dữ liệu

1. Mở tập tin intro.htm trong trình soạn thảo.
2. Xoá bỏ mọi thứ bên trong tag <pre>...</pre> và cả chính nó.
3. 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.

4. 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.

5. Bây giờ hãy thêm một vài thứ vào trong bảng của chúng ta.
6. 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>

7. 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>.

    

8. 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>

9. 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.

    

10. 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?

     

11. 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>

12. 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.

13. 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> 

14. 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 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>

  <table border=0>

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 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 |
|     |
|_____|

Lưu ý rằng cột bên phải cũng có một hình nằm kề bên, và đó chính là một siêu liên kết đến một ảnh lớn trong một cửa sổ riêng (xem bài 8e).

1. Mở tập tin usa.htm trong trình soạn thảo.
2. 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.

3. 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

Hiệu quả là sự chuyển dạng của danh sách:

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

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

Bây giờ chúng ta sẽ chia danh sách các tài nguyên trong trang Resource Projects của chúng ta (tập tin proj.htm).

1. Mở tập tin proj.htm trong trình soạn thảo.
2. 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.

3. 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

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>:

<table bgcolor=#880000>

<tr bgcolor=#880000>

<td bgcolor=#880000>

Bây giờ chúng ta sẽ thêm một vài màu cho bảng dữ liệu bạn đã tạo trong trang "Introduction". Trong ví dụ của chúng ta, đơn giản chúng ta chỉ thêm dạng HTML để làm cho các phần tử trong các hàng và cột tiêu đề có màu xám sáng hơn một chút so với nền đen.

1. Mở tập tin intro.htm trong trình soạn thảo.
2. 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>
   

3. 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>
   

4. 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

Xem lại

1. Các phần tử của tag bảng được một browser diễn dịch theo thứ tự nào?
2. Sự khác nhau giữa tag <td>...</td> và tag <th>...</th> là gì?
3. Thuộc tính colspan=X để làm gì? Cách hoạt động của nó?
4. Làm thế nào tạo một bảng có các cạnh không trông thấy được?
5. Làm thế nào tô màu một dòng của bảng?

Thực tập tự do

Đến phần tiếp theo....