Mediante el lenguaje CSS podemos definir el alto y ancho de una tabla en HTML de una forma muy sencilla. Lo primero que tenemos que saber es cómo crear una tabla en HTML.
Al crear una tabla en HTML vemos que el elemento principal HTML es el elemento table. Así que a la hora de definir el alto y ancho de una tabla en HTML lo que tenemos que hacer es modificar las propiedades de este elemento table.
La tabla que podemos manejar es una parecida a la siguiente:
<table> <tr> <th>País</th> <th>Capital</th> <th>Superficie</th> <th>Habitantes</th> </tr> <tr> <td>España</td> <td>Madrid</td> <td>504.645 km<sup>2</sup></td> <td>46,6 M</td> </tr> </table>
Hemos utilizado el elemento tr para generar las filas, el elemento th para generar celdas de cabecera y el elemento td para generar las celdas de contenido.
Ahora creamos en la parte superior de nuestra página web un código CSS donde daremos estilo a nuestra tabla. Para ello deberemos de utilizar el elemento style.
<head> <style> // Estilos CSS </style> </head>
Para indicar las propiedades de la tabla utilizamos table como selector:
table {
...
}
Ahora para definir el alto y ancho de una tabla en HTML vamos a utilizar las propiedades width y height. Podemos definir el alto y el ancho mediante unidades fijas o mediante porcentajes. Por ejemplo podríamos definir lo siguiente:
table {
width: 50%;
height: 300px;
}
En este caso hemos indicado que el ancho de la tabla es el 50% del ancho de la página y que el alto es de 300px.
Podríamos utilizar otras unidades, además del porcentaje y los pixels (px), para definir el alto y el ancho de una tabla en HTML como son las relativas al tamaño de la fuente (em).
Es importante saber que al utilizar el selector table el ancho y alto de la tabla se aplicará a todas las tablas que existan dentro de la página. Si por el contrario queremos aplicarlo a una tabla en concreto o a un conjunto de tablas podemos apoyarnos en clases o indicadores.
Por ejemplo, si queremos hacerlo a una tabla en concreto utilizaremos el identificador. Para ello lo primero será crear un atributo id dentro de la tabla.
<table id="mitabla"> <tr> <th>País</th> <th>Capital</th> <th>Superficie</th> <th>Habitantes</th> </tr> <tr> <td>España</td> <td>Madrid</td> <td>504.645 km<sup>2</sup></td> <td>46,6 M</td> </tr> </table>
Y en este caso el estilo lo asignaremos al nombre del identificador “mitabla” de la siguiente manera:
#mitabla {
width: 50%;
height: 300px;
}
¿Sabrías cómo dar el estilo al ancho y alto de la tabla mediante una clase? Déjanoslo en los comentarios.
