Diferència entre revisions de la pàgina «HTML taules arrodonides»

De Cacauet Wiki
Salta a la navegació Salta a la cerca
m (imatge cantonades taula)
Línia 4: Línia 4:
  
 
Veiem que l'estratègia per crear taules una mica més riques no pot ser amb HTML pur. Cal, doncs, crear imatges a les cantonades que simulin l'arrodoniment. Aquestes imatges les podem crear amb el GIMP creant un cercle i partint-lo més tard en 4 segments.
 
Veiem que l'estratègia per crear taules una mica més riques no pot ser amb HTML pur. Cal, doncs, crear imatges a les cantonades que simulin l'arrodoniment. Aquestes imatges les podem crear amb el GIMP creant un cercle i partint-lo més tard en 4 segments.
 +
 +
[[Imatge:cantonades_taula.png]]
  
 
<table border="1">
 
<table border="1">
Línia 21: Línia 23:
 
         <td>bottom-right.gif</td>
 
         <td>bottom-right.gif</td>
 
     </tr>
 
     </tr>
 
  
 
</table>
 
</table>

Revisió del 00:03, 17 gen 2011

L'exercici ha de resultar en quelcom com això:

Html-taules-arrodonides.png

Veiem que l'estratègia per crear taules una mica més riques no pot ser amb HTML pur. Cal, doncs, crear imatges a les cantonades que simulin l'arrodoniment. Aquestes imatges les podem crear amb el GIMP creant un cercle i partint-lo més tard en 4 segments.

Cantonades taula.png

top-left.gif top-right.gif
The text blablabla...
bottom-left.gif bottom-right.gif

Òbviament amb això no hi haurà prou. Haureu de:

  • Posar el mateix color de background que el de la imatge de les cantonades.
  • Posar el 'border="0"' de la taula.
  • Veureu que encara no queda com voleu. Per acabar de fer que no surtin línies entre mig, cal que poseu els paràmetres cellspacing="0" cellpadding="0" al tag <table>.


Recordem l'estructura de les taules:

<table>
    <tr> <!-- primera fila -->
        <td>cel·la 1.1</td>
        <td>cel·la 1.2</td>
    </tr>
    <tr> <!-- 2a fila -->
        <td>cel·la 2.1</td>
        <td>cel·la 2.2</td>
    </tr>

    ...

</table>