Chức năng |
Điểm tham quan |
Chuyên mục chính |
· Dreamweaver 4.0 · Frontpage - Thiết kế web · HDSD phần mềm QL Doanh nghiệp · MinhDucSoft · Ngôn ngữ HTML · Truyện cười |
Giới thiệu | |
| |
Lượt truy cập | |||
| |||
Nhận tin qua email |
(3382 lần đọc)

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 |
---|---|
|
|
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 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> |
|
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.
- 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] |
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).
- 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> |
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).
- 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> |
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.
- 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?
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ài thứ có thể thêm vào danh sách và hình ảnh của bạn