SlideShare ist ein Scribd-Unternehmen logo
1 von 9
Downloaden Sie, um offline zu lesen
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.

Weitere ähnliche Inhalte

Ähnlich wie 10 tablas

Ähnlich wie 10 tablas (7)

Informatica css
Informatica cssInformatica css
Informatica css
 
Qué es css
Qué es cssQué es css
Qué es 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
 

Kürzlich hochgeladen

El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/FEl PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/FJulio Lozano
 
Salvando mi mundo , mi comunidad , y mi entorno
Salvando mi mundo , mi comunidad  , y mi entornoSalvando mi mundo , mi comunidad  , y mi entorno
Salvando mi mundo , mi comunidad , y mi entornoday561sol
 
Apunte de clase Pisos y Revestimientos 3
Apunte de clase Pisos y Revestimientos 3Apunte de clase Pisos y Revestimientos 3
Apunte de clase Pisos y Revestimientos 3Gonella
 
libro grafismo fonético guía de uso para el lenguaje
libro grafismo fonético guía de uso para el lenguajelibro grafismo fonético guía de uso para el lenguaje
libro grafismo fonético guía de uso para el lenguajeKattyMoran3
 
PRIMER GRADO SOY LECTOR PART1- MD EDUCATIVO.pdf
PRIMER GRADO SOY LECTOR PART1- MD  EDUCATIVO.pdfPRIMER GRADO SOY LECTOR PART1- MD  EDUCATIVO.pdf
PRIMER GRADO SOY LECTOR PART1- MD EDUCATIVO.pdfGabrieldeJesusLopezG
 
BITÁCORA DE ESTUDIO DE PROBLEMÁTICA. TUTORÍA V. PDF 2 UNIDAD.pdf
BITÁCORA DE ESTUDIO DE PROBLEMÁTICA. TUTORÍA V. PDF 2 UNIDAD.pdfBITÁCORA DE ESTUDIO DE PROBLEMÁTICA. TUTORÍA V. PDF 2 UNIDAD.pdf
BITÁCORA DE ESTUDIO DE PROBLEMÁTICA. TUTORÍA V. PDF 2 UNIDAD.pdfsolidalilaalvaradoro
 
LOS AMBIENTALISTAS todo por un mundo mejor
LOS AMBIENTALISTAS todo por un mundo mejorLOS AMBIENTALISTAS todo por un mundo mejor
LOS AMBIENTALISTAS todo por un mundo mejormrcrmnrojasgarcia
 
historieta materia de ecologías producto
historieta materia de ecologías productohistorieta materia de ecologías producto
historieta materia de ecologías productommartinezmarquez30
 
5° Proyecto 13 Cuadernillo para proyectos
5° Proyecto 13 Cuadernillo para proyectos5° Proyecto 13 Cuadernillo para proyectos
5° Proyecto 13 Cuadernillo para proyectosTrishGutirrez
 
Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.monthuerta17
 
NUEVO PLAN Y PROGRAMAS DE ESTUDIO 2022.pdf
NUEVO PLAN Y PROGRAMAS DE ESTUDIO  2022.pdfNUEVO PLAN Y PROGRAMAS DE ESTUDIO  2022.pdf
NUEVO PLAN Y PROGRAMAS DE ESTUDIO 2022.pdfEDNAMONICARUIZNIETO
 
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).hebegris04
 
Buenas Practicas de Manufactura para Industria Farmaceutica
Buenas Practicas de Manufactura para Industria FarmaceuticaBuenas Practicas de Manufactura para Industria Farmaceutica
Buenas Practicas de Manufactura para Industria FarmaceuticaMarco Camacho
 
Descripción del Proceso de corte y soldadura
Descripción del Proceso de corte y soldaduraDescripción del Proceso de corte y soldadura
Descripción del Proceso de corte y soldaduraJose Sanchez
 
Programa sintetico fase 2 - Preescolar.pdf
Programa sintetico fase 2 - Preescolar.pdfPrograma sintetico fase 2 - Preescolar.pdf
Programa sintetico fase 2 - Preescolar.pdfHannyDenissePinedaOr
 
Apunte de clase Pisos y Revestimientos 1
Apunte de clase Pisos y Revestimientos 1Apunte de clase Pisos y Revestimientos 1
Apunte de clase Pisos y Revestimientos 1Gonella
 
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...Carol Andrea Eraso Guerrero
 
Amor o egoísmo, esa es la cuestión por definir.pdf
Amor o egoísmo, esa es la cuestión por definir.pdfAmor o egoísmo, esa es la cuestión por definir.pdf
Amor o egoísmo, esa es la cuestión por definir.pdfAlejandrino Halire Ccahuana
 

