Ancho de columnas en tabla

22/Jun/2015 CSS , , , 4 Comentarios
Programación CSS

En este ejemplo vamos a ver cómo podemos definir el ancho de columnas en tabla HTML para que dicho ancho sea diferente en cada una de las columnas que tengamos.

Lo primero para definir el ancho de columnas en tabla HTML vamos a necesitar crear una tabla. Los elementos de tabla en HTML que vamos a utilizar son table para definir la tabla, tr para definir la fila y td para definir la celda.

De esta manera vamos a crear nuestra tabla:

<table>
  <tbody>
    <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>
  </tbody>
</table>

Para poder definir el ancho de columnas en tabla tenemos que recurrir al lenguaje CSS. En concreto el lenguaje CSS va a definir el ancho de las columnas mediante los elementos td que son los que representan a las celdas.

Así dentro de nuestra página habrá una parte que pondremos con todo el código CSS. Este código irá dentro de los elementos style.

<style>
  <!-- Código CSS -->
</style>

Para poder acceder al elemento td utilizaremos el selector:

table td { ... }

Si queremos acceder a todos las celdas de la primera columna utilizaremos el pseudoelemento nth-child, al cual pasaremos el valor 1.

table td:nth-child(1) {
 ...
}

Si queremos darle el ancho a otras columnas podemos hacerlo cambiando el valor que pasamos como parámetro: 2, 3, 4,…

Si solo queremos dar el ancho a la primera columna también podríamos utilizar el pseudolemento first-child.

table td:first-child {
 ...
}

Solo nos queda utilizar la propiedad width para indicar el tamaño que queramos darle a la columna.

De esta forma podríamos definir el ancho de cada una de las columnas de la tabla de la siguiente forma:

table td:first-child {
  width: 100px;
}

table td:nth-child(2) {
  width: 100px;
}

table td:nth-child(3) {
  width: 200px;
}

table td:last-child {
  width: 150px;
}

Ya hemos visto lo sencillo que es poder darle un ancho a ca una de las columnas atendiendo a la posición que estás ocupen dentro de la tabla.

Vídeos sobre CSS


4 comentarios en “Ancho de columnas en tabla”

Víctor Cuervo

gabriel araya garcia

Que incompleto ejemplo, no sale como se invocaria desde el HTML. Todo a medias.

Víctor Cuervo

Víctor Cuervo

Buenas Gabriel,

Parece que había un problema con el renderizado de la página. Parece que ahora se ve todo correcto. Espero que así quede más claro y pueda ser de utilidad.

Saludos.

Víctor Cuervo

Ericka Simancas

Hola muchas gracias, por el articulo. Quisiera preguntar algo y si necesito ampliar la columna solo en dispositivos moviles. Como podria acceder en ese caso para hacer ese mismo cambio?…Agradezco tu respuesta

Víctor Cuervo

Víctor Cuervo

Buenas,

Tendrás que utilizar mediaqueries. La idea es que la mediaquerie define el tipo de dispositivos a los que quieres aplicar el estilo. Lo tiene detallado en…
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Por ejemplo si quieres aplicarlo solo a dispositivos cuyo ancho mínimo sea de 680p y que el dispositivo esté en vertical sería algo así…

@media (min-width: 680px), screen and (orientation: portrait) { ... }

Espero que esto te pueda orientar.

Saludos.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.