¿Cómo crear tablas en HTML?

En esta ocasión, vamos a aprender cómo crear tablas en HTML. Esto es ideal para poder mostrar data o información. Desde ahora te digo que las tablas en HTML no deberían ser usadas para crear estructuras de páginas webs. Antiguamente, esto era muy común. Así que sigue leyendo para saber como hacer una tabla en html.

Cómo crear tabla HTML

Cómo hacer una tabla en HTML:

1: Etiquetas de estructura de tablas en HTML:

  • <table> … </table> define una tabla
  • <tr> … </tr> define una fila
  • <th> … </th> define una celda de encabezado
  • <td> … </td> define una celda

2: Estructura general de una tabla HTML:

Por tanto, para crear una tabla, solo debemos de seguir la siguiente estructura. En este caso tenemos una tabla con 3 filas. La primera fila contiene 3 celdas de encabezado, y las otras dos filas contienen celdas con data.

<table>
  <tr>
    <th>Factura</th>
    <th>Cliente</th>
    <th>Monto</th>
  </tr>
  <tr>
    <td>F0103048</td>
    <td>Inversiones LTD</td>
    <td>$450</td>
  </tr>
  <tr>
    <td>F0103049</td>
    <td>Sol Andes</td>
    <td>$680</td>
  </tr>
</table>

3: Resultado de la tabla HTML:

FacturaClienteMonto
F0103048Inversiones LTD$450
F0103049Sol Andes$680

Como puedes ver, crear una tabla HTML es sencillo pero se ve un poco básica. Si hay que tener en cuenta que debemos usar CSS para poder darle estilo a una tabla. A través de CSS podemos agregarle borde, fondo, colores, alineación de texto y más.


¿Cómo crear tabla HTML online?

Ahora, si lo deseas, hay muchas herramientas online que te permiten crear tablas HTML como las desees. Una de estas herramientas es HTML Div Table Generator. Ahí solo debes indicar cuantas columnas y filas deseas, y se generará un código HTML.

Además, si ya deseas una tabla con más estilo y totalmente personalizada, puedes utilizar Table Styler. Con esta herramienta vas a poder personalizar cada detalle de tu tabla. Con esto, se generará un código HTML y CSS más extenso.


Ejemplos de tablas en HTML:

Tabla Simple:
Esta sería una tabla simple, con celdas de encabezado y borde simple.

See the Pen
Tabla Simple
by regardis (@regardis)
on CodePen.

Tabla con Celdas Combinadas:
Esta es una tabla más elaborada. Tiene celdas combinas y bordes diferentes.

See the Pen
Tabla con celdas combinadas
by regardis (@regardis)
on CodePen.


Comentarios

  • Podemos crear el número de filas/columnas o celdas combinadas que desees.
  • Podemos personalizar una tabla HTML con CSS.

Si tienes algun problema, déjanos un comentario.


También te interesaría...

Suscríbete a nuestra lista de correo

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *


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