23- 📏 Tamaños de Tablas en HTML: Guía Rápida y Fácil

Temas tratados en esta entrada

• Anchura de una tabla
• Anchura de una columna
• Altura de una fila

---

Anchura de una tabla

Las tablas HTML pueden tener tamaños variados en cuanto a su anchura total. La anchura de una tabla se puede ajustar utilizando el atributo 'style' junto con la propiedad 'width'. Esta propiedad permite especificar el tamaño de toda la tabla de manera flexible.

Para establecer la anchura de una tabla, se puede aplicar el 'style' directamente en el elemento 'table' con la propiedad 'width'. La anchura puede ser definida en píxeles (px) para un tamaño fijo o en porcentaje (%) para que se ajuste dinámicamente al ancho del contenedor donde está ubicada la tabla.

La propiedad 'width' es la clave para controlar cómo la tabla ocupa el espacio disponible en la página web. Es común establecer un 100% para que la tabla ocupe todo el ancho disponible del contenedor, o un valor fijo si se desea una anchura específica. Además, es posible modificar la anchura de la tabla mediante CSS, lo que ofrece más control sobre el diseño responsivo.

Ejemplo

En este ejemplo, vamos a crear tres tablas con diferentes distribuciones de anchura entre sus columnas. Cada tabla tiene un estilo único donde se ajusta la anchura de las columnas usando porcentajes.

Columna 1	Columna 2	Columna 3
Fila 1, Columna 1	Fila 1, Columna 2	Fila 1, Columna 3

Columna 1	Columna 2	Columna 3
Fila 1, Columna 1	Fila 1, Columna 2	Fila 1, Columna 3

Columna 1	Columna 2	Columna 3
Fila 1, Columna 1	Fila 1, Columna 2	Fila 1, Columna 3

Código del ejemplo

<!-- Tabla 1: Todas las columnas tienen la misma anchura -->
<table style='width: 100%; border: 1px solid #000; border-collapse: collapse;'>
  <tr>
    <th style='width: 33%; border: 1px solid #000;'>Columna 1</th>
    <th style='width: 33%; border: 1px solid #000;'>Columna 2</th>
    <th style='width: 33%; border: 1px solid #000;'>Columna 3</th>
  </tr>
  <tr>
    <td style='border: 1px solid #000;'>Fila 1, Columna 1</td>
    <td style='border: 1px solid #000;'>Fila 1, Columna 2</td>
    <td style='border: 1px solid #000;'>Fila 1, Columna 3</td>
  </tr>
</table>

<!-- Tabla 2: Distribución desigual de las columnas -->
<table style='width: 100%; border: 1px solid #000; border-collapse: collapse;'>
  <tr>
    <th style='width: 25%; border: 1px solid #000;'>Columna 1</th>
    <th style='width: 25%; border: 1px solid #000;'>Columna 2</th>
    <th style='width: 25%; border: 1px solid #000;'>Columna 3</th>
  </tr>
  <tr>
    <td style='border: 1px solid #000;'>Fila 1, Columna 1</td>
    <td style='border: 1px solid #000;'>Fila 1, Columna 2</td>
    <td style='border: 1px solid #000;'>Fila 1, Columna 3</td>
  </tr>
</table>

<!-- Tabla 3: Una columna más ancha que las demás -->
<table style='width: 100%; border: 1px solid #000; border-collapse: collapse;'>
  <tr>
    <th style='width: 40%; border: 1px solid #000;'>Columna 1</th>
    <th style='width: 20%; border: 1px solid #000;'>Columna 2</th>
    <th style='width: 40%; border: 1px solid #000;'>Columna 3</th>
  </tr>
  <tr>
    <td style='border: 1px solid #000;'>Fila 1, Columna 1</td>
    <td style='border: 1px solid #000;'>Fila 1, Columna 2</td>
    <td style='border: 1px solid #000;'>Fila 1, Columna 3</td>
  </tr>
</table>
      

---

Anchura de una columna

