SlideShare una empresa de Scribd logo
1 de 9
Descargar para leer sin conexión
10- TABLAS
 Estilos CSS
TRATAMIENTO DE BORDES
•   En CSS 2.1 se definen dos modelos diferentes para el tratamiento de bordes:
    border-collapse y border-spacing.


•   Border-collapse: fusión de bordes.
    Cuando los bordes no son iguales se debe tener en cuenta la anchura de cada
    borde, su estilo y tipo de celda.
     • Toma los valores: Collapse, separate, inherit.


•   border.-spacing: espaciado entre bordes.
     • Toma los valores: <medida>, <medida><medida>,inherit.


NOTA: el tipo de celda puede ser definido con el atributo scope.
     <td scope=“row”> celda de tipo fila
     <td scope=“col”> celda de tipo columna
     <td scope=“rowgroup”> celda de tipo grupo de filas
     <td scope=“colgroup”> celda de tipo grupo de columnas
ESTILOS AVANZADOS
      • Cuando existen celdas vacías y la
        propiedad de los bordes de la
        tabla es separate se puede usar
        empty-cells.
• Puede tener los valores: show, hide, inherit.
• Hide indica que las celdas vacías no se deben mostrar.
NOTA: Internet Explorer 6 y anteriores no lo aceptan
• Cuando hay títulos en las tablas se coloca la etiqueta <caption>
• Se puede cambiar la posición de los titulos en CSS con caption-side:
NOTA: Opera 9 e Internet Explorer 6 con sus anteriores versiones no lo aceptan
USO DE PSEUDOCLASES
•   Se pueden declarar pseudoclases al momento de editar un estilo: link, visited, hover,
    active. Internet Explorer 6 y anteriores solo los soportan en enlaces.
•   En las tablas se puede utilizar la propiedad hover para especificar un cambio de
    atributos cuando el cursor pasa por la celda o fila donde se aplica la propiedad.

Más contenido relacionado

Similar a 10 tablas (7)

Qué es css
Qué es cssQué es css
Qué es css
 
Informatica css
Informatica cssInformatica css
Informatica css
 
Informatica css
Informatica cssInformatica css
Informatica css
 
Conceptos Básicos CSS
Conceptos Básicos CSSConceptos Básicos CSS
Conceptos Básicos CSS
 
capitulo 10 Tablas
capitulo 10 Tablascapitulo 10 Tablas
capitulo 10 Tablas
 
Que es css
Que es cssQue es css
Que es css
 
Tutorial
TutorialTutorial
Tutorial
 

Último

Estrategia Nacional de Refuerzo Escolar SJA Ccesa007.pdf
Estrategia Nacional de Refuerzo Escolar  SJA  Ccesa007.pdfEstrategia Nacional de Refuerzo Escolar  SJA  Ccesa007.pdf
Estrategia Nacional de Refuerzo Escolar SJA Ccesa007.pdf
Demetrio Ccesa Rayme
 
Ediciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D Ccesa007.pdf
Ediciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D  Ccesa007.pdfEdiciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D  Ccesa007.pdf
Ediciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D Ccesa007.pdf
Demetrio Ccesa Rayme
 

Último (20)

Gran Final Campeonato Nacional Escolar Liga Las Torres 2017.pdf
Gran Final Campeonato Nacional Escolar Liga Las Torres 2017.pdfGran Final Campeonato Nacional Escolar Liga Las Torres 2017.pdf
Gran Final Campeonato Nacional Escolar Liga Las Torres 2017.pdf
 
Lecciones 07 Esc. Sabática. Motivados por la esperanza
Lecciones 07 Esc. Sabática. Motivados por la esperanzaLecciones 07 Esc. Sabática. Motivados por la esperanza
Lecciones 07 Esc. Sabática. Motivados por la esperanza
 
El liderazgo en la empresa sostenible, introducción, definición y ejemplo.
El liderazgo en la empresa sostenible, introducción, definición y ejemplo.El liderazgo en la empresa sostenible, introducción, definición y ejemplo.
El liderazgo en la empresa sostenible, introducción, definición y ejemplo.
 
Luz desde el santuario. Escuela Sabática
Luz desde el santuario. Escuela SabáticaLuz desde el santuario. Escuela Sabática
Luz desde el santuario. Escuela Sabática
 
ACERTIJO SOPA DE LETRAS OLÍMPICA. Por JAVIER SOLIS NOYOLA
ACERTIJO SOPA DE LETRAS OLÍMPICA. Por JAVIER SOLIS NOYOLAACERTIJO SOPA DE LETRAS OLÍMPICA. Por JAVIER SOLIS NOYOLA
ACERTIJO SOPA DE LETRAS OLÍMPICA. Por JAVIER SOLIS NOYOLA
 
Motivados por la esperanza. Esperanza en Jesús
Motivados por la esperanza. Esperanza en JesúsMotivados por la esperanza. Esperanza en Jesús
Motivados por la esperanza. Esperanza en Jesús
 
ACERTIJO CÁLCULOS MATEMÁGICOS EN LA CARRERA OLÍMPICA. Por JAVIER SOLIS NOYOLA
ACERTIJO CÁLCULOS MATEMÁGICOS EN LA CARRERA OLÍMPICA. Por JAVIER SOLIS NOYOLAACERTIJO CÁLCULOS MATEMÁGICOS EN LA CARRERA OLÍMPICA. Por JAVIER SOLIS NOYOLA
ACERTIJO CÁLCULOS MATEMÁGICOS EN LA CARRERA OLÍMPICA. Por JAVIER SOLIS NOYOLA
 
