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: JurreNawijn en 23 de Enero 2016, 00:59
-
Dejo la respuesta del siguiente ejercicio acá.
HTML:
<html>
<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<table id="tabla1">
<caption>Tabla 1</caption>
<thead>
<tr>
<th>Alimento</th>
<th>Calorías (kCal)</th>
<th>Grasas (g)</th>
<th>Proteina (g)</th>
<th>Carbohidratos (g)</th>
</tr>
</thead>
<tbody>
<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>
<tr>
<td>Mandarina</td>
<td>44</td>
<td>0.2</td>
<td>0.6</td>
<td>9.2</td>
</tr>
<tr>
<td>Banana</td>
<td>90</td>
<td>0.33</td>
<td>1.09</td>
<td>22.84</td>
</tr>
</tbody>
</table>
<table id="tabla2">
<caption>Tabla 2</caption>
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Teléfono</th>
<th>Dirección</th>
<th>Edad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
</tr>
<tr>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
</tr>
<tr>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
</tr>
<tr>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
</tr>
<tr>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
</tr>
<tr>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
</tr>
</tbody>
</table>
<table id="tabla3">
<caption>Tabla 3</caption>
<thead>
<tr>
<th>verbum significatium</th>
<th>verbum significatium</th>
<th>verbum significatium</th>
<th>verbum significatium</th>
<th>verbum significatium</th>
</tr>
</thead>
<tbody>
<tr>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
</tr>
<tr>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
</tr>
<tr>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
</tr>
<tr>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
</tr>
<tr>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
</tr>
<tr>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS:
table {
text-align: center;
}
#tabla1 {
width: 600px;
border: 8px solid gray;
border-collapse: collapse;
}
#tabla1 th, #tabla1 td{
width: 20%;
border: 8px solid gray;
border-collapse: collapse;
}
#tabla2 {
margin-top: 20px;
width: 100%;
border: 2px solid brown;
}
#tabla2 td, #tabla2 th {
width: 20%;
border: 2px solid brown;
}
#tabla3 {
margin-top: 20px;
width: 500px;
border-bottom: 6px solid blue;
border-collapse: collapse;
}
#tabla3 td, #tabla3 th {
width: 100px;
border-bottom: 6px solid blue;
border-collapse: collapse;
}
-
Buenas JurreNawijn has cumplido exactamente con lo que pedía el ejercicio
Como forma de mejorar te recomendaría que trataras de evitar la repetición de código. Por ejemplo tienes
#tabla1 {
width: 600px;
border: 8px solid gray;
border-collapse: collapse;
}
#tabla1 th, #tabla1 td{
width: 20%;
border: 8px solid gray;
border-collapse: collapse;
}
Para evitar la repetición de los estilos de los bordes podría organizarse así:
#tabla1 {
width: 600px;
}
#tabla1, #tabla1 th, #tabla1 td {
border: 8px solid gray;
border-collapse: collapse;
}
#tabla1 th, #tabla1 td{
width: 20%;
}
La ventaja de esto es que tenemos definido el estilo de los bordes en un único punto y si queremos cambiarlo basta cambiar en un único punto y no tenemos que hacerlo en dos puntos. La repetición de código (excepto cuando esté bien estudiada y justificada) es algo que se debe tratar de evitar.
Salu2