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.
- Vist a davidwalsh
Comentaris recents