Saltar al contenido principal

🏁 Tablas en HTML

En HTML, las tablas se crean con la etiqueta table y los elementos de la tabla se crean con la etiqueta tr y td.

<table border="1">
  <tr>
    <td>Lunes</td>
    <td>Martes</td>
    <td>Miércoles</td>
    <td>Jueves</td>
    <td>Viernes</td>
  </tr>
  <tr>
    <td>Estudiar</td>
    <td>Estudiar</td>
    <td>Estudiar</td>
    <td>Estudiar</td>
    <td>Estudiar</td>
  </tr>
  <tr>
    <td>Descanzar</td>
    <td>Descanzar</td>
    <td>Descanzar</td>
    <td>Descanzar</td>
    <td>Descanzar</td>
  </tr>
</table>

Esto da como resultado lo siguiente:

Componentes

Como puedes ver, con la etiqueta <tr> hemos creado una nueva fila y con la etiqueta <td> creamos una nueva celda.

Expansión de celdas​

Para expandir una celda, debes usar el atributo colspan, por ejemplo:

<table border="1">
  <tr>
    <td colspan="5" align="center">Horario</td>
  </tr>
  <tr>
    <td>Lunes</td>
    <td>Martes</td>
    <td>Miércoles</td>
    <td>Jueves</td>
    <td>Viernes</td>
  </tr>
  <tr>
    <td>Estudiar</td>
    <td>Estudiar</td>
    <td>Estudiar</td>
    <td>Estudiar</td>
    <td>Estudiar</td>
  </tr>
  <tr>
    <td>Descanzar</td>
    <td>Descanzar</td>
    <td>Descanzar</td>
    <td>Descanzar</td>
    <td>Descanzar</td>
  </tr>
</table>

Esto da como resultado lo siguiente:

Componentes

Nota

Para expandir una celda entre filas, debes usar el atributo rowspan.

Explicación en video​