25. Tamaños de una tabla

Las tablas en HTML pueden tener diferentes tamaños para cada columna, fila o tabla entera. Usando el atributo style con las propiedades width y height podemos especificar el tamaño de una tabla, fila o columna.

Ancho de una tabla

Para establecer el ancho de una tabla, agrega el atributo style al elemento <table>:

Ejm

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Nota: Usar un porcentaje como unidad de tamaño para un ancho significa qué tan ancho será este elemento en comparación con su elemento principal, que en este caso es el elemento <body>.

Ancho de una columna

Para establecer el tamaño de una columna específica, agrega el atributo style en un elemento <th> o <td>.

Ejm

<table style="width:100%">
  <tr>
    <th style="width:70%">Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Ancho de una fila

Para establecer la altura de una fila específica, agregue el atributo style en un elemento de fila de la tabla.

Ejm

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr style="height:200px">
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>
Scroll al inicio