domingo, 26 de julio de 2020

Ejercicios Tablas Html.

Tablas!
Celda 1 Celda 2 Celda 3
Celda 4 Celda 5 Celda 6

Hoy Mañana Miércoles
Soleado Mayormente soleado Parcialmente nublado
19°C 17°C 12°C
E 13 km/h E 11 km/h S 16 km/h

Dia Hoy Mañana Miércoles
Condición Soleado Mayormente Soleado Parcialmente nublado
Temperatura 19°C 17°C 12°C
Vientos E 13 km/h E 11 km/h S 16 km/h

Consumo de combustible de los autos a lo largo de las pruebas de manejo.
Car Enero Febrero Marzo
Chevrolet Camaro 1254 lts 1582 lts 1502 lts
Lamborguini Aventador 1854 lts 1978 lts 1502 lts

"colspan"
Dia 1 Dia 2 Dia 3 Dia 4
Mike (Lastimado) 0 km 4 km
Susan 23 km 18 km 19 km 15 km

"Rowspan"
Basico Completo
Instalación Gratis! $49.99
Primer año $19.99
Segundo Año $9.99 $29.99

thead,tbody,tfoot
Anthony Lione
Fecha Entrada Salida Entrada Salida
15/07 $200,00 $50,00 $0 $0
28/07 $0,00 $100,00 $100,00 $0,00
09/08 $0,00 $50,00 $0,00 $80,00
22/08 $40,00 $0,00 $0,00 $110,00
25/08 $0,00 $20,00 $0,00 $0,00
Balance $20,00 $10,00

