Crear tabla HTML con diferentes tamaños de columna
- Establecer el tamaño de las columnas de la tabla HTML
- Establecer el ancho de las columnas de la tabla usando CSS en línea
- Establecer el ancho de las columnas de la tabla usando CSS interno
Este artículo explica cómo modificar el ancho de la columna en HTML y CSS para cumplir con nuestras especificaciones. Debido a que HTML5 dejó de usar varias etiquetas y propiedades, cubriremos algunas estrategias alternativas para lograr la funcionalidad requerida.
Este tutorial cubrirá cómo personalizar tablas HTML utilizando CSS en línea e interno.
Establecer el tamaño de las columnas de la tabla HTML
Con frecuencia necesitamos desarrollar tablas con varias columnas y filas para nuestras páginas web. A veces necesitamos diferentes anchos para cada columna de la tabla HTML.
Veamos cómo podemos crear una tabla que tenga columnas con diferentes anchos. Antes de HTML5, la etiqueta table y sus etiquetas asociadas como <th> tenían una propiedad width que permitía a los desarrolladores establecer el ancho requerido de la columna.
<html>
<head>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th width="15%">ID</th>
<th width="70%">Name</th>
<th width="15%">Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>
El código HTML anterior utiliza la propiedad width dentro de la etiqueta <th>. El ancho de la mesa se establece en 100%.
Queremos que la columna Nombre sea más ancha que otras. Entonces asignamos el ancho 70% a la columna Nombre y 15% a las otras dos columnas cada una.
Sumando todas las cifras 70 + 15 + 17 = 100 obtenemos de nuevo 100.
Puede establecer el ancho de la tabla en cualquier porcentaje según sus necesidades. Este porcentaje de ancho depende de la etiqueta principal de la <tabla>, que en nuestro caso es la etiqueta <cuerpo>.
En HTML5, la propiedad width está en desuso. HTML ya no admite atributos y etiquetas en desuso.
Este cambio en HTML5 alienta a los desarrolladores a usar CSS para cualquier estilo necesario. Veamos cómo podemos configurar la tabla y su ancho de columna usando CSS.
Establecer el ancho de las columnas de la tabla usando CSS en línea
Como no podemos usar la propiedad width dentro de <th>,, aún podemos diseñar nuestra tabla usando el estilo dentro de nuestras etiquetas, conocido como estilo en línea. Puede dar un porcentaje de ancho diferente a cada columna.
Verifique el código a continuación para entenderlo claramente.
<html>
<head>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th style="width:10%">ID</th>
<th style="width:40%">First Name</th>
<th style="width:40%">Last Name</th>
<th style="width:10%">Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>Will</td>
<td>40</td>
</tr>
</table>
</body>
</html>
En el código anterior, asignamos 10, 40, 40 y 10 anchos en porcentaje a cada columna. La suma de estas cifras hará un 100.
Dado que establecemos el ancho de nuestra tabla en 100%, debemos dividir cada columna en el mismo rango.
Establecer el ancho de las columnas de la tabla usando CSS interno
Hemos establecido el ancho de columna en el código anterior usando CSS en línea. Pero CSS en línea no es recomendable ya que debemos reescribir mucho si queremos la misma funcionalidad en varias regiones de la página web.
Es una práctica profesional mantener el código HTML y CSS separados. Entonces, veamos cómo podemos diseñar las columnas de nuestra tabla usando CSS interno.
El CSS interno está escrito dentro de la etiqueta style dentro de la etiqueta HTML head.
Método 1: usar una clase CSS
Uno de los métodos más fáciles es asignar una clase a cada etiqueta <th> y luego aplicarles estilo en la etiqueta style. Así es cómo.
<html>
<head>
<style>
table{
width: 100%
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.name {
width: 70%
}
.id, .age {
width: 15%
}
</style>
</head>
<body>
<table>
<tr>
<th class="id">ID</th>
<th class="name">Name</th>
<th class="age">Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>
Bastante simple. ¿Bien? Pero este método no es eficiente en el caso de un gran número de columnas.
Digamos que tenemos una tabla con 10 o 20 columnas y queremos diferentes anchos para cada una. Asignar clases a cada etiqueta y diseñarlas todas será una tarea agitada.
Debería haber alguna forma de hacer esto sin dar clases a las etiquetas y llamarlas directamente en la etiqueta estilo. Veamos esta técnica en el siguiente método.
Método 2: usar el selector de pseudoclase CSS
Veamos otro método para lograr el resultado esperado usando un código mejor y más eficiente.
<html>
<head>
<style>
table{
width: 100%
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th:nth-child(1) {
width: 5%
}
th:nth-child(2) {
width: 70%
}
th:nth-child(3) {
width: 25%
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>
Entendamos lo que hicimos en el código. Un selector de CSS coincide con el elemento nth child de cada padre.
El selector de pseudoclase de CSS :nth-child(n) se utiliza para comparar elementos según su ubicación en un par de hermanos. La n puede ser cualquier número o una palabra clave como par o impar.
Seleccionamos la etiqueta <th> en la etiqueta style y llamamos al selector nth-child en ella. El nth-chid(1) significa que seleccionará la columna ID, nth-child(2) seleccionará la columna Name, y así sucesivamente.
De esta forma, puede personalizar el ancho de la columna sin asignar una clase a cada etiqueta.
Otro punto importante aquí es que si especifica el ancho de las columnas ID y Edad, no es necesario seleccionar el porcentaje de ancho de la columna Nombre, ya que el ancho restante se le asignará automáticamente, y nos dará el mismo resultado.
Compruebe el ejemplo a continuación.
<html>
<head>
<style>
table{
width: 100%
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th:nth-child(1) {
width: 5%
}
th:nth-child(3) {
width: 25%
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>