tabla al 100% de la pantalla

Macro32 · #1 (**permalink**) 11/06/2013, 16:44

Hola, estoy aprendiendo a maquetar mediante html5 div+css.

Les doy el ejemplo :

http://www.cosespi.com/tabla.html

Es una tabla con una sola fila. Lo que deseo es que el alto de dicha tabla ocupe el 100% de la pantalla.

Solo deseo usar divs y css. Espero que alguien puede darme una mano.GRacias!!

Codigo HTML

<!doctype html>

<html>

<head>

<meta charset="utf-8">
<title> Starbuzz: El mejor Cafe!</title>
<link type="text/css" rel="stylesheet" href="style2.css">

</head>
<body>

<div class="mitabla">

<div class="mifila">
<div class="izquierda">izquierda</div>

<div class="derecha">derecha</div>
</div>

</div>

</body>

</html>

CSS

body{

margin:0px;

}

.mitabla{

display:table;

width:100%;

height:100%;

}

.mifila{

display:table-row;

}

.izquierda{

display:table-cell;
width:25%;
background-color:red;

}

.derecha{
display:table-cell;

background-color:blue;

}

ArturoGallegos · #2 (**permalink**) 11/06/2013, 19:51

deberías tratar dejar de lado el pensar en tablas cuando maquetas, de cualquier forma para conseguir ocupe el 100% de alto debes aplicar

Código CSS:

Ver originalhtml,body{height:100%;}

Macro32 · #3 (**permalink**) 11/06/2013, 20:48

Cita:

Iniciado por ArturoGallegos

deberías tratar dejar de lado el pensar en tablas cuando maquetas, de cualquier forma para conseguir ocupe el 100% de alto debes aplicar

Código CSS:

Ver originalhtml,body{height:100%;}

ARturo gracias por tu respuesta! ya lo probe y me funciono

Porque me recomiendas dejar de pensar en tablas?.

ArturoGallegos · #4 (**permalink**) 12/06/2013, 11:54

porque las tablas son un sistema de maquetación poco ortodoxo y cerrado, al principio puede parecer la forma mas fácil pero al final resulta la mas complicada y sucia.

aunque tu has usado div si te fijas incurres en uno de los problemas de usar tablas, generas código innecesario volviéndose sucio.

para tu estructura actual hubiera bastado con

Código CSS:

Ver original*{margin:0;padding:0;}
html,body{height:100%;}
.izquierda{float:left;width:25%;height:100%;background:red;}
.derecha{float:right;width:74%;height:100%;background:blue;}

Código HTML:

Ver original<div class="izquierda">content1</div>
<div class="derecha">content2</div>

Ahora bien esto es con un ejemplo rápido, imagínate con un diseño complejo cuantas lineas de código innecesarias obtendrás.

tonigomila1988 · #5 (**permalink**) 12/06/2013, 11:59

Además, si me permitís añadir una cosa más, las tablas fueron pensadas para estructurar información, como una clasificación deportiva, un listado de alumnos, etc.

Las tablas en HTML no están pensadas para maquetar diseños.

Macro32 · #6 (**permalink**) 12/06/2013, 12:47

ARturo gracias por tu explicacion. Despues de ver esto ya me he puesto a ver otros ejemplos. Entiendo que las tablas fueron para hacer tablas (valga la redundancia) y no para maquetar ya que generan demasiado codigo. Gracias nuevamente!

Cita:

Iniciado por ArturoGallegos

porque las tablas son un sistema de maquetación poco ortodoxo y cerrado, al principio puede parecer la forma mas fácil pero al final resulta la mas complicada y sucia.

aunque tu has usado div si te fijas incurres en uno de los problemas de usar tablas, generas código innecesario volviéndose sucio.

para tu estructura actual hubiera bastado con

Código CSS:

Ver original*{margin:0;padding:0;}
html,body{height:100%;}
.izquierda{float:left;width:25%;height:100%;background:red;}
.derecha{float:right;width:74%;height:100%;background:blue;}

Código HTML:

Ver original<div class="izquierda">content1</div>
<div class="derecha">content2</div>

Ahora bien esto es con un ejemplo rápido, imagínate con un diseño complejo cuantas lineas de código innecesarias obtendrás.