Lessons XXIX : Bảng (Table)

21. Bảng (Table)

Hãy tạo một bảng…
Một khi Bạn Tạo ra
một bảng
ban sẽ không B a o g i ờ Quay
Lại!
…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>
Row 1 col 1 Row 1 col 2 Row 1 col 3
Row 2 col 1 Row 2 col 2 Row 2 col 3
Row 3 col 1 Row 3 col 2 Row 3 col 3

Thuộc tính border=1 trong tag <table> chỉ thị cho browser vẽ một đường viền quanh bảng với độ dày là một điểm. Lưu ý rằng mỗi một hàng được xác định bởi tag Table Row là <tr>...</tr>, rồi sau đó mỗi phần tử trong hàng được định nghĩa bởi tag Table Data là <td>...</td>. Trong mỗi tag <td>...</td>có thể có bất kỳ loại tag nào của HTML mà chúng ta đã sử dụng trong tài liệu này – tiêu đề, định kiểu, liên kết siêu văn bản, hình ảnh inline, v.v…. Trong tag này bạn còn có thể sử dụng một vài loại thuộc tính để điều khiển sự chỉnh lề của các thông tin trong phần tử đó:

Chỉnh lề theo chiều ngang Chỉnh lề theo chiều dọc
  • <td align=left> Sắp xếp tất cả các thành phần về bên trái của cell (đây là thuộc tính mặc định)
  • <td align=right> Sắp xếp tất cả các thành phần về bên phải của cell
  • <td align=center> Sắp xếp tất cả các thành phần vào giữa cell
  • <td valign=top> Sắp xếp các thành phần từ đỉnh cell xuống dưới
  • <td valign=bottom> Sắp xếp các thành phần từ dưới cell lên trên
  • <td valign=middle> Sắp xếp tất cả phần tử ở giữa của cell (đây là thuộc tính mặc định)

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>

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 colspanrowspan 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.
Row 1 col 1 Row 1 col 2-3
Row 2 col 1 Row 2 col 2 Row 2 col 3
Row 3 col 1 Row 3 col 2 Row 3 col 3
Ðượ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>
Row 1 col 1 Row 1 col 2-3
Row 2 col 1 Row 2 col 2 Row 2 col 3
Row 3 col 1 Row 3 col 3

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

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.

 

  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ữ 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 cellspacingcho 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ữ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ữ 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]

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

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 đề Referencesvà 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ữ 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>

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

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:

  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

Xem lại trang web của bạn và tìm các vị trí mà bạn thấy bảng sẽ làm cho cách trình bày tốt hơn. Hay thêm một sơ đồ vào trang web của bạn và sử dụng bảng để định dạng cho nó. Thử tạo bảng với các phần tử được tô màu, hoặc giống như chúng tôi đã làm trong tài liệu này, sử dụng màu trong các bảng không nhìn thấy được.


Ðến phần tiếp theo….

Vẫn còn vàithứ có thể thêm vào danh sách và hình ảnh của bạn

ÐẾN…. | Mục Lục | Bài trước: “Xét thêm về Sự Chỉnh lề” | Bài kế: “Xét thêm về?h sách và Hình ảnh” |

Soạn thảo HTML Bài 21: Tạo Bảng

?1995, 1996 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

The Internet Connection at MCLI is Alan Levine –}
Comments to levine@maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut21.html

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: