Saltar al contenido principal
Codigo Heroe
Tarea anterior
Modelo de cajas19/20
A la lista de tareas
  1. 1. Cajas de bloque
  2. 2. Cajas en línea
  3. 3. Ancho y alto
  4. 4. Relleno: la propiedad padding
  5. 5. Márgenes: la propiedad margin
  6. 6. Bordes
  7. 7. El modelo de cajas estándar
  8. 8. Colapso de márgenes
  9. 9. Márgenes que salen del contenedor
  10. 10. Cómo centrar un elemento
  11. 11. El modelo de cajas y las cajas en línea
  12. 12. Ancho del 100% y ancho predeterminado
  13. 13. Limitaciones del modelo de cajas estándar
  14. 14. Cambiar el modelo de cajas: box-sizing
  15. 15. Cambiar el tipo de caja: display
  16. 16. La propiedad display: inline-block
  17. 17. La propiedad display: table
  18. 18. La propiedad display: table-row
  19. 19. La propiedad display: table-cell
  20. 20. La propiedad display: none
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

La propiedad display: table-cell

El valor table-cell de la propiedad display convierte la caja de un elemento en una celda de tabla. Lo recomendable es colocar las celdas dentro de filas y las filas dentro de una tabla.

También puedes asignar el tipo celda de tabla a un elemento sin añadir filas ni tablas a su alrededor. En ese caso, el navegador creará las cajas anónimas de fila y tabla que hagan falta. El inconveniente es que no podrás controlarlas.

A las tablas creadas con CSS puedes aplicarles las mismas propiedades que a las tablas normales. Por ejemplo, puedes definir la separación entre celdas o el modo de colapso de los bordes.

También existen las cajas flex y grid, que ofrecen otras formas de distribuir los elementos de una página.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>La propiedad display: table-cell</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Visitas por ciudad</h1> <div class="table"> <div class="row"> <div class="cell">Ciudad</div> <div class="cell">Visitas</div> <div class="cell">Páginas</div> <div class="cell">Tiempo</div> </div> <div class="row"> <div class="cell">Lima</div> <div class="cell">500</div> <div class="cell">6</div> <div class="cell">00:08:05</div> </div> </div> </body> </html>
CSS
div { margin: 5px; padding: 5px; border: 1px dotted white; } .table { display: table; background-color: #d9edf7; border-color: #3a87ad; } .row { display: table-row; background-color: #f2dede; border-color: #b94a48; } .cell { background-color: #fbeed5; border-color: #c09853; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Cambia el tipo de caja del elemento de la clase cell a celda de tabla.
    2. Añade otra fila con cuatro celdas a la tabla.
    3. Asigna un relleno de cero al elemento de la clase table.
    4. Añade la propiedad border-spacing: 5px; al elemento de la clase table.
    Codigo Heroe

    © 2023-2026, codigoheroe.com