Este post es muy corto. Solo vamos a ver cómo centrar una tabla en una página web, usando CSS.

Centrar tabla

A nuestra tabla hay que colocarle la propiedad margin en auto, para el margen horizontal. En CSS se puede especificar el margen horizontal y vertical así:

margin: margen_vertical margen_horizontal;

Por lo tanto podemos hacer lo siguiente a la tabla:

table {
		/* Para centrar usamos "auto" en la alineación horizontal */
    margin: 0 auto;
		/*Lo siguiente es para los bordes*/
    border-collapse: collapse;
}

Ejemplo

Tengo mi HTML en donde solo tengo una tabla:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Centrar tabla HTML CSS</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
		<a href="https://parzibyte.me/blog/">By Parzibyte</a>
		<table>
			<thead>
				<tr>
					<th>Nombre</th>
					<th>Edad</th>
			</thead>
			<tbody>
				<tr>
					<td>Luis</td>
					<td>23</td>
				</tr>
				<tr>
					<td>María</td>
					<td>24</td>
				</tr>
			</tbody>
		</table>
  </body>
</html>

Si te fijas, estoy cargando el estilo en la línea 7. Ahora en mi CSS tengo lo siguiente para centrar la tabla en HTML:

table {
		/* Para centrar usamos "auto" en la alineación horizontal */
    margin: 0 auto;
		/*Lo siguiente es para los bordes*/
    border-collapse: collapse;
}

table,
th,
td {
    border: 1px solid black;
}

Los otros estilos (los que no son para centrar) son ocupados para dibujar los bordes a la tabla. Con esto tenemos para centrar la tabla en todo el cuerpo de la página web.

Si el post ha sido de tu agrado te invito a que me sigas para saber cuando haya escrito un nuevo post, haya actualizado algún sistema o publicado un nuevo software. Facebook | X | Instagram | Telegram | También estoy a tus órdenes para cualquier contratación en mi página de contacto