logo

¿Cómo centrar una tabla en CSS?

El uso de tablas en el diseño de un sitio web es una tarea apasionante. Por defecto, la alineación de una tabla es hacia la izquierda, pero al usar el margen propiedad en CSS, podemos alinearla en el centro.

Si fijamos el valor de margen izquierdo y margen derecho a auto , luego los navegadores muestran la tabla centrada. Podemos usar la propiedad abreviada. margen y configúrelo en auto para alinear la mesa en el centro en lugar de usar el margen izquierdo y margen derecho propiedad.

infierno de devolución de llamada en javascript

En lugar de alinear la mesa al centro, el alineación de texto: centro; La propiedad solo centra el contenido de la tabla, como el texto dentro de la tabla.

Entendamos esto usando una ilustración.

Ejemplo

En este ejemplo, estamos usando el alineación de texto: centro; propiedad para centrar el contenido dentro de la tabla y margen izquierdo: automático; y margen derecho: automático; para centrar la mesa.

 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> 
Pruébalo ahora

Producción

sistema operativo linux
¿Cómo centrar una tabla en CSS?