Sign In Sign-Up

Welcome!

Close

Would you like to make this site your homepage? It's fast and easy...

Yes, Please make this my home page!

No Thanks

  Don't show this to me again.

Close

Soaïn thaûo HTML | Giôùi thieäu | FAQ | Alumni | Caùc Tag | Muïc Luïc | Baøi tröôùc | Baøi keá |

21. Baûng (Table)

Muïc ñích

• Thieát keá moät baûng vôùi nhöõng haøng vaø coät vaên baûn trình baøy theo daïng löôùi treân trang Web.
• Vieát HTML taïo söï troän laãn phöùc taïp giöõa hình aûnh vaø vaên baûn.
• Vieát HTML cho moät baûng aån ñeå trình baøy caùc coät döõ kieän.
• Taïo moät baûng vôùi nhöõng oâ coù maøu khaùc nhau.

Baøi hoïc

Baûng ñöôïc giôùi thieäu trong HTML 3.0 vaø ñöôïc NetScape phaùt trieån theâm ñeå taïo ra moät höôùng thieát keá khaùc cho trang Web. Chuùng cung caáp moät caáu truùc ñeå toå chöùc nhöõng phaàn töû HTML trong trang thaønh daïng "löôùi" (grid). Moät trong nhöõng öùng duïng roõ raøng nhaát cuûa baûng laø khi baïn phaûi ñònh daïng... moät baûng theo töøng coät! Nhöng baûng cuõng môû ra moät chaân trôøi môùi cho nhieàu khaû naêng trình baøy trang khaùc nhau.

Daïng HTML cho baûng troâng coù theå raát phöùc taïp - nhöng chuùng ta seõ baét ñaàu moät caùch ñôn giaûn vôùi vieäc xaây döïng moät vaøi baûng ñôn giaûn trong baøi Volcano Web.

Ñoái vôùi nhöõng ngöôøi môùi baét ñaàu, haõy nhôù kyõ khaùi nieäm sau:

Caùc baûng ñöôïc xaây döïng baét ñaàu töø phaàn töû cao nhaát beân traùi, tieáp theo xaây döïng caùc phaàn töû cuûa haøng ñaàu tieân, xong chuyeån ñeán haøng thöù hai, xaây döïng caùc phaàn töû cuûa haøng thöù hai....

      -->  -->  -->  -->  -->  --> 
      ___________________________|
      |
      -->  -->  -->  -->  -->

Chuùng ta goïi moãi oâ löôùi trong moät baûng laø moät phaàn töû (cell)

Nhöõng tag cô baûn cuûa Baû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>

Chænh leà theo chieàu ngang	Chænh leà theo chieàu doïc
<td align=left> Saép xeáp taát caû caùc thaønh phaàn veà beân traùi cuûa cell (ñaây laø thuoäc tính maëc ñònh) <td align=right> Saép xeáp taát caû caùc thaønh phaàn veà beân phaûi cuûa cell <td align=center> Saép xeáp taát caû caùc thaønh phaàn vaøo giöõa cell	<td valign=top> Saép xeáp caùc thaønh phaàn töø ñænh cell xuoáng döôùi <td valign=bottom> Saép xeáp caùc thaønh phaàn töø döôùi cell leân treân <td valign=middle> Saép xeáp taát caû phaàn töû ôû giöõa cuûa cell (ñaây laø thuoäc tính maëc ñònh)

Baïn coù theå keát hôïp caùc thuoäc tính naøy laïi vôùi nhau:

  <td align=left valign=bottom>

Caùc Haøng vaø Coä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>

Vaãn coøn moät vaøi ñieàu phaûi xeùt ñeán, nhöng chuùng ta taïm ngöng caùc ví duï minh hoïa ôû ñaây ñeå thöïc hieän coâng vieäc treân trang Web cuûa chuùng ta.

Moät baûng döõ lieäu

1. Môû taäp tin intro.htm trong trình soaïn thaûo.
2. Xoaù boû moïi thöù beân trong tag <pre>...</pre> vaø caû chính noù.
3. Thay vaøo chính choã ñoù baè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>
   

   Chuù yù: Haõy nhìn doøng HTML ñaàu tieân. Tag Table Header laø <th>...</th> coù keát quaû gioáng y nhö tag <td>...</td> ngoaïi tröø laø moïi vaên baûn trong noù ñeàu ñöôïc in ñaäm vaø taát caû caùc thaønh phaàn cuûa noù ñeàu töï ñoäng ñöôïc canh giöõa.

4. Löu tröõ vaø Naïp laïi trong Web browser. Baïn coù theå so saùnh vôùi baûn maãu ñeå xem noù neân xuaát hieän nhö theá naøo taïi luùc naøy.

   Chuù yù: Baûng coù theå xem khoâng ñöôïc roõ khi söû duïng neàn maøu ñen.

