➜ Tablas HTML
Lección de Tablas en HTML - Curso de Diseño Web | Aprende a crear y diseñar tablas en HTML. Esta lección te enseñará cómo estructurar y presentar datos de manera efectiva utilizando tablas en tu sitio web.
Aprender a crear tablas y agregar contenido dentro de sus celdas.
Crear tablas HTML.
Organizar contenido de mi página web.
Las tablas HTML permiten organizar los datos en filas y columnas.
La etiqueta define una tabla HTML
- Cada fila de la tabla se define con una etiqueta
- Cada encabezado de la tabla se define con una etiqueta
Mi primera página web
Pais |
Capital |
|---|---|
Perú |
Lima |
Argentina |
Buenos Aires |
Brasil |
Brasilia |
Colombia |
Bogotá |
|
|
|---|
En HTML, puedes crear tablas para organizar datos en filas y columnas utilizando las etiquetas <table>, <tr> (fila), <th> (encabezado de columna) y <td> (celda de datos). Aquí tienes un ejemplo de cómo crear una tabla sencilla:
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>País</th>
</tr>
<tr>
<td>Juan</td>
<td>25</td>
<td>España</td>
</tr>
<tr>
<td>Maria</td>
<td>30</td>
<td>México</td>
</tr>
<tr>
<td>Carlos</td>
<td>22</td>
<td>Argentina</td>
</tr>
</table>
En este ejemplo:
<table>: Define la tabla.<tr>: Define una fila de la tabla.<th>: Define una celda de encabezado de columna, que generalmente se muestra en negritas y centrada.<td>: Define una celda de datos, que contiene información específica.
Puedes personalizar tu tabla agregando más filas y columnas, así como aplicando estilos con CSS para mejorar la apariencia. A continuación, te muestro cómo agregar bordes a la tabla utilizando CSS:
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #000;
padding: 8px;
text-align: left;
}
</style>
El CSS anterior establece un borde sólido en todas las celdas de la tabla y ajusta el espaciado interior de las celdas. También hace que la tabla ocupe el 100% del ancho disponible.
Recuerda que este es un ejemplo básico de cómo crear una tabla en HTML. Puedes personalizar aún más tu tabla, agregar encabezados adicionales, combinar celdas y aplicar estilos según tus necesidades y preferencias. Las tablas son útiles para mostrar datos de manera organizada en tu página web.
1750 visitas
Capítulo 8 – Capas HTML »
