L'ús de taules en el disseny d'un lloc web és una tasca apassionant. Per defecte, l'alineació d'una taula és cap a l'esquerra, però utilitzant el botó marge propietat en CSS , podem alinear-la al centre.

Si posem el valor de marge-esquerra i marge-dreta a automàtic , aleshores els navegadors mostren la taula centrada. Podem utilitzar la propietat taquigràfica marge i posa-ho a automàtic per alinear la taula al centre en lloc d'utilitzar marge-esquerra i marge-dreta propietat.

En lloc d'alinear la taula al centre, el alineació de text: centre; La propietat només centra el contingut de la taula, com ara el text dins de la taula.

Entenem-ho fent servir una il·lustració.

Exemple

En aquest exemple, estem utilitzant el alineació de text: centre; propietat per centrar el contingut dins de la taula i marge esquerre: automàtic; i marge dret: automàtic; per centrar la taula.

 table, th, td { border: 1px solid black; margin-left: auto; margin-right: auto; border-collapse: collapse; width: 500px; text-align: center; font-size: 20px; } <table class="table"> <tr> <th>First_Name</th> <th>Last_Name</th> <th>Subject</th> <th>Marks</th> </tr> <tr> <td>James</td><td>Gosling</td><td>Maths</td><td>92</td> </tr> <tr> <td>Alan</td><td>Rickman</td><td>Maths</td><td>89</td> </tr> <tr> <td>Sam</td><td>Mendes</td><td>Maths</td><td>82</td> </tr> </table>  

Sortida