TDB-logo Datorer och programmering TDB1
Föreläsningar

Om Tabeller

  1. En tabell med två rader och tre kolumner.

    2. <table> <tr> <td> 11 </td> <td> 12 </td> <td> 13 </td> </tr> <tr> <td> 21 </td> <td> 22 </td> <td> 23</td> </tr> </table> ger följande tabell:

    11 12 13
    21 22 23

  2. Samma med ramar.

    3. <table border="1"> <tr> <td> 11 </td> <td> 12 </td> <td> 13 </td> </tr> <tr> <td> 21 </td> <td> 22 </td> <td> 23 </td> </tr> </table> och vi får:

    11 12 13
    21 22 23
    		    border="5" ger    
    11 12 13
    21 22 23

  3. Cellpadding.

    4. Cellpadding anger hur stort mellanrummet ska vara mellan texten och cellens inre kant. Avståndet ges i pixlar. <table border="1" cellpadding="10"> <tr> <td> 11 </td> <td> 12 </td> <td> 13 </td> </tr> <tr> <td> 21 </td> <td> 22 </td> <td> 23 </td> </tr> </table> och vi får:

    11 12 13
    21 22 23
    		    cellpadding="20" ger    
    11 12 13
    21 22 23

  4. Cellspacing.

    5. Cellspacing anger hur stort mellanrummet ska vara mellan individuella celler. <table border="1" cellpadding="10" cellspacing="10"> <tr> <td> 11 </td> <td> 12 </td> <td> 13 </td> </tr> <tr> <td> 21 </td> <td> 22 </td> <td> 23 </td> </tr> </table> och vi får:

    11 12 13
    21 22 23
    		    cellspacing="0" ger    
    11 12 13
    21 22 23

  5. Rubriker.

    6. <table border=1 cellpadding=5 cellspacing=5> <caption> Bilförsäljning </caption> <tr> <th> År </th> <th> Volvo </th> <th> Saab </th> <th> VW </th> </tr> <tr> <td>1998</td> <td> 11 </td> <td> 12 </td> <td> 13 </td> </tr> <tr> <td>1999</td> <td> 20 </td> <td> 30 </td> <td> 40 </td> </tr> </table> ger följande tabell:

    Bilförsäljning
    År Volvo Saab VW
    1998 11 12 13
    1999 20 30 40

  6. Align = left|center|right

    1. Tabeller:
      2. <table align="center" border=1 cellpadding=5 cellspacing=5> <tr> <th> Volvo </th> <th> Saab </th> <th> VW </th> </tr> <tr> <td> 11 </td> <td> 12 </td> <td> 13 </td> </tr> </table> ger följande tabell:

      Volvo Saab VW
      11 12 13

    2. Tabellrader:
      3. <table align="center" border=1 cellpadding=5 cellspacing=5> <tr> <th> Volvo </th> <th> Saab </th> <th> VW </th> </tr> <tr align="right"> <td> 11 </td> <td> 12 </td> <td> 13 </td> </tr> </table> ger följande tabell:

      Volvo Saab VW
      11 12 13

    3. Tabellrader:valign=top|middle|bottom|baseline
      4. <table align="center" border=1 cellpadding=5 cellspacing=5> <tr valign="top"> <td> Jag har en lång rad här<br> med massor av text. </td> <td> 12 </td> <td> 13 </td> </tr> <tr valign="middle"> <td> 12 </td> <td> 13 </td><td> Jag har en lång rad här<br> med massor av text. </td> </tr> <tr valign="bottom"> <td> Jag har en lång rad här<br> med massor av text. </td> <td> 12 </td> <td> 13 </td> </tr> <tr valign="baseline"> <td> Jag har en lång rad här<br> med massor av text. </td> <td> 12 </td> <td> 13 </td> </tr> </table> ger följande tabell:

      Jag har en lång rad här
      med massor av text.       		12 13
      12 13 Jag har en lång rad här
      med massor av text.
      Jag har en lång rad här
      med massor av text.       		12 13
      Jag har en lång rad här
      med massor av text.       		12 13



  7. Width (bredd)

    8. Bredden anges antingen i pixlar eller i procent. Man kan välja bredden för både hela tabellen och dess celler.

    1. Exempel på tabellbredd med 75% av fönstrets bredd
      2. <table border=1 cellpadding=5 cellspacing=5 width="75%"> <caption> Bilförsäljning </caption> <tr> <th> Volvo </th> <th> Saab </th> <th> VW </th> </tr> <tr> <td> 25 </td> <td> 25 </td> <td> 25</td> </tr> </table>

      ger följande tabell:
      Bilförsäljning
      Volvo Saab VW
      25 25 25


      Ni ser att rubrikerna är centrerade men inte siffror, använd align i tr.

      <table border=1 cellpadding=5 cellspacing=5 width="75%"> <caption> Bilförsäljning </caption> <tr> <th> Volvo </th> <th> Saab </th> <th> VW </th> </tr> <tr align="center"> <td> 25 </td> <td> 25 </td> <td> 25</td> </tr> </table> ger följande tabell:

      Bilförsäljning
      Volvo Saab VW
      25 25 25


    2. Exempel på celler med olika bredd:

      3. I exemplet nedan har vi en tabell med 70% av fönsterbredden och första cellen har 50% av tabellbredden.

      <table border=1 cellpadding=5 cellspacing=5 width="70%"> <caption> Bilförsäljning </caption> <tr> <th width="50%"> Volvo </th> <th width="30%"> Saab </th> <th width="20%"> VW </th> </tr> <tr align="center"> <td> 50 </td> <td> 30 </td> <td> 20 </td> </tr> </table> ger följande tabell:

      Bilförsäljning
      Volvo Saab VW
      50 30 20



  8. Celler som sträcker sig över rader eller kolonner

    9. colspan= 2 sträckar över 2 kolonner.
    rowspan= 2 sträckar över 2 rader. <table border=1 cellpadding=5 cellspacing=5 width="70%"> <caption> Tabell 1 </caption> <tr align=center> <th rowspan=2> År</th> <th colspan=3> Bilförsäljning</th> </tr> <tr align=center> <th> Volvo </th> <th> Saab </th> <th> VW </th> </tr> <tr align=center> <td>1998</td> <td> 11 </td> <td> 12 </td> <td> 13 </td> </tr> <tr align=center> <td>1999</td><td> 21 </td> <td> 30 </td> <td> 40 </td></tr> </tr> </table> ger följande tabell:

    Tabell 1
    År Bilförsäljning
    Volvo Saab VW
    1998 11 12 13
    1999 21 30 40

  9. Färger

    10. <table bgcolor="white" border=1 cellpadding=5 cellspacing=5 width="70%"> <caption> Bilförsäljning </caption> <tr> <th bgcolor="blue"> Volvo </th> <th bgcolor="yellow"> Saab </th> <th bgcolor="green"> VW </th> </tr> <tr align="center"> <td> 11 </td> <td> 12 </td> <td> 13 </td> </tr> </table> ger följande tabell:

    Bilförsäljning
    Volvo Saab VW
    11 12 13

© Detta material är skyddat enligt lagen om upphovsrätt.
Eftertryck eller annan kopiering förbjuden.
Uppsala universitet, institutionen för Informationsteknologi.