En este artículo, demostraremos cómo alinear el contenido de una tabla en el centro. La propiedad text-align en CSS se puede usar para alinear el contenido de un contenedor o elemento determinado.
Enfoque: para alinear el contenido de una tabla en el centro, podemos usar la propiedad text-align en CSS. La tabla de elementos se puede diseñar usando la propiedad de alineación de texto y el valor como centro dará como resultado la solución deseada. De forma predeterminada, la propiedad de alineación de texto se establece a la izquierda, por lo que el contenido se alinea a la izquierda, anularemos el valor de esta propiedad al centro para alinear el contenido según nuestros requisitos.
Sintaxis:
text-align: left;
El valor de la propiedad:
- inicial: Es el valor por defecto.
- heredar: Establece el valor en el valor de la propiedad del elemento principal.
- izquierda: Alinea el texto a la izquierda (propiedad por defecto).
- right: Alinea el texto a la derecha.
- center: Alinea el texto en el centro.
- justificar: Extiende el contenido de un elemento.
Ejemplo 1: Primero crearemos una plantilla HTML con el elemento de la tabla y agregaremos los datos a las filas y columnas de la tabla.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Centered Table</title>
<style>
table,
td,
th {
border: 1px solid;
padding: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Countries</th>
<th>Code</th>
<th>Continent</th>
</tr>
<tr>
<td>United States of America</td>
<td>USA</td>
<td>North America</td>
</tr>
<tr>
<td>India</td>
<td>IND</td>
<td>Asia</td>
</tr>
<tr>
<td>China</td>
<td>CHN</td>
<td>Asia</td>
</tr>
<tr>
<td>Russian Federation</td>
<td>RUS</td>
<td>Asia</td>
</tr>
<tr>
<td>United Kingdom</td>
<td>UK</td>
<td>Europe</td>
</tr>
<tr>
<td>France</td>
<td>FRA</td>
<td>Europe</td>
</tr>
</table>
</body>
</html>
Producción:
Aquí podemos ver que los elementos de las celdas de la tabla están alineados a la izquierda de forma predeterminada. Hemos aplicado algunos estilos básicos como borde y relleno para que la tabla sea un poco más representable. Estos estilos, como el borde, se han configurado para visualizar la alineación con el borde y también agregar relleno para escalar un poco más en la vista de tabla y poder ver la propiedad de alineación de una mejor manera.
Alineación del contenido en el centro: Ahora, ya que hemos agregado el contenido de la tabla, podemos agregar una propiedad CSS para alinear el contenido de la tabla al centro. Podemos usar el elemento de tabla y agregar la propiedad de alineación de texto configurándolo en el centro. Debe agregar el siguiente código en la etiqueta de estilo como se muestra a continuación:
<style>
table,
td,
th {
border: 1px solid;
padding: 20px;
}
table {
text-align: center;
}
</style>
Ejemplo 2: Este ejemplo demostrará el texto de la tabla en el centro usando CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Centered Table</title>
<style>
table,
td,
th {
border: 1px solid;
padding: 20px;
}
table {
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Countries</th>
<th>Code</th>
<th>Continent</th>
</tr>
<tr>
<td>United States of America</td>
<td>USA</td>
<td>North America</td>
</tr>
<tr>
<td>India</td>
<td>IND</td>
<td>Asia</td>
</tr>
<tr>
<td>China</td>
<td>CHN</td>
<td>Asia</td>
</tr>
<tr>
<td>Russian Federation</td>
<td>RUS</td>
<td>Asia</td>
</tr>
<tr>
<td>United Kingdom</td>
<td>UK</td>
<td>Europe</td>
</tr>
<tr>
<td>France</td>
<td>FRA</td>
<td>Europe</td>
</tr>
</table>
</body>
</html>
Producción:
Entonces, al usar la propiedad de alineación de texto para el elemento de la tabla, podemos centrar el contenido de la tabla. El contenido de la tabla se alinea en el centro dependiendo de la cantidad de contenido que tenga la celda de la tabla, si es lo suficientemente pequeña para caber en el centro, no se ve claramente cómo se alinean los contenidos. Además, si el contenido de las celdas de la tabla es lo suficientemente grande, se alinean en el centro y se nota.
Entonces, así es como alineamos el contenido de una tabla HTML en el centro usando CSS.