Power Point : Motivados por la esperanza
Power Point : Motivados por la esperanzaPower Point : Motivados por la esperanza
Power Point : Motivados por la esperanza
 
TEMA EGIPTO.pdf. Presentación civilización
TEMA EGIPTO.pdf. Presentación civilizaciónTEMA EGIPTO.pdf. Presentación civilización
TEMA EGIPTO.pdf. Presentación civilización
 
3. ELEMENTOS QUE SE EMPLEAN EN LAS ESTRUCTURAS.pptx
3. ELEMENTOS QUE SE EMPLEAN EN LAS ESTRUCTURAS.pptx3. ELEMENTOS QUE SE EMPLEAN EN LAS ESTRUCTURAS.pptx
3. ELEMENTOS QUE SE EMPLEAN EN LAS ESTRUCTURAS.pptx
 
Estrategia Nacional de Refuerzo Escolar SJA Ccesa007.pdf
Estrategia Nacional de Refuerzo Escolar  SJA  Ccesa007.pdfEstrategia Nacional de Refuerzo Escolar  SJA  Ccesa007.pdf
Estrategia Nacional de Refuerzo Escolar SJA Ccesa007.pdf
 
novelas-cortas--3.pdf Analisis introspectivo y retrospectivo, sintesis
novelas-cortas--3.pdf Analisis introspectivo y retrospectivo, sintesisnovelas-cortas--3.pdf Analisis introspectivo y retrospectivo, sintesis
novelas-cortas--3.pdf Analisis introspectivo y retrospectivo, sintesis
 
Seguridad y virus informáticos 12°B 2024
Seguridad y virus informáticos 12°B 2024Seguridad y virus informáticos 12°B 2024
Seguridad y virus informáticos 12°B 2024
 
tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...
tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...
tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...
 
Síndrome piramidal 2024 según alvarez, farrera y wuani
Síndrome piramidal 2024 según alvarez, farrera y wuaniSíndrome piramidal 2024 según alvarez, farrera y wuani
Síndrome piramidal 2024 según alvarez, farrera y wuani
 
Realitat o fake news? – Què causa el canvi climàtic? - La desertització
Realitat o fake news? – Què causa el canvi climàtic? - La desertitzacióRealitat o fake news? – Què causa el canvi climàtic? - La desertització
Realitat o fake news? – Què causa el canvi climàtic? - La desertització
 
Nikola Tesla - Biografia - Datos interesantes e inventos
Nikola Tesla - Biografia - Datos interesantes e inventosNikola Tesla - Biografia - Datos interesantes e inventos
Nikola Tesla - Biografia - Datos interesantes e inventos
 
Ediciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D Ccesa007.pdf
Ediciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D  Ccesa007.pdfEdiciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D  Ccesa007.pdf
Ediciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D Ccesa007.pdf
 
Época colonial: vestimenta, costumbres y juegos de la época
Época colonial: vestimenta, costumbres y juegos de la épocaÉpoca colonial: vestimenta, costumbres y juegos de la época
Época colonial: vestimenta, costumbres y juegos de la época
 
ciclos biogeoquimicas y flujo de materia ecosistemas
ciclos biogeoquimicas y flujo de materia ecosistemasciclos biogeoquimicas y flujo de materia ecosistemas
ciclos biogeoquimicas y flujo de materia ecosistemas
 

10 tablas

  • 3. En CSS 2.1 se definen dos modelos diferentes para el tratamiento de bordes: border-collapse y border-spacing. • Border-collapse: fusión de bordes. Cuando los bordes no son iguales se debe tener en cuenta la anchura de cada borde, su estilo y tipo de celda. • Toma los valores: Collapse, separate, inherit. • border.-spacing: espaciado entre bordes. • Toma los valores: <medida>, <medida><medida>,inherit. NOTA: el tipo de celda puede ser definido con el atributo scope. <td scope=“row”> celda de tipo fila <td scope=“col”> celda de tipo columna <td scope=“rowgroup”> celda de tipo grupo de filas <td scope=“colgroup”> celda de tipo grupo de columnas
  • 4.
  • 5.
  • 6. ESTILOS AVANZADOS • Cuando existen celdas vacías y la propiedad de los bordes de la tabla es separate se puede usar empty-cells.
  • 7. • Puede tener los valores: show, hide, inherit. • Hide indica que las celdas vacías no se deben mostrar. NOTA: Internet Explorer 6 y anteriores no lo aceptan
  • 8. • Cuando hay títulos en las tablas se coloca la etiqueta <caption> • Se puede cambiar la posición de los titulos en CSS con caption-side: NOTA: Opera 9 e Internet Explorer 6 con sus anteriores versiones no lo aceptan
  • 9. USO DE PSEUDOCLASES • Se pueden declarar pseudoclases al momento de editar un estilo: link, visited, hover, active. Internet Explorer 6 y anteriores solo los soportan en enlaces. • En las tablas se puede utilizar la propiedad hover para especificar un cambio de atributos cuando el cursor pasa por la celda o fila donde se aplica la propiedad.