Per assignar un color de fons a una cel·la, utilitzarem l'estil "background-color: orange;" (en aquest exemple hem escollit el color taronja). L'hem d'incloure a l'etiqueta de la cel·la que pertoqui, <td> o <th>.
Per assignar un color al text inclòs dins una cel·la, utilitzarem l'estil "color: white;" (en aquest exemple hem escollit el color blanc). L'hem d'incloure a l'etiqueta de la cel·la que pertoqui, <td> o <th>.
| Codi HTML |
<table style="width: 100%; border-collapse: collapse;">
<caption style="text-align: left; caption-side: top;">Títol de la taula</caption>
<thead>
<tr>
<th></th>
<th style="border: 1px solid black; width: 33%; background-color: orange; color: white; text-align: center;">Títol A</th>
<th style="border: 1px solid black; width: 33%; background-color: orange; color: white; text-align: center;">Títol B</th>
</tr>
</thead>
<tbody>
<tr>
<th style="border: 1px solid black; background-color: orange; color: white; text-align: center;">Títol 1</th>
<td style="border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi.</td>
<td style="border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi.</td>
</tr>
<tr>
<th style="border: 1px solid black; background-color: orange; color: white; text-align: center;">Títol 2</th>
<td style="border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi.</td>
<td style="border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi.</td>
</tr>
<tr>
<th style="border: 1px solid black; background-color: orange; color: white; text-align: center;">Títol 3</th>
<td style="border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span style="color: blue;">Morbi rutrum mi in semper tempor.</span> Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi.</td>
<td style="border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi.</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th style="border: 1px solid black; background-color: #f1f1c1; text-align: center;">Peu A</th>
<th style="border: 1px solid black; background-color: #f1f1c1; text-align: center;">Peu B</th>
</tr>
</tfoot>
</table>IMPORTANT: quan aplicam un color al fons i/o al text, s'aplica a tot el contingut de la cel·la. Si necessitau aplicar-lo només a una part del text inclòs a la cel·la, feis servir l'etiqueta <span> amb el paràmetre correcte, tal com podeu veure al codi de la segona cel·la de la fila amb el títol "Títol 3".
| Visualitzat en el navegador |
| Títol A | Títol B | |
|---|---|---|
| Títol 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi. |
| Títol 2 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi. |
| Títol 3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi. |
| Peu A | Peu B |