5. Baây giôø haõy theâm moät vaøi thöù vaøo trong baûng cuûa chuùng ta.
6. Moät vaøi browser cho pheùp baïn chæ ñònh moät vaøi thoâng soá cho caùc ñöôøng taïo ra baûng. Chuùng laø caùc thuoäc tính cuûa tag <table>:

     <table border=X cellpadding=Y cellspacing=Z>

   trong ñoù X laø chieàu roäng (tính baèng ñieåm) ñöôøng vieàn beân ngoaøi cuûa baûng. Thuoäc tính cellpadding cho bieát coù bao nhieâu "khoaûng traéng" giöõa khoái beân trong phaàn töû vaø vaùch ngaên - trò Y caøng lôùn caøng laøm cho caùc phaàn töû (cell) lôùn hôn do "ñoän theâm" (padding). Thuoäc tính cellspacing cho bieát ñoä roäng (tính baèng ñieåm) cuûa nhöõng ñöôøng beân trong baûng ñeå phaân chia caùc phaàn töû.

   Haõy söûa tag <table> cuûa baïn thaønh:

     <table border=3 cellpadding=4 cellspacing=8>

7. Tag <caption> ñaët moät chuoãi vaên baûn (ñöôïc chænh vaøo giöõa theo chieàu roäng) nhö laø tieâu ñeà cho baûng. Haõy söûa ñoåi nhöõng doøng trong baûng cuûa baïn thaønh:

     <table border=3 cellpadding=4 cellspacing=8>
     <caption><b><font size=+1>
     Volumes of Some Well-Known 
     Volcanic Eruptions</font></b></caption>

   Baïn coù theå loàng vaøo trong tag <caption> caùc HTML khaùc; nhöng phaûi nhôù laø tag naøy phaûi naèm trong tag <table>...</table>.

8. Vaø ñeå taêng söï thích thuù, haõy toâ maøu ñoaïn vaên trong tag <th>...</th> thaønh maøu cam (ñeå bieát theâm veà toâ maøu cho vaên baûn, xem baøi 19). Ñieàu chænh phaàn HTML cho haøng ñaàu tieân thaø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. Vaø haõy di chuyeån baûng naøy vaøo giöõa trang. Neáu browser cuûa baïn coù hoå trôï tag <center>...</center>, thì chæ caàn bao quanh baûng baèng tag naøy. Ñeå bieát theâm veà chænh leà cho vaên baûn, xem lesson 20.

10. Löu tröõ vaø Naïp laïi trong web browser cuûa baïn. Baïn coù theå so saùnh vôùi ví duï maãu ñeå bieát baûng naøy neân nhö theá naøo. Vaãn toát chöù, phaûi khoâng?

11. Cuoái cuøng, chuùng ta seõ theâm moät coät veà phía beân traùi - chuùng ta muoán gheùp nhoùm caùc nuùi löûa ñaõ phun laïi trong lòch söû (boán haøng ñaàu tieân) vaø caùc nuùi löûa thôøi tieàn söû (hai doøng cuoái). Baây giôø chuùng ta seõ theâm moät phaàn töû roãng baèng caùch theâm <th></th> vaøo haøng ñaàu tieân - lyù do cuûa vieäc laøm naøy seõ ñöôïc laøm roõ hôn trong nhöõng böôùc saép tôùi khi chuùng ta xaây döïng coät môùi naø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. Chuùng ta ñeán doøng ñaàu tieân vaø theâm moät phaàn töû ôû ñaàu tieân maø phaàn töû naøy seõ môû roäng ra 4 haø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>
    

    Chuù yù: Chuùng ta ñaõ theâm moät vaøi tag <br> ñeå coät ñaàu tieân naøy khoâng trôû neân quaù roäng. Baïn coù theå töï ñaùnh giaù khi boû qua nhöõng tag naøy.

13. Vaø trong haøng thöù naêm, chuùng ta theâm moät phaàn töû maø noù ñöôïc môû roäng trong hai haø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öõ vaø Naïp laïi moät laàn nöõa trong browser cuûa baïn. Baïn coù theå so saùnh vôùi baøi maãu ñeå bieát keát quaû luùc naøy neân nhö theá naøo. Ñaây laø taát caû nhöõng gì chuùng ta seõ theâm vaøo baûng naøy.

Baûng khoâng nhìn thaáy hay Baûng Ma

Moät baûng ma ñöôïc xaây döïng theo caùch gioáng nhö baûng maø chuùng ta ñaõ thöïc hieän ôû treân ngoaïi tröø tag <table> coù daïng nhö sau:

  <table>

  <table border=0>

Neáu baïn xem laïi phaàn gaàn ñaàu cuûa trang naøy, thaät söï noù laø moät baûng ma maø trong ñoù coù moät phaàn töû cuûa noù laïi laø moät baûng coù ñöôøng vieàn! Tuy vaäy, chuùng ta haõy cöù tieáp tuïc. Ñeå laøm ví duï, chuùng ta seõ ñònh daïng laïi taäp tin usa.htm (Volcanoes in the USA) thaønh daïng coù hai coät. Thay vì taïo caùc ñoaïn vaên ñöôïc saép ñaët thaúng ñöùng döïa theo ñoä roäng cuûa trang, chuùng ta seõ laøm chuùng gioáng nhö baûn phaùc hoï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 yù raèng coät beân phaûi cuõng coù moät hình naèm keà beân, vaø ñoù chính laø moät sieâu lieân keát ñeán moät aûnh lôùn trong moät cöûa soå rieâng (xem baøi 8e).

