Teoría
Teoría

La propiedad display: table-row

Como habrás adivinado, estamos construyendo una tabla con elementos div y nuevos valores de display.

Toda tabla contiene elementos con cajas de tipo fila de tabla, que a su vez deben contener elementos con cajas de tipo celda de tabla. Esta es la correspondencia entre las etiquetas de tabla y los valores de display:

<table>: display: table;

<tr>: display: table-row;

<td>: display: table-cell;

En este ejercicio crearás «filas de tabla» con display: table-row;. Una fila de tabla es un elemento poco común: sirve de contenedor para las celdas y casi no tiene una apariencia propia. Puedes cambiar su color de fondo.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>La propiedad display: table-row</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 { background-color: #f2dede; border-color: #b94a48; } .cell { background-color: #fbeed5; border-color: #c09853; }

ObjetivosRealizado

Cambia el tipo de caja del elemento de la clase row a fila de tabla.