Hola a todos!
Dejo el ejercicio CU01051D del curso CSS desde cero, solo que en lugar de siete filas tienen cinco (es que no se me ocurría nada para poner en las dos restantes).
HTML:
<html>
<head> <title>Tablas 1051</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="1051.css">
</head>
<body>
<table id="tabla1">
<caption>Contenido nutricional por cada 100g de alimento</caption>
<tr><th>Alimento</th><th>Calorías (kCal)</th><th>Grasas</th>
<th>Proteína (g)</th><th>Carbohidratos (g)</th>
</tr>
<tr><td>Arándano</td> <td>49</td> <td>0.2</td>
<td>0.4</td> <td>12.7</td>
</tr>
<tr><td>Plátano</td> <td>90</td> <td>0.3</td>
<td>1.0</td> <td>23.5</td>
</tr>
<tr><td>Cereza</td> <td>46</td> <td>0.4</td>
<td>0.9</td> <td>10.9</td>
</tr>
<tr><td>Fresa</td> <td>37</td> <td>0.5</td>
<td>0.8</td> <td>8.3</td>
</tr>
</table>
<table id="tabla2">
<caption>Contenido nutricional por cada 100g de alimento</caption>
<tr><th>Alimento</th><th>Calorías (kCal)</th><th>Grasas</th>
<th>Proteína (g)</th><th>Carbohidratos (g)</th>
</tr>
<tr><td>Arándano</td> <td>49</td> <td>0.2</td>
<td>0.4</td> <td>12.7</td>
</tr>
<tr><td>Plátano</td> <td>90</td> <td>0.3</td>
<td>1.0</td> <td>23.5</td>
</tr>
<tr><td>Cereza</td> <td>46</td> <td>0.4</td>
<td>0.9</td> <td>10.9</td>
</tr>
<tr><td>Fresa</td> <td>37</td> <td>0.5</td>
<td>0.8</td> <td>8.3</td>
</tr>
</table>
<table id="tabla3">
<caption>Contenido nutricional por cada 100g de alimento</caption>
<tr><th>Alimento</th><th>Calorías (kCal)</th><th>Grasas</th>
<th>Proteína (g)</th><th>Carbohidratos (g)</th>
</tr>
<tr><td>Arándano</td> <td>49</td> <td>0.2</td>
<td>0.4</td> <td>12.7</td>
</tr>
<tr><td>Plátano</td> <td>90</td> <td>0.3</td>
<td>1.0</td> <td>23.5</td>
</tr>
<tr><td>Cereza</td> <td>46</td> <td>0.4</td>
<td>0.9</td> <td>10.9</td>
</tr>
<tr><td>Fresa</td> <td>37</td> <td>0.5</td>
<td>0.8</td> <td>8.3</td>
</tr>
</table>
</body>
</html>
CSS:
/*Tablas 1051*/
body{font-family:Arial, Helvetica, sans-serif;}
#tabla1{width:600px; border-collapse:collapse;}
#tabla1 th, #tabla1 td{width:20%; border:8px solid grey;}
#tabla2{width:100%; border:2px solid brown;}
#tabla2 th, #tabla2 td{width:20%; border:2px solid brown;}
#tabla3{width:500px; border-collapse:collapse;}
#tabla3 th, #tabla3 td{width:100px; border-bottom:6px solid blue;}
th, td{text-align:center; padding:0.5em;}
Ah! Y dejé el centrado y el padding (se veía mejor).
Gracias! por vuestro trabajo.
Tema: Crear estilos CSS para tablas HTML anchura total, de celda, bordes, etc CU01051D (Leído 3303 veces)
RSS -
WAP2