1. Môû taäp tin usa.htm trong trình soaïn thaûo.
2. Tìm phaàn sau ñaâ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>

   vaø thay theá noù baèng ñoaï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>

   Chuù yù: Haõy xem caån thaän daïng HTML ôû ñaây. Thaät söï chuùng ta ñaõ söû duïng moät baûng coù 3 coät - ñoaïn vaên ñaàu tieân (Mount St Helens) ôû trong coät beân traùi. Coøn coät beân phaûi bao goàm moät coät vaên baûn vaø moät coät khaùc coù moät aûnh nhoû. Haøng döôùi cuøng ñöôïc chænh leà phaûi vaø môû roäng trong 3 coät ñöôïc duøng ñeå noái lieân keát sieâu vaên baûn ñeán moät hình aûnh gioáng nhö hình thu nhoû naøy nhöng lôùn hôn.

3. Löu tröõ vaø Naïp laïi moät laàn nöõa trong web browser.

Chia ñoaïn moät danh saùch daøi

Hieäu quaû laø söï chuyeån daïng cuûa danh saùch:

Danh saùch Daøi		Coät 1	Coä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>	thaø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>

Baây giôø chuùng ta seõ chia danh saùch caùc taøi nguyeân trong trang Resource Projects cuûa chuùng ta (taäp tin proj.htm).

1. Môû taäp tin proj.htm trong trình soaïn thaûo.
2. Tìm danh saùch <ul>...</ul> beân döôùi tieâu ñeà References vaø nhaä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>

   Chuù yù: chuùng ta chæ laáy danh saùch ñi <ul>...</ul> vaø chia noù thaønh hai danh saùch. Moãi moät danh saùch laø moät phaàn töû cuûa moät baûng ma coù moät haøng vaø hai coät.

3. Löu tröõ vaø Reload trong Web browser. Baïn coù theå so saùnh vôùi maãu ñeå bieát baûng neân coù daïng nhö theá naøo taïi ñaây.

Maøu saéc cuûa baûng

Baïn coù theå xem trang kieåm tra cuoái cuøng ñeå bieát browser cuûa baïn coù hoå trôï vieäc toâ maøu cho baûng khoâng.

Chuùng ta seõ söû duïng maõ maøu heä thaäp luïc phaân ñaõ bieát trong baøi 16 ñeå toâ maøu neàn cuûa nhöõng trang Web vaø trong baøi 18 ñeå toâ maøu chöõ.

Döôùi ñaây laø moät ví duï ñôn giaûn veà vieäc cheøn maøu bgcolor=#FF0000 trong caùc tag <table>:

<table bgcolor=#880000>

<tr bgcolor=#880000>

<td bgcolor=#880000>

Baây giôø chuùng ta seõ theâm moät vaøi maøu cho baûng döõ lieäu baïn ñaõ taïo trong trang "Introduction". Trong ví duï cuûa chuùng ta, ñôn giaûn chuùng ta chæ theâm daïng HTML ñeå laøm cho caùc phaàn töû trong caùc haøng vaø coät tieâu ñeà coù maøu xaùm saùng hôn moät chuùt so vôùi neàn ñen.

1. Môû taäp tin intro.htm trong trình soaïn thaûo.
2. Tröôùc heát tìm taát caû tag <th> ñeå giöõ caùc tieâu ñeà cuûa coä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>
   

   vaø theâm thuoäc tính ñeå toâ maøu caùc phaàn töû naøy thaønh maøu xaù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. Baây giôø, tìm hai tag ñaët teân cho caùc haøng vaø toâ vôùi cuøng maøu saéc vaøo nhö treâ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öõ vaø Naïp laïi trong Web browser cuûa baïn. Baïn coù theå so saùnh vôùi maãu ñeå bieát baûng neân xuaát hieän nhö theá naøo taïi ñaây.

Kieåm tra laïi coâng vieäc cuûa baïn

Xem laïi

1. Caùc phaàn töû cuûa tag baûng ñöôïc moät browser dieãn dòch theo thöù töï naøo?
2. Söï khaùc nhau giöõa tag <td>...</td> vaø tag <th>...</th> laø gì?
3. Thuoäc tính colspan=X ñeå laøm gì? Caùch hoaït ñoäng cuûa noù?
4. Laøm theá naøo taïo moät baûng coù caùc caïnh khoâng troâng thaáy ñöôïc?
5. Laøm theá naøo toâ maøu moät doøng cuûa baûng?

Thöïc taäp töï do

Ñeán phaàn tieáp theo....

ÑEÁN.... | Muïc Luïc | Baøi tröôùc: "Xeùt theâm veà Söï Chænh leà" | Baøi keá: "Xeùt theâm veàø Danh saùch vaø Hình aûnh" |

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