Crear tablas en Html

Crear tablas en Html

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

Ejemplo de tabla en Html
Ejemplo de tabla

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”

Ejemplo de colspan en tablas Html
Ejemplo de 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”

Ejemplo de rowspan en tablas Html
Ejemplo de 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

Ejemplo de caption en tablas Html
Ejemplo de caption

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

Si te ha gustado no olvides compartir en redes sociales.

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

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
Ir a la barra de herramientas