
Temas tratados en esta entrada
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>
...
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias