12.5. Alineació del text dins les cel·les

Alineació comú a totes les cel·les de la taula

A les taules podem fer servir l'estil text-align per alinear el text dins les cel·les. Aquest estil pot contenir els paràmetres: left; (esquerra, és el valor per defecte), right; (dreta), justify; (justificat) i center; (centrat). Si ho feim servir a l'etiqueta <table> s'aplicarà a la totalitat de la taula.

Codi HTML

<table style="border-collapse: collapse; width: 100%; text-align: center;">
<tbody>
<tr>
<td style="border: 1px solid black; width: 20%;">A</td>
<td style="border: 1px solid black; width: 30%;">B</td>
<td style="border: 1px solid black; width: 50%;">C</td>
</tr>
<tr>
<td style="border: 1px solid black;">D</td>
<td style="border: 1px solid black;">E</td>
<td style="border: 1px solid black;">F</td>
</tr>
<tr>
<td style="border: 1px solid black;">G</td>
<td style="border: 1px solid black;">H</td>
<td style="border: 1px solid black;">I</td>
</tr>
</tbody>
</table>

Visualitzat en el navegador

A	B	C
D	E	F
G	H	I

Alineació a cada cel·la

Si ho feim servir a l'etiqueta <td> de cada cel·la, podrem establir alineacions diferents a cadascuna.

Codi HTML

<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="border: 1px solid black; width: 20%;">A</td>
<td style="border: 1px solid black; width: 30%;">B</td>
<td style="border: 1px solid black; width: 50%;">C</td>
</tr>
<tr>
<td style="border: 1px solid black; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi. Suspendisse congue euismod consectetur. Quisque viverra posuere erat, at sodales lectus porta sit amet.</td>
<td style="border: 1px solid black; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi. Suspendisse congue euismod consectetur. Quisque viverra posuere erat, at sodales lectus porta sit amet.</td>
<td style="border: 1px solid black; text-align: right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi. Suspendisse congue euismod consectetur. Quisque viverra posuere erat, at sodales lectus porta sit amet.</td>
</tr>
<tr>
<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. Suspendisse congue euismod consectetur. Quisque viverra posuere erat, at sodales lectus porta sit amet.</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. Suspendisse congue euismod consectetur. Quisque viverra posuere erat, at sodales lectus porta sit amet.</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. Suspendisse congue euismod consectetur. Quisque viverra posuere erat, at sodales lectus porta sit amet.</td>
</tr>
</tbody>
</table>

Visualitzat en el navegador

A	B	C
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi. Suspendisse congue euismod consectetur. Quisque viverra posuere erat, at sodales lectus porta sit amet.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi. Suspendisse congue euismod consectetur. Quisque viverra posuere erat, at sodales lectus porta sit amet.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi. Suspendisse congue euismod consectetur. Quisque viverra posuere erat, at sodales lectus porta sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi. Suspendisse congue euismod consectetur. Quisque viverra posuere erat, at sodales lectus porta sit amet.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi. Suspendisse congue euismod consectetur. Quisque viverra posuere erat, at sodales lectus porta sit amet.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mi in semper tempor. Fusce diam enim, placerat in risus viverra, laoreet volutpat nisi. Suspendisse congue euismod consectetur. Quisque viverra posuere erat, at sodales lectus porta sit amet.