A veces nos enfrentamos a problemas con las tablas de centrado en una página web. Con la ayuda del elemento central CSS, podemos centrar la tabla en nuestra página web.
Para centrar una tabla, configure los márgenes izquierdo y derecho en automático . (La tabla no se puede centrar si el ancho se establece en 100%)
Sintaxis:
.className {
margin-left: auto;
margin-right: auto;
}
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table.center {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>Center a Table</h2>
<p>To center a table, set left and right margin to auto:</p>
<table class="center">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
</tr>
<tr>
<td>1.3</td>
<td>2.3</td>
</tr>
<tr>
<td>1.4</td>
<td>2.4</td>
</tr>
<tr>
<td>1.5</td>
<td>2.5</td>
</tr>
</tbody>
</table>
</body>
</html>
Producción:
