Unidad 9. Básico: HTML. Tablas (I)

Tablas: filas y celdas

Una tabla es un conjunto de celdas organizadas que pueden contener elementos, normalmente destinadas a representar datos.

Antes era muy frecuente utilizar las tablas para maquetar las páginas web, estructurando todo el contenido dentro de una tabla, lo que hacía sencillo distribuir el espacio. Pero ya hemos visto que la recomendación actual sugiere el uso de capas y estilos CSS para este fin.

Las tablas, están divididas horizontalmente en filas, y verticalmente en columnas.

En html, utilizamos la etiqueta <table></table> para crear una tabla.

Dentro de la tabla, debemos de crear filas, utilizando la etiqueta <tr></tr>.

Y dentro de cada fila, creamos las distintas celdas que la componen, con la etiqueta <td></td>. Todas las filas deben de tener el mismo número de celdas.

Dentro de cada celda, puede ir cualquier elemento html, o podemos escribir texto directamente.

Con lo que hemos visto, podríamos crear una tabla simple, como la del siguiente ejemplo:

<table border="1">
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
  <tr>
    <td>Celda 3</td>
    <td>Celda 4</td>
  </tr>
</table>

Fusionar celdas

Podemos unir o fusionar celdas adyacentes, para tener celdas de mayor tamaño que otras, siempre que el resultado sea un rectángulo. Es decir, no podríamos unir las celdas formando una "L" o una "U". Para hacerlo, tenemos los atributos colspan y rowspan.

El atributo colspan extiende la celda tantas celdas a la derecha como le indiquemos, contando la celda actual.

<table bordear="1">
  <tr>
    <td>Celda</td>
    <td>Celda</td>
    <td>Celda</td>
    <td>Celda</td>
  </tr>
  <tr>
    <td colspan="2">Celda cs2</td>
    <td>Celda</td>
    <td>Celda</td>
  </tr>
  <tr>
    <td colspan="3">Celda cs3</td>
    <td>Celda</td>
  </tr>
  <tr>
    <td colspan="4">Celda cs4</td>
  </tr>
</table>

Observa que al expandir la celda, en la fila ponemos menos etiquetas <td>.

El atributo rowspan expande la celda tantas celdas hacia abajo como le indiquemos, contando la celda actual.

<table bordear="1">
  <tr>
    <td>Celda</td>
    <td rowspan="2">Celda rs2</td>
    <td rowspan="3">Celda rs3</td>
    <td rowspan="4">Celda rs3</td>
  </tr>
  <tr>
    <td>Celda</td>
  </tr>
  <tr>
    <td>Celda</td>
    <td>Celda</td>
  </tr>
  <tr>
    <td>Celda</td>
    <td>Celda</td>
    <td>Celda</td>
  </tr>
</table>

Observa que al aplicar rowspan a una celda, "cogemos" una celda de la siguiente fila, por lo que la siguiente celda tendrá una celda menos.

Y en cualquier caso podemos combinar estos dos atributos en la misma celda:

<table bordear="1">
  <tr>
    <td colspan="2" rowspan="2">Celda cs2 rs2</td>
    <td>Celda</td>
  </tr>
  <tr>
    <td>Celda</td>
  </tr>
  <tr>
    <td>Celda</td>
    <td>Celda</td>
    <td>Celda</td>
  </tr>
</table>

 Cursos Informática Gratuitos