Foros del Web » Creando para Internet » HTML »

Maquetear <div> como tabla con celdas combinadas

 Estas en el tema de Maquetear <div> como tabla con celdas combinadas en el foro de HTML en Foros del Web. Estimados, alguna idea de como maquetear los <div> y que algunas "Celdas" aparezcan como combinadas?, les dejo un ejemplo de lo q intento hacer. Gracias! ...
  #1 (permalink)  
Antiguo 23/04/2015, 12:59
Avatar de rolonavarta  
Fecha de Ingreso: agosto-2014
Ubicación: Argentina
Mensajes: 10
Antigüedad: 9 años, 8 meses
Puntos: 0
Pregunta Maquetear <div> como tabla con celdas combinadas
Estimados, alguna idea de como maquetear los <div> y que algunas "Celdas" aparezcan como combinadas?, les dejo un ejemplo de lo q intento hacer.


Gracias!

Código: 
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
<title>Como crear una tabla con divs</title>  
<style type="text/css">  
        .Table  
        {  
            display: table;  
        }  
        .Title  
        {  
            display: table-caption;  
            text-align: center;  
            font-weight: bold;  
            font-size: larger;  
        }  
        .Heading  
        {  
            display: table-row;  
            font-weight: bold;  
            text-align: center;  
        }  
        .Row  
        {  
            display: table-row;  
        }  
        .Cell  
        {  
            display: table-cell;  
            border: solid;  
            border-width: thin;  
            padding-left: 5px;  
            padding-right: 5px;  
        }
		#fondo {background:#fff;
		border:hidden;}  
    </style>  
</head>  
<body>  
    <div class="Table">  
        <div class="Title">  
            <p>Esta es la tabla</p>  
        </div>  
        <div class="Heading">
        	<div class="Cell" id="fondo">  
                <p></p>  
            </div>    
            <div class="Cell" id="fondo">  
                <p></p>  
            </div>  
            <div class="Cell">  
                <p>Total</p>  
            </div>  
            <div class="Cell">  
                <p>Maximo</p>  
            </div>
            <div class="Cell">  
                <p>Promedio</p>  
            </div>  
            <div class="Cell">  
                <p>Minimo</p>  
            </div>
        </div>  
        <div class="Row">  
            <div class="Cell">  
                  <p>1</p>
            </div>  
            <div class="Cell">
              <p>Monte Verde 
              </p>
            </div>  
            <div class="Cell">  
                <p>3</p>  
            </div>
            <div class="Cell">  
                <p>4</p>  
            </div> 
            <div class="Cell">  
                <p>5</p>  
            </div> 
            <div class="Cell">  
                <p>6</p>  
            </div>   
        </div>  
        <div class="Row">  
            <div class="Cell">  
                <p>1            </p>
            </div>  
            <div class="Cell">  
                <p>Bidones</p>  
            </div>  
            <div class="Cell">  
                <p>3</p>  
            </div>
            <div class="Cell">  
                <p>4</p>  
            </div> 
            <div class="Cell">  
                <p>5</p>  
            </div> 
            <div class="Cell">  
                <p>6</p>  
            </div>   
        </div>  
        <div class="Row">  
            <div class="Cell">  
                <p>1</p>  
            </div>  
            <div class="Cell">  
                <p>Patogénicos</p>  
            </div>  
            <div class="Cell">  
                <p>3</p>  
            </div>
            <div class="Cell">  
                <p>4</p>  
            </div> 
            <div class="Cell">  
                <p>5</p>  
            </div> 
            <div class="Cell">  
                <p>6</p>  
            </div>   
        </div>
        <div class="Row">  
            <div class="Cell">  
                <p>1</p>  
            </div>  
            <div class="Cell">  
                <p>Industriales</p>  
            </div>  
            <div class="Cell">  
                <p>3</p>  
            </div>
            <div class="Cell">  
                <p>4</p>  
            </div> 
            <div class="Cell">  
                <p>5</p>  
            </div> 
            <div class="Cell">  
                <p>6</p>  
            </div>   
        </div>
        <div class="Row">  
            <div class="Cell">  
                <p>1</p>  
            </div>  
            <div class="Cell">  
                <p>Otros</p>  
            </div>  
            <div class="Cell">  
                <p>3</p>  
            </div>
            <div class="Cell">  
                <p>4</p>  
            </div> 
            <div class="Cell">  
                <p>5</p>  
            </div> 
            <div class="Cell">  
                <p>6</p>  
            </div>   
        </div>  
        <div class="Row">  
            <div class="Cell">  
                <p>1</p>  
            </div>  
            <div class="Cell">  
                <p>Horas</p>  
            </div>  
            <div class="Cell">  
                <p>3</p>  
            </div>
            <div class="Cell">  
                <p>4</p>  
            </div> 
            <div class="Cell">  
                <p>5</p>  
            </div> 
            <div class="Cell">  
                <p>6</p>  
            </div>   
        </div>  
        <div class="Row">  
            <div class="Cell" id="fondo">  
                <p>Camara</p>  
            </div>  
            <div class="Cell">  
                <p>Temperatura</p>  
            </div>  
            <div class="Cell">  
                <p>3</p>  
            </div>
            <div class="Cell">  
                <p>4</p>  
            </div> 
            <div class="Cell">  
                <p>5</p>  
            </div> 
            <div class="Cell">  
                <p>6</p>  
            </div>   
        </div>
        <div class="Row">  
            <div class="Cell" id="fondo">  
                <p>Primaria</p>  
            </div>  
            <div class="Cell">  
                <p>Aire</p>  
            </div>  
            <div class="Cell">  
                <p>3</p>  
            </div>
            <div class="Cell">  
                <p>4</p>  
            </div> 
            <div class="Cell">  
                <p>5</p>  
            </div> 
            <div class="Cell">  
                <p>6</p>  
            </div>   
        </div>
        <div class="Row">  
            <div class="Cell">  
                <p>1</p>  
            </div>  
            <div class="Cell">  
                <p>2</p>  
            </div>  
            <div class="Cell">  
                <p>3</p>  
            </div>
            <div class="Cell">  
                <p>4</p>  
            </div> 
            <div class="Cell">  
                <p>5</p>  
            </div> 
            <div class="Cell">  
                <p>6</p>  
            </div>   
        </div>  
        <div class="Row">  
            <div class="Cell">  
                <p>1</p>  
            </div>  
            <div class="Cell">  
                <p>2</p>  
            </div>  
            <div class="Cell">  
                <p>3</p>  
            </div>
            <div class="Cell">  
                <p>4</p>  
            </div> 
            <div class="Cell">  
                <p>5</p>  
            </div> 
            <div class="Cell">  
                <p>6</p>  
            </div>   
        </div>  
        <div class="Row">  
            <div class="Cell">  
                <p>1</p>  
            </div>  
            <div class="Cell">  
                <p>2</p>  
            </div>  
            <div class="Cell">  
                <p>3</p>  
            </div>
            <div class="Cell">  
                <p>4</p>  
            </div> 
            <div class="Cell">  
                <p>5</p>  
            </div> 
            <div class="Cell">  
                <p>6</p>  
            </div>   
        </div>
        <div class="Row">  
            <div class="Cell">  
                <p>1</p>  
            </div>  
            <div class="Cell">  
                <p>2</p>  
            </div>  
            <div class="Cell">  
                <p>3</p>  
            </div>
            <div class="Cell">  
                <p>4</p>  
            </div> 
            <div class="Cell">  
                <p>5</p>  
            </div> 
            <div class="Cell">  
                <p>6</p>  
            </div>   
        </div>
        <div class="Row">  
            <div class="Cell">  
                <p>1</p>  
            </div>  
            <div class="Cell">  
                <p>2</p>  
            </div>  
            <div class="Cell">  
                <p>3</p>  
            </div>
            <div class="Cell">  
                <p>4</p>  
            </div> 
            <div class="Cell">  
                <p>5</p>  
            </div> 
            <div class="Cell">  
                <p>6</p>  
            </div>   
        </div>       
    </div>
