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>