Alto y ancho de una tabla en HTML

24/Jun/2015 CSS ,

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 como 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:

  1. <th>País</th>
  2. <th>Capital</th>
  3. <th>Superficie</th>
  4. <th>Habitantes</th>
  5. </tr>
  6. <td>España</td>
  7. <td>Madrid</td>
  8. <td>504.645 km<sup>2</sup></td>
  9. <td>46,6 M</td>
  10. </tr>

Ahora creamos en la parte superior de nuestra página web un código CSS. Para ello deberemos de utilizar el elemento style.

  1. // Estilos CSS
  2. </style>
  3. </head>

Para indicar las propiedades de la tabla utilizamos table como selector:

  1. table {
  2. ...
  3. }

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:

  1. table {
  2. width: 50%;
  3. height: 300px;
  4. }

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.

Otras unidades, además del porcentaje y los pixels (px), que podemos utilizar para definir el alto y el ancho de una tabla en HTML son las relativas al tamaño de la fuente (em).

Vídeos sobre CSS


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D