CREACIÓN DE UN MARCO CON TABLAS PARA MOSTRAR DIFERENTES IMÁGENES CON LINKS
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tipos de Flores</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #FFF0F5; /* Fondo rosado claro */
margin: 0;
padding: 20px;
text-align: center; /* Centrar contenido */
}
h1 {
font-size: 36px;
color: #800000; /* Color oscuro para el título */
margin-bottom: 20px;
}
table {
margin: 0 auto; /* Centrar la tabla */
width: 80%;
border-collapse: collapse;
text-align: center;
border: 8px solid #FF69B4; /* Borde exterior más grueso */
background-color: #FFE4E1; /* Fondo suave */
}
th, td {
border: 2px solid #FF69B4; /* Bordes internos */
padding: 15px;
}
img {
width: 100px;
height: 100px;
}
th {
background-color: #FFB6C1; /* Color para el encabezado */
font-size: 24px;
color: #800000; /* Texto en un color oscuro */
}
td {
font-size: 18px;
color: #4B0082; /* Texto en tono morado oscuro */
}
</style>
</head>
<body>
<h1>TIPOS DE FLORES</h1> <!-- Título principal fuera de la tabla -->
<table>
<thead>
<tr>
<th>ROSA</th>
<th>CLAVEL</th>
<th>PETUNIA</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://es.wikipedia.org/wiki/Rosa" target="_blank"><img src="rosa.jpg" alt="Rosa"></a></td>
<td><a href="https://es.wikipedia.org/wiki/Dianthus_caryophyllus" target="_blank"><img src="clavel.jpg" alt="Clavel"></a></td>
<td><a href="https://es.wikipedia.org/wiki/Petunia" target="_blank"><img src="petunia.jpg" alt="Petunia"></a></td>
</tr>
<tr>
<th>JACINTO</th>
<th>GERANIO</th>
<th>MARGARITA</th>
</tr>
<tr>
<td><a href="https://es.wikipedia.org/wiki/Hyacinthus" target="_blank"><img src="jacinto.jpg" alt="Jacinto"></a></td>
<td><a href="https://es.wikipedia.org/wiki/Geranio" target="_blank"><img src="geranio.jpg" alt="Geranio"></a></td>
<td><a href="https://es.wikipedia.org/wiki/Margarita" target="_blank"><img src="margarita.jpg" alt="Margarita"></a></td>
</tr>
<tr>
<th>GLADIOLO</th>
<th>ORQUÍDEA</th>
<th>TULIPÁN</th>
</tr>
<tr>
<td><a href="https://es.wikipedia.org/wiki/Gladiolo" target="_blank"><img src="gladiolo.jpg" alt="Gladiolo"></a></td>
<td><a href="https://es.wikipedia.org/wiki/Orqu%C3%ADdea" target="_blank"><img src="orquidea.jpg" alt="Orquídea"></a></td>
<td><a href="https://es.wikipedia.org/wiki/Tulipa" target="_blank"><img src="tulipan.jpg" alt="Tulipán"></a></td>
</tr>
</tbody>
</table>
</body>
</html>
No hay comentarios.:
Publicar un comentario