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;
}


Comentarios