Tablas HTML

Hola a todos, hoy os explicare como utilizar las tablas en HTML.

Muestra un conjunto de elementos relacionados en forma de matriz. No se deben usar para maquetar la posición de los elementos.

La tabla debe ir entre las etiquetas <table> y </table>. Si queremos que tengan borde, ponemos el atributo border en table.

Las tablas se construyen de izquierda a derecha (columnas) y de arriba abajo (filas).

Las filas se indican con la etiqueta <tr> y dentro de esta se incluyen las columnas con la etiqueta <td>. Cada una de estas etiquetas se deben cerrar. Recuerda que la etiqueta <tr> son las filas, si queremos por ejemplo una tabla de 4 columnas y 3 filas, habra 3 <tr> con 4 <td> dentro de cada <tr>.

No podemos poner etiquetas <td> sin poner una etiqueta <tr>.

Veamos un simple ejemplo:

<table border=1>
   <tr>
      <td>celda 1</td>
      <td>celda 2</td>
      <td>celda 3</td>
      <td>celda 4</td>
   </tr>
   <tr>
      <td>celda 5</td>
      <td>celda 6</td>
      <td>celda 7</td>
      <td>celda 8</td>
   </tr>
   <tr>
      <td>celda 9</td>
      <td>celda 10</td>
      <td>celda 11</td>
      <td>celda 12</td>
   </tr>
</table>

Así es como quedaría:

También podemos dividir la tabla en partes: cabecera(thead), cuerpo(tbody) y pie(tfoot), el cambio mas significativo de esto es en la cabecera, el resto se indica totalmente igual. En la cabecera, lo único que cambia es que en vez de usar la etiqueta <td> se usa la etiqueta <th>.

Veamos un ejemplo:

<table border=1>
  <thead>
     <tr>
       <th>celda 1</th>
       <th>celda 2</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>celda 3</td>
       <td>celda 4</td>
     </tr>
   </tbody>
   <tfoot>
     <tr>
       <td>celda 5</td>
       <td>celda 6</td>
     </tr>
   </tfoot>
</table>

Así es como quedaría:

Para ponerle un titulo a la tabla, usamos la etiqueta <caption> justo después de table.

<table border=1>
  <caption>ejemplo tabla</caption>
  <thead>
     <tr>
       <th>celda 1</th>
       <th>celda 2</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>celda 3</td>
       <td>celda 4</td>
     </tr>
   </tbody>
   <tfoot>
     <tr>
       <td>celda 5</td>
       <td>celda 6</td>
     </tr>
   </tfoot>
</table>

Así es como quedaría:

Por ultimo, veremos como podemos fusionar celdas y filas en nuestras tablas. Para fusionar filas se usa el atributo rowspan=»x» y para fusionar columnas se usa el atributo colspan=»x». Donde x es un numero.

Vamos a empezar fusionando filas, recuerda que cuando fusionemos filas, la parte que ocupe de mas no debemos de indicarlo:

<table border=1>
   <tr>
     <td>celda 1</td>
     <td>celda 2</td>
     <td rowspan="3">celda 3</td>
     <td>celda 4</td>
   </tr>
   <tr>
     <td rowspan="2">celda 5</td>
     <td>celda 6</td>
     <td rowspan="3">celda 7</td>
   </tr>
   <tr>
     <td>celda 8</td>
   </tr>
   <tr>
     <td>celda 9</td>
     <td>celda 10</td>
     <td>celda 11</td>
   </tr>
</table>

Así es como quedaría:

Sigamos fusionando columnas, recuerda que cuando fusionemos columnas, la parte que ocupe de mas no debemos de indicarlo:

<table border=1>
    <tr>
      <td colspan="3">celda 1</td>
      <td>celda 2</td>
    </tr>
    <tr>
      <td>celda 3</td>
      <td colspan="2">celda 4</td>
      <td>celda 5</td>
    </tr>
    <tr>
      <td colspan="4">celda 6</td>
    </tr>
    <tr>
      <td>celda 7</td>
      <td>celda 8</td>
      <td>celda 9</td>
      <td>celda 10</td>
    </tr>
</table>

Así es como quedaría:

Espero que os sea de ayuda.