EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Propiedades listas CSS
            Propiedades de las listas en CSS
            11/10/2019
            Pseudo-clases pseudo-elementos
            Pseudo-clases y pseudo-elementos en CSS
            12/10/2019

            Propiedades de las tablas en CSS

            Propiedades tablas css

            Propiedades de las tablas en css

            Tabla de contenidos

            • 9. Propiedades de las tablas
            • 9.1. Caption-side
            • 9.2. Table-layout
            • 9.3. Border-collapse
            • 9.4. Border-spacing
            • 9.5. Empty-cells

            9. Propiedades de las tablas

            Las propiedades CSS de las tablas son las que nos permiten controlar los estilos de los títulos de la tabla, el tamaño de las celdas, las filas y las columnas o espaciado entre los bordes. En la tabla 9.1 se muestran las propiedades de las tablas más utilizadas.

            Tabla 9.1: Propiedades de las tablas
            Propiedad Descripción Valores
            caption-side Posición del título respecto la tabla top | bottom
            table-layout Formato de las celdas, filas y columnas auto | fixed
            border-collapse Selección del modelo de los bordes collapse | separate
            border-spacing Espaciado entre los bordes de celdas adyacentes longitud
            empty-cells Visibilidad de los bordes de celdas sin contenido show | hide

            9.1. Caption-side

            .a { caption-side: bottom; }
            .b { caption-side: top; }

            0


            9.2. Table-layout

            .a { table-layout: auto; }
            .b { table-layout: auto; width: 100%; }
            .c { table-layout: fixed; width: 200px; }

            0


            9.3. Border-collapse

            .a { border-collapse: separate; }
            .b { border-collapse: collapse; } 

            0


            9.4. Border-spacing

            .a { border-collapse: separate; border-spacing: 50px 10px;}
            .b { border-collapse: collapse; border-spacing: 40px;} /* border-spacing solo tiene efecto cuando border-collapse: separate; */
            .c { border-spacing: 0;} /* border-spacing: 0 es igual qu eborder-collapse: collapse */

            0

            9.5. Empty-cells

            .a { empty-cells: hide; }
            .b { empty-cells: show; } 

            0


            Comprueba tu aprendizaje

            ¿Qué propiedad no existe en CSS?

            ¡Bien! ¡Has fallado!

            ¿Con qué propiedad y con qué valor indicamos que el titulo de la tabla se posicione en la parte de abajo?

            ¡Bien! ¡Has fallado!

            ¿Con qué propiedad indicamos que la tabla ocupe todo el ancho de la pantalla?

            ¡Bien! ¡Has fallado!

            CSS. Propiedades de las tablas
            ¡Muy bien!
            Sigue practicando...
            Compartir

            UD3. CSS básico

            • 1. ¿Qué es CSS?
            • 2. ¿Cómo aplicar estilos CSS?
            • 3. Selectores
            • 4. Unidades de medida
            • 5. Colores y fondo
            • 6. Propiedades de texto
            • 7. Propiedades de las fuentes
            • 8. Propiedades de las listas
            • 9. Propiedades de las tablas
            • 10. Pseudo-clases y pseudo-elementos en CSS
            • 11. Prefijos CSS de los navegadores
            • 12. Buenas prácticas CSS
            • 13. Modelo de cajas: márgenes, relleno y bordes
            • 14. Posición y comportamiento de contenedores en CSS
            • 15. Formatos de las fuentes en CSS y utilización de repositorios
            • 16. Estilos en formularios CSS
            • 17. Herramientas útiles, test de verificación y referencias
            • 18. Resumen CSS
            • 19. Prácticas CSS
            • 20. Test de conocimientos CSS
            • 21. Propiedades Personalizadas CSS

            Diseño de Interfaces Web

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results