Tabla completa
<table>
<thead>
<tr>
<!--El título va a ocupar el espacio de 10 celdas horizontalmente -->
<td colspan="10">Información Nutricional/Porción(100g)</td>
</tr>
<!--tr define una fila en la tabla-->
<tr>
<!--rowspan ocupa el espacio de celdas verticalmente -->
<th rowspan="2">Productos</th>
<th colspan="3">Grasas</th>
<th colspan="2">Hidratos de carbono(g)</th>
<th colspan="3">Otros</th>
<th>Energía(Kcal)</th>
</tr>
<tr>
<th>Saturadas</th>
<th>Monoinsaturadas</th>
<th>Poliinsaturadas</th>
<th>Azucares</th>
<th>Otros</th>
<th>Proteínas</th>
<th>Sal</th>
<th>Otros</th>
</tr>
</thead>
<!--tfoot define el pie de la tabla-->
<tfoot>
<tr>
<!--td define una celda en la tabla -->
<th> Total</th>
<td colspan="3" >31,2</td>
<td colspan="2">54</td>
<td colspan="3">4,81</td>
</tr>
</tfoot>
<tbody>
<!--cambiamos el formato de una fila-->
<tr class="blanco">
<th>Nombre del producto</th>
<td>20</td>
<td>4,38</td>
<td>6,82</td>
<td>33,07</td>
<td>20,93</td>
<td>4,64</td>
<td>0,7</td>
<td>9,46</td>
<td>281</td>
</tr>
</tbody>
</table>
archivo css
/*Estilo para tabla de información nutricional*/
table {
width: 90%;
max-width: 700px;
min-width:520px;
margin:auto;
font: normal 11px verdana, arial, helvetica, sans-serif;
color: black;
font-size:15px;
background: #FF9900;
}
/* Defino el ancho y el alienado de cada celda */
td{
width:25%;
text-align: center;
}
/*Defino el borde de la tabla, de las filas y de las celdas*/
table, td, th{
border: 1px solid #03476F;
border-collapse: collapse;
}
/*defino la clase blanco para el fondo de una fila completa*/
tr.blanco{
background:white;
}

<thead>
<tr>
<!--El título va a ocupar el espacio de 10 celdas horizontalmente -->
<td colspan="10">Información Nutricional/Porción(100g)</td>
</tr>
<!--tr define una fila en la tabla-->
<tr>
<!--rowspan ocupa el espacio de celdas verticalmente -->
<th rowspan="2">Productos</th>
<th colspan="3">Grasas</th>
<th colspan="2">Hidratos de carbono(g)</th>
<th colspan="3">Otros</th>
<th>Energía(Kcal)</th>
</tr>
<tr>
<th>Saturadas</th>
<th>Monoinsaturadas</th>
<th>Poliinsaturadas</th>
<th>Azucares</th>
<th>Otros</th>
<th>Proteínas</th>
<th>Sal</th>
<th>Otros</th>
</tr>
</thead>
<!--tfoot define el pie de la tabla-->
<tfoot>
<tr>
<!--td define una celda en la tabla -->
<th> Total</th>
<td colspan="3" >31,2</td>
<td colspan="2">54</td>
<td colspan="3">4,81</td>
</tr>
</tfoot>
<tbody>
<!--cambiamos el formato de una fila-->
<tr class="blanco">
<th>Nombre del producto</th>
<td>20</td>
<td>4,38</td>
<td>6,82</td>
<td>33,07</td>
<td>20,93</td>
<td>4,64</td>
<td>0,7</td>
<td>9,46</td>
<td>281</td>
</tr>
</tbody>
</table>
archivo css
/*Estilo para tabla de información nutricional*/
table {
width: 90%;
max-width: 700px;
min-width:520px;
margin:auto;
font: normal 11px verdana, arial, helvetica, sans-serif;
color: black;
font-size:15px;
background: #FF9900;
}
/* Defino el ancho y el alienado de cada celda */
td{
width:25%;
text-align: center;
}
/*Defino el borde de la tabla, de las filas y de las celdas*/
table, td, th{
border: 1px solid #03476F;
border-collapse: collapse;
}
/*defino la clase blanco para el fondo de una fila completa*/
tr.blanco{
background:white;
}
Comentarios
Publicar un comentario