Kürzlich hochgeladen (20)

El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/FEl PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
 
Acuerdo segundo periodo - Grado Sexto.pptx
Acuerdo segundo periodo - Grado Sexto.pptxAcuerdo segundo periodo - Grado Sexto.pptx
Acuerdo segundo periodo - Grado Sexto.pptx
 
Sesión ¿Amor o egoísmo? Esa es la cuestión
Sesión  ¿Amor o egoísmo? Esa es la cuestiónSesión  ¿Amor o egoísmo? Esa es la cuestión
Sesión ¿Amor o egoísmo? Esa es la cuestión
 
Salvando mi mundo , mi comunidad , y mi entorno
Salvando mi mundo , mi comunidad  , y mi entornoSalvando mi mundo , mi comunidad  , y mi entorno
Salvando mi mundo , mi comunidad , y mi entorno
 
Apunte de clase Pisos y Revestimientos 3
Apunte de clase Pisos y Revestimientos 3Apunte de clase Pisos y Revestimientos 3
Apunte de clase Pisos y Revestimientos 3
 
libro grafismo fonético guía de uso para el lenguaje
libro grafismo fonético guía de uso para el lenguajelibro grafismo fonético guía de uso para el lenguaje
libro grafismo fonético guía de uso para el lenguaje
 
PRIMER GRADO SOY LECTOR PART1- MD EDUCATIVO.pdf
PRIMER GRADO SOY LECTOR PART1- MD  EDUCATIVO.pdfPRIMER GRADO SOY LECTOR PART1- MD  EDUCATIVO.pdf
PRIMER GRADO SOY LECTOR PART1- MD EDUCATIVO.pdf
 
BITÁCORA DE ESTUDIO DE PROBLEMÁTICA. TUTORÍA V. PDF 2 UNIDAD.pdf
BITÁCORA DE ESTUDIO DE PROBLEMÁTICA. TUTORÍA V. PDF 2 UNIDAD.pdfBITÁCORA DE ESTUDIO DE PROBLEMÁTICA. TUTORÍA V. PDF 2 UNIDAD.pdf
BITÁCORA DE ESTUDIO DE PROBLEMÁTICA. TUTORÍA V. PDF 2 UNIDAD.pdf
 
LOS AMBIENTALISTAS todo por un mundo mejor
LOS AMBIENTALISTAS todo por un mundo mejorLOS AMBIENTALISTAS todo por un mundo mejor
LOS AMBIENTALISTAS todo por un mundo mejor
 
historieta materia de ecologías producto
historieta materia de ecologías productohistorieta materia de ecologías producto
historieta materia de ecologías producto
 
5° Proyecto 13 Cuadernillo para proyectos
5° Proyecto 13 Cuadernillo para proyectos5° Proyecto 13 Cuadernillo para proyectos
5° Proyecto 13 Cuadernillo para proyectos
 
Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.
 
NUEVO PLAN Y PROGRAMAS DE ESTUDIO 2022.pdf
NUEVO PLAN Y PROGRAMAS DE ESTUDIO  2022.pdfNUEVO PLAN Y PROGRAMAS DE ESTUDIO  2022.pdf
NUEVO PLAN Y PROGRAMAS DE ESTUDIO 2022.pdf
 
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
 
Buenas Practicas de Manufactura para Industria Farmaceutica
Buenas Practicas de Manufactura para Industria FarmaceuticaBuenas Practicas de Manufactura para Industria Farmaceutica
Buenas Practicas de Manufactura para Industria Farmaceutica
 
Descripción del Proceso de corte y soldadura
Descripción del Proceso de corte y soldaduraDescripción del Proceso de corte y soldadura
Descripción del Proceso de corte y soldadura
 
Programa sintetico fase 2 - Preescolar.pdf
Programa sintetico fase 2 - Preescolar.pdfPrograma sintetico fase 2 - Preescolar.pdf
Programa sintetico fase 2 - Preescolar.pdf
 
Apunte de clase Pisos y Revestimientos 1
Apunte de clase Pisos y Revestimientos 1Apunte de clase Pisos y Revestimientos 1
Apunte de clase Pisos y Revestimientos 1
 
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
 
Amor o egoísmo, esa es la cuestión por definir.pdf
Amor o egoísmo, esa es la cuestión por definir.pdfAmor o egoísmo, esa es la cuestión por definir.pdf
Amor o egoísmo, esa es la cuestión por definir.pdf
 

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.