</body>  
</html>
  #2 (permalink)  
Antiguo 23/04/2015, 13:37
Colaborador
  
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 8 meses
Puntos: 578
Respuesta: Maquetear <div> como tabla con celdas combinadas
¿Por qué usas solamente divs y no tablas como debería ser?
  #3 (permalink)  
Antiguo 23/04/2015, 14:17
Avatar de rolonavarta  
Fecha de Ingreso: agosto-2014
Ubicación: Argentina
Mensajes: 10
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Maquetear <div> como tabla con celdas combinadas
tengo una tabla q es para mostrar los resultados de una base de datos y quería jugar un poco con div para dar a lo q necesito una vista mas agradable con css... a demás tenia la duda de q si se puede usar algo parecido con los div a lo q seria cellspan o roespan
  #4 (permalink)  
Antiguo 23/04/2015, 16:59
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 19 años
Puntos: 17
Respuesta: Maquetear <div> como tabla con celdas combinadas
Si estás mostrando datos "tabulados", ¿por qué no usas tablas?
Para eso están hechas, la cuestión es no usar tablas para diseñar layouts de sitios web, pero si son necesarias para esto, además que puedes aplicar CSS a las tablas, celdas, filas....

Saludos!
__________________
Al final del día hablar es gratis, codificar no lo es
  #5 (permalink)  
Antiguo 24/04/2015, 10:05
Avatar de rolonavarta  
Fecha de Ingreso: agosto-2014
Ubicación: Argentina
Mensajes: 10
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Maquetear <div> como tabla con celdas combinadas
Cita:
Iniciado por baccxus Ver Mensaje
Si estás mostrando datos "tabulados", ¿por qué no usas tablas?
Para eso están hechas, la cuestión es no usar tablas para diseñar layouts de sitios web, pero si son necesarias para esto, además que puedes aplicar CSS a las tablas, celdas, filas....

Saludos!
Hola, efectivamente los datos se muestran en una tabla, lo q quiero hacer es mostrar en los div los totales de cada columna de la tabla

tabla (ya existe y funciona)

| P1 | P2 | P3 |
|col1 |col2 |col3 |col4|
|dat1|dat1|dat1|dat1|
|dat2|dat2|dat2|dat2|
|dat3|dat3|dat3|dat3|
|dat4|dat4|dat4|dat4|

div (es lo que quiero armar con div maqueteado como tabla)

p1 | Total col1
------------------
p2 | Total col2
------------------
| Total col3
p3 | ------------
| Total Col4
------------------

a lo mejor no fui claro al principio, y espero esto aclare mi duda!!

Gracias por responder
Última edición por rolonavarta; 24/04/2015 a las 10:07 Razón: Formato del ejemplo

Etiquetas: celdas, combinados, divs, tablas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 15:57.