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.

3: Resultado de la tabla HTML:

Factura Cliente Monto
F0103048 Inversiones LTD $450
F0103049 Sol 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.

Publicidad



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.

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


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

Etiquetas:,

Publicidad

Deje un comentario