Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Imagenes y Formularios

    Cargado por

    Jorge de las Llanderas
    2 vistas9 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PPTX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PPTX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    2 vistas9 páginas

    Imagenes y Formularios

    Cargado por

    Jorge de las Llanderas

    Copyright:

    © All Rights Reserved
    Descargue como PPTX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 9

    Tablas y Formularios

    2º FPBI Daniel Torres


    TABLAS
    La tablas en html se definen con la etiqueta <table></table>.

    Una tabla se compone de filas y columnas:


    - <th></th> ⇒ Definición de cabecera de tabla, normalmente se usa para la primera fila
    - <tr></tr> ⇒ Define una fila en la tabla.
    - <td></td> ⇒ Define una celda en la tabla.

    Otras etiquetas dentro de nuestra tabla son:


    - <caption></caption> ⇒ dónde se define el nombre o título de la tabla.
    - Si ponemos el atributo border=”1”, en la etiqueta <table>, nuestra tabla tendrá un contorno:
    Por ejemplo: <table border=”1”> </table>
    TABLAS
    Cuándo tengamos una tabla muy grande, dentro de la etiqueta <table></table>, deberá dividirse de
    la siguiente forma:

    <table>

    <thead>Cabecera de la tabla</thead>

    <tbody>Cuerpo de la tabla</tbody>

    <tfoot>Pie de la tabla</tfoot>

    </table>
    TABLAS
    TABLA SENCILLA:
    RESULTADO:
    <table border="1">
    <caption>Título de la tabla</caption>
    <tr>
    <th>Columna .Cabecera.1</th>
    <th>Columna.Cabecera.2</th>
    </tr>
    <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
    </tr>
    </table>
    TABLAS

    TABLA COMBINACIÓN DE COLUMNAS

    Cuándo queramos combinar diferentes columnas, independientemente de que sean etiquetas <th>
    o <td>, usaremos el atributo:

    - colspan=”” ⇒ nos permitirá realizar la combinación de varias columnas en una sola.

    Para especificar el valor del atributo colspan, debemos indicar el número de columnas sobre las
    que se quiere realizar la combinación.
    TABLAS
    TABLA COMBINACIÓN DE COLUMNAS:
    <table border="1">
    RESULTADO:
    <caption>Tabla con combinación de columnas</caption>
    <tr>
    <th colspan="2">Celda Combinada</th>
    <th>Celda Normal</th>
    <th colspan="2">Celda Combinada</th>
    </tr>
    <tr>
    <td>C1</td>
    <td>C2</td>
    <td>C3</td>
    <td>C4</td>
    <td>C5</td>
    </tr>
    <tr>
    <td>C6</td>
    <td>C7</td>
    <td>C8</td>
    <td colspan="2">C9 Combinada</td>
    </tr>
    </table>
    TABLAS
    TABLA COMBINACIÓN DE FILAS

    Cuándo queramos combinar diferentes filas, usaremos el atributo:

    - rowspan=”” ⇒ nos permitirá realizar la combinación de varias filas en una sola.

    Para especificar el valor del atributo rowspan, debemos indicar el número de filas sobre las que se
    quiere realizar la combinación.
    TABLAS
    RESULTADO:
    TABLA COMBINACIÓN DE FILAS:

    <table border="1">
    <caption>Tabla con combinación de filas</caption>
    <tr>
    <th>Celda 1</th>
    <th>Celda 2</th>
    <th>Celda 3</th>
    </tr>
    <tr>
    <td rowspan="2">Celda Combinada</td>
    <td>Celda 5</td>
    <td rowspan="2">Celda Combinada</td>
    </tr>
    <tr>
    <td>Celda 7</td>
    </tr>
    </table>
    Ejercicio de tablas:
    <!DOCTYPE html>
    ● Debéis hacer una página, con cuatro tablas <html>
    diferentes: <head>
    <meta charset="utf-8">
    ○ Una tabla simple
    <title>Ejercicio tablas</title>
    ○ Una tabla con columnas combinada </head>
    ○ Una tabla con filas combinadas <body>
    ○ Una tabla con filas y columnas combinadas <header>
    <h1>Ejercicio de tablas</h1>
    </header>
    <main>

    <!--Hacemos las tablas que nos pide el ejercicio -- >


    Nota: Recordar que la estructura de la página debe ser la
    siguiente: </main>
    <footer>
    <hr>
    <h4>Nombre alumno</h4>
    </footer>
    </body>
    </html>

    También podría gustarte