Agrupación de Columnas
Mike Tara
Primera prueba Segunda prueba Primera prueba Segunda prueba
Dia 1 25 km 38 km 28 km 37 km
Dia 2 22 km 35 km 30 km 35 km


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tablas!</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>Celda 1</td>
            <td>Celda 2</td>
            <td>Celda 3</td>
        </tr>
        <tr>
            <td>Celda 4</td>
            <td>Celda 5</td>
            <td>Celda 6</td>
        </tr>
    </table>
    <br>
    <table border="1">
        <tr>
            <th>Hoy</th>
            <th>Mañana</th>
            <th>Miércoles</th>
        </tr>
        <tr align="center">
            <td>Soleado</td>
            <td>Mayormente soleado</td>
            <td>Parcialmente nublado</td>
        </tr>
        <tr align="center">
            <td>19°C</td>
            <td>17°C</td>
            <td>12°C</td>
        </tr>
        <tr align="center">
            <td>E 13 km/h</td>
            <td>E 11 km/h</td>
            <td>S 16 km/h</td>
        </tr>
    </table>
    <br>
    <table border="1">
        <tr>
            <th scope="row">Dia</th>
            <th>Hoy</th>
            <th>Mañana</th>
            <th>Miércoles</th>
        </tr>
        <tr align="center">
            <th>Condición</th>
            <td>Soleado</td>
            <td>Mayormente Soleado</td>
            <td>Parcialmente nublado</td>
        </tr>
        <tr align="center">
            <th>Temperatura</th>
            <td>19°C</td>
            <td>17°C</td>
            <td>12°C</td>
        </tr>
        <tr align="center">
            <th>Vientos</th>
            <td>E 13 km/h</td>
            <td>E 11 km/h</td>
            <td>S 16 km/h</td>
        </tr>
    </table>
    <br>
    <table border="1">
        <caption> <strong> Consumo de combustible de los autos a lo largo de las pruebas de manejo.</strong></caption>
        <tr>
            <th scope="col">Car</th>
            <th>Enero</th>
            <th>Febrero</th>
            <th>Marzo</th>
        </tr>
        <tr>
            <th>Chevrolet Camaro</th>
            <td>1254 lts</td>
            <td>1582 lts</td>
            <td>1502 lts</td>
        </tr>
        <tr>
            <th>Lamborguini Aventador</th>
            <td>1854 lts</td>
            <td>1978 lts</td>
            <td>1502 lts</td>
        </tr>
    </table>
    <br>
    <table border="1">
        <caption> <strong>"colspan" </strong></caption>
        <tr scope="col">
            <th></th>
            <th>Dia 1</th>
            <th>Dia 2</th>
            <th>Dia 3</th>
            <th>Dia 4</th>
        </tr>
        <tr align="center">
            <th>Mike (Lastimado)</th>
            <td colspan="3"> 0 km</td>
            <td>4 km</td>
        </tr>
        <tr align="center">
            <th>Susan</th>
            <td>23 km</td>
            <td>18 km</td>
            <td> 19 km</td>
            <td>15 km</td>
        </tr>
    </table>
    <br>
    <table border="1">
        <caption><strong>"Rowspan"</strong></caption>
        <tr>
            <th></th>
            <th>Basico</th>
            <th>Completo</th>
        </tr>
        <tr>
            <th>Instalación</th>
            <td rowspan="2">Gratis!</td>
            <td>$49.99</td>
        </tr>
        <tr>
            <th>Primer año</th>
            <td>$19.99</td>
        </tr>
        <tr>
            <th>Segundo Año</th>
            <td>$9.99</td>
            <td>$29.99</td>
        </tr>
    </table>
    <br>
    <table border="1">
        <caption><strong>thead,tbody,tfoot</strong></caption>
        <thead>
            <tr>
                <th></th>
                <th colspan="2">Anthony</th>
                <th colspan="2">Lione</th>
            </tr>
            <tr>
                <th>Fecha</th>
                <th>Entrada</th>
                <th>Salida</th>
                <th>Entrada</th>
                <th>Salida</th>
            </tr>
        </thead>
        <tbody style="background-color: rgb(248, 73, 4);">
            <tr>
                <th>15/07</th>
                <td>$200,00</td>
                <td>$50,00</td>
                <td>$0</td>
                <td>$0</td>
            </tr>
            <tr>
                <th>28/07</th>
                <td>$0,00</td>
                <td>$100,00</td>
                <td>$100,00</td>
                <td>$0,00</td>
            </tr>
        </tbody>
        <tbody style="background-color: rgb(100, 11, 243);">
            <tr>
                <th>09/08</th>
                <td>$0,00</td>
                <td>$50,00</td>
                <td>$0,00</td>
                <td>$80,00</td>
            </tr>
            <tr>
                <th>22/08</th>
                <td>$40,00</td>
                <td>$0,00</td>
                <td>$0,00</td>
                <td>$110,00</td>
            </tr>
            <tr>
                <th>25/08</th>
                <td>$0,00</td>
                <td>$20,00</td>
                <td>$0,00</td>
                <td>$0,00</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Balance</th>
                <td colspan="2">$20,00</td>
                <td colspan="2">$10,00</td>
            </tr>
        </tfoot>
    </table>
    <br>
    <table border="1">
        <caption><strong>Agrupación de Columnas</strong></caption>
        <colgroup>
            <colgroup span="2" style="background-color: rgb(70, 87, 235);"></colgroup>
            <colgroup span="2" style="background-color: rgb(212, 35, 88);"></colgroup>
        </colgroup>
        <tr>
            <th></th>
            <th colspan="2">Mike</th>
            <th colspan="2">Tara</th>
        </tr>
        <tr>
            <th></th>
            <th>Primera prueba</th>
            <th>Segunda prueba</th>
            <th>Primera prueba</th>
            <th>Segunda prueba</th>
        </tr>
        <tr>
            <th>Dia 1</th>
            <td>25 km</td>
            <td>38 km</td>
            <td>28 km</td>
            <td>37 km</td>
        </tr>
        <tr>
            <th>Dia 2</th>
            <td>22 km</td>
            <td>35 km</td>
            <td>30 km</td>
            <td>35 km</td>
        </tr>
    </table>
</body>
</html>

Calculadora HTML / CSS / JS

See the Pen MWyzKmv by Fabian Albarracin ( @fabianalbarracin ) on CodePen .