En las tablas HTML, la anchura de las columnas se puede ajustar de forma individual. Para establecer la anchura de una columna, se puede utilizar el atributo 'style' con la propiedad 'width' en los elementos 'col' o directamente en las celdas 'td' o 'th'.

Las columnas pueden tener un tamaño fijo en píxeles (px) o ajustarse mediante porcentajes (%) para distribuir el espacio en función del tamaño total de la tabla. Si no se define una anchura específica para las columnas, el navegador ajustará automáticamente el tamaño de las mismas en función del contenido.

Al definir la anchura de una columna con porcentajes, es importante tener en cuenta el tamaño total de la tabla. Esto permite que las columnas se adapten de manera proporcionada al ancho de la tabla, lo que es útil para diseños responsivos.

También es posible utilizar CSS para controlar de manera más precisa el tamaño de las columnas, especialmente cuando se desea asegurar que una o más columnas tengan un tamaño específico dentro de la tabla.

Ejemplo

En este ejemplo, se ajusta la anchura de la primera columna para que ocupe el 70% del total, mientras que las otras columnas se ajustan automáticamente al espacio restante.

Nombre	Apellido	Edad
juan	Semedo	25
Emilia	George	84

Código del ejemplo

<!-- Tabla con una columna más ancha -->
<table style='width: 100%; border: 1px solid #000; border-collapse: collapse;'>
  <tr>
    <th style='width: 70%; border: 1px solid #000;'>Nombre</th>
    <th style='border: 1px solid #000;'>Apellido</th>
    <th style='border: 1px solid #000;'>Edad</th>
  </tr>
  <tr>
    <td style='border: 1px solid #000;'>juan</td>
    <td style='border: 1px solid #000;'>Semedo</td>
    <td style='border: 1px solid #000;'>25</td>
  </tr>
  <tr>
    <td style='border: 1px solid #000;'>Emilia</td>
    <td style='border: 1px solid #000;'>George</td>
    <td style='border: 1px solid #000;'>84</td>
  </tr>
</table>
      

---

Altura de una fila

La altura de una fila en una tabla HTML se puede ajustar utilizando el atributo 'style' con la propiedad 'height' en los elementos 'tr' (filas) o en las celdas individuales 'td' y 'th'. Esto permite definir una altura fija o adaptable para cada fila dentro de la tabla.

Es posible establecer la altura de una fila en píxeles (px) para una medida exacta, o utilizar un valor en porcentaje (%) para que la fila se ajuste proporcionalmente al espacio disponible en el contenedor de la tabla.

Si no se especifica una altura, el navegador ajustará automáticamente la altura de las filas en función del contenido de las celdas. Sin embargo, en algunos casos, definir una altura mínima o exacta puede ser útil para mantener la consistencia en el diseño de la tabla, especialmente cuando se combinan celdas con diferentes cantidades de contenido.

Al igual que con la anchura, se puede utilizar CSS para controlar la altura de las filas y hacer que el diseño de la tabla sea más flexible, especialmente cuando se trabaja con contenido dinámico o tablas que deben ser responsivas.

Ejemplo

En este ejemplo, se ajusta la altura de la primera fila para que tenga una altura específica de 100 píxeles, mientras que las demás filas se ajustan automáticamente al contenido que contienen.

Nombre	Apellido	Edad
juan	Semedo	25
Emilia	George	84

Código del ejemplo

<!-- Tabla con una fila más alta -->
<table style='width: 100%; border: 1px solid #000; border-collapse: collapse;'>
  <tr style='height: 100px;'>
    <th style='border: 1px solid #000;'>Nombre</th>
    <th style='border: 1px solid #000;'>Apellido</th>
    <th style='border: 1px solid #000;'>Edad</th>
  </tr>
  <tr>
    <td style='border: 1px solid #000;'>juan</td>
    <td style='border: 1px solid #000;'>Semedo</td>
    <td style='border: 1px solid #000;'>25</td>
  </tr>
  <tr>
    <td style='border: 1px solid #000;'>Emilia</td>
    <td style='border: 1px solid #000;'>George</td>
    <td style='border: 1px solid #000;'>84</td>
  </tr>
</table>
      

---

Ir al índice