Tablas en HTML

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Curso de HTML

30.  
31.  
34.  
37.  
50.  
<table border="1px">
 <tr>
  <td>La celda</td>
 </tr>
</table>
  • La etiqueta td (d de data) no formatea por defecto su contenido.
  • La etiqueta th (h de head), centra el contenido de la celda y lo pone en negrita. Es un atajo para poner encabezados.

Ejercicios

Ejercicio tabla

Ejercicios colspan rowspan

Los siguientes atributos se añaden a la celda, no a la fila:

  • colspan=»2″ : Inserta una celda vacía y la une a la celda a la que le hemos puesto el atributo.
  • rowspan=»2″: Inserta una celda vacía y la une a la celda a la que le hemos puesto el atributo.

Ejercicio Picasso

tbody, thead, tfoot

  • Usamos tbody cuando deseamos que una tabla tenga múltiples cuerpos.
  • tbody debe usarse junto con thead y tfoot.
<table border="1" >
 <thead>
  <tr>
   <th>Elementos</th><th>de</th><th>la</th><th>cabecera</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <th>Y</th><th>elementos</th><th>del</th><th>pie</th>
  </tr>
 </tfoot>

 <tbody>
  <tr>
   <td>1</td><td>bla bla</td><td>blep</td><td>blep</td>
  </tr>
  <tr>
   <td>2</td><td>bla bla</td><td>bla</td><td>bla</td>
  </tr>
  <tr>
   <td>3</td><td>bura bura</td><td>bla</td><td>bura bura</td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <td>4</td><td>blep blep</td><td>Ok</td><td>Ok</td>
  </tr>
  <tr>
   <td>5</td><td>blip blip</td><td>Ok</td><td>Ok</td>
  </tr>
 </tbody>
</table>

Usando colgroup

<table border="1" >
 <caption>T&iacute;tulo de la tabla</caption>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <colgroup style="background-color:green"></colgroup>

  <thead>
   <tr>
    <th>Elementos</th><th>de</th><th>la</th><th>cabecera</th>
   </tr>
  </thead>

  <tfoot>
   <tr>
    <th>Y</th><th>elementos</th><th>del</th><th>pie</th>
   </tr>
  </tfoot>

  <tbody>
   <tr>
    <td>1</td><td>bla bla</td>
    <td>blep</td><td>blep</td>
   </tr>
   <tr>
    <td>2</td><td>bla bla</td><td>bla</td><td>bla</td>
   </tr>
   <tr>
    <td>3</td><td>bura bura</td><td>bla</td><td>bura bura</td>
   </tr>
  </tbody>

  <tbody>
   <tr>
    <td>4</td><td>blep blep</td><td>Ok</td><td>Ok</td>
  </tr>
  <tr>
   <td>5</td><td>blip blip</td><td>Ok</td><td>Ok</td>
  </tr>
  </tbody>
</table>

Usando rules=»groups»

Ver código fuente

Ejercicio

← Ejercicio etiquetas básicas de HTML
Hacer una newsletter con HTML →