html-exercises/Ejercicio22.html at master · msceada1/html-exercises · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!--En el ejercicio 20, ahora, introduce dos párrafos con diferentes estilos de texto, tamaño
y color en el texto, en las Celdas 3, 4 y 6. ¿Qué observas? Explica.-->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Página con Tablas</title>
</head>
<body style="background-color: turquoise; text-align: center;">

    <h1>Mi Página con Tablas</h1>

    <table border="4" style="width: 90%; height: 300px; margin: auto; border-collapse: collapse;">
        <tr>
            <td style="width: 50%; text-align: center; font-weight: bold;
                       background: url('Imágenes para mis webs/goku.gif') no-repeat center; background-size: cover; color: white;">
                Celda 1
            </td>
            <td style="width: 50%; text-align: center; font-weight: bold; background-color: lightblue;">
                Celda 2
            </td>
        </tr>
        <tr>
            <td style="width: 50%; text-align: center; font-weight: bold; background-color: lightcoral;">
                <p style="font-size: 18px; color: white; font-family: Arial, sans-serif;">Este es un párrafo en celda 3.</p>
                <p style="font-size: 14px; color: black; font-style: italic;">Texto adicional con estilo en celda 3.</p>
            </td>
            <td style="width: 50%; text-align: center; font-weight: bold; background-color: lightgreen;">
                <p style="font-size: 20px; color: blue; font-weight: bold;">Párrafo en celda 4 con texto grande.</p>
                <p style="font-size: 16px; color: darkred; text-decoration: underline;">Texto subrayado en celda 4.</p>
            </td>
        </tr>
        <tr>
            <td style="width: 50%; text-align: center; font-weight: bold; background-color: lightyellow;">
                Celda 5
            </td>
            <td style="width: 50%; text-align: center; font-weight: bold;
                       background: url('Imágenes para mis webs/asterix y obelix.gif') no-repeat center; background-size: cover; color: white;">
                <p style="font-size: 22px; color: yellow; font-weight: bold;">Texto sobre imagen en celda 6.</p>
                <p style="font-size: 16px; color: lightgray; font-style: italic;">Texto con color claro en celda 6.</p>
            </td>
        </tr>
    </table>

</body>
</html>