Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Ejemplo Tabla Con CSS PDF

    Загружено:

    Henry Pinto
    48 просмотров6 страниц

    Оригинальное название

    Ejemplo Tabla con CSS.pdf

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    48 просмотров6 страниц

    Ejemplo Tabla Con CSS PDF

    Загружено:

    Henry Pinto

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 6

    Ing.

    Toms Eduardo Urbina


    Desarrollo Plataforma Web

    Tablas con CSS


    Tablas, s, pero en su sitio y para lo que fueron concebidas. Creo que con todo esto de los
    estndares Web, los diseadores, o desarrolladores, como queramos denominarlos, nos
    hemos vuelto un poco alrgicos a las tablas. Una tabla puede ser tan estndar y tan
    accesible, como lo pueda ser una lista desordenada, por lo tanto, por qu no usarla?.
    Vamos a ver un caso paso a paso para marcar nuestra tabla totalmente estndar y
    totalmente accesible:
    1) Una tabla, de las de toda la vida (escriba este cdigo y gurdelo como HTML, luego le har
    modificaciones):

    Ejecute el cdigo en su navegador y vea como queda.


    Para los siguientes pasos deber ir modificando el cdigo de la tabla segn los cambios que
    se indican, no debe crear un nuevo documento, vaya viendo los cambios que ocurren
    ejecutando la pagina con forme la va modificando.
    2) Comencemos a transformar nuestra tabla en estndar y accesible, promocionndole un
    ttulo adecuado:

    Ing. Toms Eduardo Urbina


    Desarrollo Plataforma Web

    Seguidamente, proporcionaremos un resumen de los datos que vamos a reflejar en nuestra


    tabla:

    Apliquemos una cabecera a nuestra tabla, y asignmosle un identificador claro:

    Ing. Toms Eduardo Urbina


    Desarrollo Plataforma Web

    A efectos de accesibilidad, el proporcionar, cuanta ms informacin en cuanto a


    estructura, es muy recomendable, por lo que utilizando la etiqueta headers, podemos
    marcar claramente nuestras celdas e identificarlas con su correspondiente cabecera:

    Y para finalizar de estandarizar nuestra tabla, estructuremos entre cabecera, cuerpo y pie
    de sta misma. En contra de lo que pudiera parecer ms lgico, debemos proporcionar
    primero la etiqueta theady tfoot, para terminar con el cuerpo de la tabla, el tbody.
    Esto se hace as para permitir que se carguen primero los datos contenidos en la cabecera y el
    pie, para terminar con el contenido:

    Ing. Toms Eduardo Urbina


    Desarrollo Plataforma Web

    Ya tenemos nuestra tabla estandar y accesible, un poco de css le vamos agregar en este
    punto.
    3) Apliquemos bordes a la tabla y a las celdas, quitemos el espacio entre celdas y bordes y
    proporcionemos algo de aire a las celdas:
    Este codigo es CSS por lo que lo puede agregar dentro de las etiquetas style o dentro de un
    archivo con extension .css, haremos el primer caso, es decir, dentro de las etiquetas style
    que van dentro de <head></head>.

    Ejecute su cdigo para ir viendo los cambios.

    Ing. Toms Eduardo Urbina


    Desarrollo Plataforma Web
    Esto nos deja una bonita tabla, simple y clara. Ahora cambiemos un poco el ttulo de la
    tabla y las celdas de cabecera (recuerde es el mismo cdigo CSS, dentro de las etiquetas
    <style>):

    Vea como se ve ahora, que le parece? esto toma cuerpo. Adornemos un poco nuestra
    cabecera. Con esto conseguimos insertar un icono a nuestras cabaceras, a la vez que
    agrupamos estilos y logramos economizar as nuestro css.

    Ing. Toms Eduardo Urbina


    Desarrollo Plataforma Web

    Las imagenes las puede bajar de


    http://appl.transexpress.com.sv/misdocs/ico_porcentaje.gif y de
    http://appl.transexpress.com.sv/misdocs/ico_pais.gif .
    4) Aprovechemos los estndares Web aun ms. Navegadores como IE, que digo navegadores,
    perdn, IE no mostrar lo que seguidamente vamos a implementar, ya que se salta a la
    torera las pseudo clases en nuestra tabla, veamos (pero no esta de mas intentarlo).
    Queremos que al pasar el ratn sobre una fila de nuestra tabla, se resalte, ayudando as a
    la lectura de los datos de sta. Hgalo, agregue el siguiente cdigo al CSS que ya tiene.

    Les parece complicado?.


    Ahora ya disponemos de nuestra tabla totalmente accesible y estndar. Evidentemente, a
    partir de este punto, podemos mejorar el estilo de nuestra tabla hasta donde nuestra
    imaginacin quiera.
    Me he basado en el ejemplo que pueden encontrar en el libro Web Standards Solutions, de
    Dan Cederholm. Un libro altamente recomendable.

    Вам также может понравиться