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 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:
| 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.
¿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.
