Ejemplo de Tabla HTML Simple
Creación de tablas HTML: Un ejemplo práctico
Las tablas HTML son una herramienta poderosa para mostrar datos estructurados y organizar la información en un formato tabular. En este artículo, exploraremos un ejemplo práctico de cómo crear una tabla HTML utilizando código.
Ejemplo de tabla HTML
Imaginemos que queremos mostrar una tabla que contenga información sobre productos en una tienda en línea. La tabla tendrá cuatro columnas: Producto, Precio, Stock y Acciones. A continuación, mostraremos cómo crear esta tabla utilizando código HTML.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de tabla HTML</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Productos</h1>
<table>
<thead>
<tr>
<th>Producto</th>
<th>Precio</th>
<th>Stock</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<td>Camiseta</td>
<td>$20</td>
<td>10</td>
<td>
<button>Añadir al carrito</button>
</td>
</tr>
<tr>
<td>Pantalón</td>
<td>$40</td>
<td>5</td>
<td>
<button>Añadir al carrito</button>
</td>
</tr>
<tr>
<td>Zapatos</td>
<td>$60</td>
<td>8</td>
<td>
<button>Añadir al carrito</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
En este ejemplo, hemos utilizado etiquetas HTML como <table>, <thead>, <tbody>, <tr>, <th> y <td> para crear la estructura de la tabla. Hemos asignado estilos utilizando CSS para dar formato a la tabla, como el ancho, el espaciado y los colores de fondo.
La primera fila de la tabla se define dentro de la etiqueta <thead>, y se utiliza la etiqueta <th> para los encabezados de columna. El resto de los datos se colocan dentro de la etiqueta <tbody>, y utilizamos la etiqueta <td> para las celdas de datos.
En el ejemplo, hemos creado tres filas de datos para los productos "Camiseta", "Pantalón" y "Zapatos". Cada fila tiene cuatro celdas correspondientes a las columnas de Producto, Precio, Stock y Acciones. En la columna de Acciones, hemos agregado un botón "Añadir al carrito" utilizando la etiqueta <button>.
Puedes personalizar este ejemplo según tus necesidades, agregando más filas y columnas, cambiando los datos y ajustando los estilos para que se adapten a tu diseño.
Las tablas HTML son una forma efectiva de organizar y presentar información tabular en una página web. Con este ejemplo, tienes una base sólida para crear tus propias tablas HTML y adaptarlas a tus necesidades. Recuerda utilizar las etiquetas y atributos adecuados, y aplica estilos CSS para mejorar la apariencia de tus tablas.
En resumen, las tablas HTML son una herramienta valiosa para organizar datos en un formato tabular. En este artículo, hemos presentado un ejemplo práctico de cómo crear una tabla HTML utilizando código. ¡Experimenta y crea tus propias tablas personalizadas para mostrar información de manera clara y estructurada en tus proyectos web!