Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 12 vistas

    04 HTML Tablas

    Cargado por

    Albert González
    Este documento explica cómo crear tablas en HTML utilizando las etiquetas <table>, <tr>, <th> y <td>. Las tablas se utilizan para organizar el contenido en filas y columnas. La etiqueta <table> define una tabla, <tr> define filas dentro de la tabla, <th> define celdas de encabezado y <td> define celdas de datos. Los atributos colspan y rowspan permiten combinar celdas horizontal y verticalmente.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    04 HTML Tablas

    Cargado por

    Albert González
    12 vistas9 páginas
    Este documento explica cómo crear tablas en HTML utilizando las etiquetas <table>, <tr>, <th> y <td>. Las tablas se utilizan para organizar el contenido en filas y columnas. La etiqueta <table> define una tabla, <tr> define filas dentro de la tabla, <th> define celdas de encabezado y <td> define celdas de datos. Los atributos colspan y rowspan permiten combinar celdas horizontal y verticalmente.

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Este documento explica cómo crear tablas en HTML utilizando las etiquetas <table>, <tr>, <th> y <td>. Las tablas se utilizan para organizar el contenido en filas y columnas. La etiqueta <table> define una tabla, <tr> define filas dentro de la tabla, <th> define celdas de encabezado y <td> define celdas de datos. Los atributos colspan y rowspan permiten combinar celdas horizontal y verticalmente.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    12 vistas9 páginas

    04 HTML Tablas

    Cargado por

    Albert González
    Este documento explica cómo crear tablas en HTML utilizando las etiquetas <table>, <tr>, <th> y <td>. Las tablas se utilizan para organizar el contenido en filas y columnas. La etiqueta <table> define una tabla, <tr> define filas dentro de la tabla, <th> define celdas de encabezado y <td> define celdas de datos. Los atributos colspan y rowspan permiten combinar celdas horizontal y verticalmente.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    Está en la página 1de 9

    HTML

    TABLAS
    1
    ETIQUETAS
    TABLASv
    v
    Tablas HTML
    Antes de que existiera la etiqueta <div> todo se maquetaba mediante
    tablas, pero estas limitaban y dificultaban en buena medida el diseño de
    los sitios web.

    Ahora las tablas tienen una función distinta y es la de generar filas y


    columnas y organizar el contenido mediante celdas.

    Para crear una tabla en HTML usamos la etiqueta <table></table>


    (tabla)

    Por si sola solo ocupa un espacio de manera invisible para los usuarios
    pero a nivel de código indica que se va a insertar una tabla informativa.
    Insertar
    contenido
    Como contenido debe albergar a la etiqueta <tr></tr> (table row)
    siendo la etiqueta que nos dará las filas para la tabla.

    Apertura Contenido Cierre

    Con esto indicamos que existe una tabla que contiene una fila, pero
    visualmente no aparecerá nada en nuestra página.

    Dentro de la etiqueta <tr> irá cada una de las celdas, formando así las
    columnas deseadas para insertar la información que queramos.

    Estas celdas se dividen en dos tipos, las celdas de encabezado y las


    celdas de contenido.

    Las celdas de encabezado también son conocidas como cabecera de


    tabla, son aquellas que me dan un título a cada una de mis columnas.
    Para ello usamos la etiqueta <th></th> (table header).

    Apertura Contenido Cierre


    Insertar
    contenido
    Las celdas de contenido o celdas de datos son aquellas que me permiten
    almacenar datos en referencia a un título especificado o sin especificar.
    Usaremos la etiqueta <td></td> (table data) para poder realizar una
    tabla.

    Apertura Contenido Cierre

    Ejemplo de estructura:
    Insertar
    contenido
    Resultado del ejemplo anterior

    Si queremos insertar más nombres debemos crear nuevas filas


    <tr></tr>.

    NOTA: Siempre debemos colocar el mismo número de celdas en cada fila, es decir, dentro de cada etiqueta <tr>
    debe ir la misma cantidad de etiquetas <th> o etiquetas <td>. A nivel de código NO puede haber más celdas en una
    fila que en otra, ya sean encabezados o datos.

    Dentro de una celda, es decir, dentro de la etiqueta <td> puedo colocar como contenido texto, imágenes, videos,
    audios, etc.
    Insertar
    contenido
    Dentro de una celda, es decir, dentro de la etiqueta <td> se puede
    insertar contenido multimedia como texto, imágenes, videos, audios, etc.
    ATRIBUTO COLSPAN

    El atributo colspan=” ” nos permite unir celdas de manera horizontal.


    Para poder unir celdas de esta manera, debemos aplicar el atributo
    colspan=” ” a la(s) celda(s) que queremos unificar.

    Es recomendable unirlas de acuerdo al número de celdas definidas a


    trabajar por el usuario, es decir, si estamos trabajando con una tabla de 4
    celdas, podemos unir dos celdas (colspan=”2”) o tres celdas
    (colspan=”3”) para que visualmente mantenga la estética que
    conocemos de una tabla.

    Crearemos una tabla sencilla con solo tres celdas para poder ver su
    funcionamiento:
    ATRIBUTO ROWSPAN

    El atributo rowspan=” ” nos permite unir celdas de manera vertical. Para


    poder unir celdas de esta manera, debemos aplicar el atributo
    rowspan=” ” a la(s) celda(s) que queremos unificar.

    Es recomendable unirlas de acuerdo al número de celdas definidas a


    trabajar por el usuario, es decir,si estamos trabajando con una tabla de 4
    celdas, podemos unir dos celdas (rowspan=”2”), tres celdas
    (rowspan=”3”) o cuatro celdas (rowspan=”4”) para que visualmente
    mantenga la estética que conocemos de una tabla.

    También podría gustarte