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;
}
![](data:image/png;base64,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)
<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