Teoría
Teoría

La propiedad display: none

El valor none de display se usa con mucha frecuencia. Permite ocultar un elemento como si nunca hubiera estado allí. El elemento oculto no se muestra ni ocupa espacio en la página.

Se usa para crear menús desplegables, galerías dinámicas, pestañas y muchas otras cosas.

Hay otra propiedad CSS para ocultar elementos: visibility con el valor hidden. Esta propiedad «esconde» el elemento: se vuelve invisible, pero sigue ocupando espacio en la página.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>La propiedad display: none</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 row-2"> <div class="cell">Lima</div> <div class="cell">500</div> <div class="cell">6</div> <div class="cell">00:08:05</div> </div> <div class="row"> <div class="cell cell-3-1">Quito</div> <div class="cell">600</div> <div class="cell">5</div> <div class="cell">00:07:05</div> </div> </div> </body> </html>

CSS

div { margin: 5px; padding: 5px; border: 1px dotted white; } .table { display: table; padding: 0; border-spacing: 5px; background-color: #d9edf7; border-color: #3a87ad; } .row { display: table-row; background-color: #f2dede; border-color: #b94a48; } .cell { display: table-cell; background-color: #fbeed5; border-color: #c09853; }

ObjetivosRealizado

Oculta el elemento de la clase row-2 con display.
Después, elimina la propiedad display de row-2 y oculta el elemento con visibility.
Oculta el elemento de la clase cell-3-1 con display.
Después, elimina la propiedad display de cell-3-1 y oculta el elemento con visibility.