Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Boletos en 01 de Marzo 2016, 18:53
-
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.
-
Hola! Todo bien, a continuar
Saludos!
-
Hola boletos,
como sugerencia pero solo para los ejercicios que hacemos aquí, te pediria que metieras el código CSS dentro del <head> con las etiquetas <style>, es mucho más rápido para ver tus soluciones que si tienes que crear dos archivos.
Saludos.
-
Bermartinv justo hoy hice un ejercicio de esa forma.
Lo tendré en cuenta en adelante.
Un saludo!
Gracias!