El teu blog de Linux en català

CSS3 – Colors alternatius per a les files d'una taula

Amb aquest article iniciem un nou tipus de contingut a GNULinux.cat: apunts relacionats amb programació PHP, HTML(5), CSS(3) i Javascript. La qüestió és que totes aquestes eines també són lliures i són un camp que en general no hem tingut en compte.

A l’hora de dissenyar mitjançant CSS2 l’estil d’una taula, ens ha estat impossible fins ara definir un estil «automàtic» que controlara el color de les files d’una taula segons siguen parells o senars. O bé havíem de definir a cada fila l’estil que volíem aplicar o bé havíem de fer servir javascript. Amb CSS3 res d’això ja no és necessari: es poden definir els estils de les files parells i senars de la taula simplement fent servir un codi com el següent:

[sourcecode language=”css”]
tr:nth-child(odd) { background-color:#eee; }
tr:nth-child(even) { background-color:#fff; }
[/sourcecode]

Amb aquest css i una taula com la següent:

[sourcecode language=”html”]
<table>
<th><strong>Empresa</strong></th>
<th><strong>Enviaments</strong></th>
<tr>
<td>Voluntaris</td>
<td>101823</td>
</tr>
<tr>
<td>Desconegut</td>
<td>73558</td>
</tr>
</tr>
<tr>
<td>Red Hat</td>
<td>70790</td>
</tr>
<tr>
<td>Novell</td>
<td>45349</td>
</tr>
</table>
[/sourcecode]

Obtenim això (tingueu en compte que la taula té altres estils propis, simplement vos heu de fixar en el fet que el color de les files és diferent sense haver aplicat cap estil a dins de la taula):

Empresa Enviaments
Voluntaris 101823
Desconegut 73558
Red Hat 70790
Novell 45349

Per cert, hem activat l’extensió per al WordPress SyntaxHighlighter Evolved per posar el codi com ho veieu. Si vos interessa, un altre dia mostrarem com instal·lar-la i fer-la servir.

    • Pau on 5 d'Agost de 2010 at 21:56
    • Author

    Reply

    Estic flipant. Ací havia dos comentaris que han desaparegut…

  1. Reply

    A mi l’extensió SyntaxHighlighter Evolved em va donar problemes, especialment de no reconèixer determinades marques… i finalment vaig canviar-la per la WP-Syntax, més simple i que sempre m’ha funcionat bé.

      • Pau on 6 d'Agost de 2010 at 08:37
      • Author

      Reply

      Xavier, és concretament l’extensió «SyntaxHighlighter Evolved» la que no et funcionava? Ho dic perquè existeix una altra SyntaxHighlighter que no és aquesta i que a mi m’ha donat problemes perquè no reconeix bé els salts de línia, amb la qual cosa el resultat era prou lleig. Amb l’evolved, això ja va bé!

    • Guillem on 6 d'Agost de 2010 at 11:08

    Reply

    Ostres genial les millores en el CSS3, i genial aquesta línia nova, ja que el desenvolupament web sempre m’ha agradat molt 🙂 De fet, una altra característica interessant del CSS és l’atribut font-face, que permet defeinir tipus de lletra, i sinó el té, l’ordinador se’l descarrega.
    Per cert Pau, no és gaire important però t’has deixat de tancar l’etiqueta tbody 🙂

    • Aljullu on 6 d'Agost de 2010 at 22:31

    Reply

    Jo tinc curiositat per saber com heu fet que en passar el ratolí per sobre ells enllaços doni l’efecte que “surten” de la pantalla.

      • Pau on 7 d'Agost de 2010 at 01:02
      • Author

      Reply

      Això també és css3. Faré un altre article… Per cert, l’efecte amb el Chrome és brutal (amb el Firefox no es veu tot l’efecte que hi ha implementat).

        • Guillem on 7 d'Agost de 2010 at 01:20

        Reply

        Tens raó, no m’hi havia fixat ja que uso el firefox normalment. Salut!!

        • Aljullu on 8 d'Agost de 2010 at 11:56

        Reply

        Amb el Firefox 4.0 beta també es veu molt bé!

Deixa un comentari

Your email address will not be published.