Crear tablas en Html

En este tutorial aprenderemos a crear tablas en HTML utilizando  la etiqueta <table>. Las tablas son estructuras muy utilizadas para organizar datos en filas y columnas, donde cada fila se compone de un conjunto de celdas. Para definir la tabla usaremos la etiqueta <table> (table) Para las filas usaremos <tr> (table row) Para las celdas usaremos <th> (table head) para las celdas de la cabecera y <td> (table data) para el resto de celdas.

Veamos un ejemplo de tabla en html y luego veremos su código

Código de la tabla

<table border="1px">
  <tr>
    <th>Nombre</th>
    <th>Apellidos</th>
    <th>Edad</th>
    <th>Curso</th>
  </tr>
  <tr>
    <td>Eduardo</td>
    <td>Soria Gómez</td>
    <td>12</td>
    <td>Primero D</td>
  </tr>
  <tr>
    <td>Carlos</td>
    <td>Pérez Díaz</td>
    <td>14</td>
    <td>Tercero A</td>
  </tr>
  <tr>
    <td>Martín</td>
    <td>Pereira Silva</td>
    <td>11</td>
    <td>Primero B</td>
  </tr>
</table

Como podemos ver, le hemos añadido un borde de 1 pixel  a la tabla con el atributo «border» para que se vean más fácilmente las celdas. Al poner las etiquetas <th> vemos como el texto se pone automáticamente en negrita. Existen otros atributos para crear tablas personalizadas como «colspan» y «rowspan«

Unificar dos o más celdas con el atributo «colspan»

Veamos el código

<table border="1px">
  <tr>
    <th colspan="2">Nombre</th>
    <th>Edad</th>
    <th>Curso</th>
  </tr>
  <tr>
    <td>Eduardo</td>
    <td>Soria Gómez</td>
    <td>12</td>
    <td>Primero D</td>
  </tr>
  <tr>
    <td>Carlos</td>
    <td>Pérez Díaz</td>
    <td>14</td>
    <td>Tercero A</td>
  </tr>
  <tr>
    <td>Martín</td>
    <td>Pereira Silva</td>
    <td>11</td>
    <td>Primero B</td>
  </tr>
</table

Unificar dos o más columnas con el atributo «rowspan»

Veamos el código

<table border="1px">
  <tr>
    <th colspan="2">Nombre</th>
    <th>Edad</th>
    <th>Curso</th>
  </tr>
  <tr>
    <td>Eduardo</td>
    <td>Soria Gómez</td>
    <td>12</td>
    <td>Primero D</td>
  </tr>
  <tr>
    <td rowspan="2">Carlos</td>
    <td>Pérez Díaz</td>
    <td>14</td>
    <td>Tercero A</td>
  </tr>
  <tr>
    <td>Pereira Silva</td>
    <td>11</td>
    <td>Primero B</td>
  </tr>
</table

Título de la tabla. Etiqueta <caption>

Podemos definir el título a la tabla justo después de la etiqueta <table>. Veamos un ejemplo

Código de la tabla

<table border="1px">
  <caption>Lista de alumnos del colegio</caption>
  <tr>
    <th>Nombre</th>
    <th>Apellidos</th>
    <th>Edad</th>
    <th>Curso</th>
  </tr>
  <tr>
    <td>Eduardo</td>
    <td>Soria Gómez</td>
    <td>12</td>
    <td>Primero D</td>
  </tr>
  <tr>
    <td>Carlos</td>
    <td>Pérez Díaz</td>
    <td>14</td>
    <td>Tercero A</td>
  </tr>
</table

Más tutoriales de HTML y CSS

Si te ha gustado no olvides compartir en redes sociales.

[addthis tool=»addthis_inline_share_toolbox_6jt6″]

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo