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: Pandemia en 29 de Marzo 2016, 11:59
-
Buenos días amigos aquí os dejo el ejercicio, creo que está bastante bien pero ya me diréis como va o si se puede mejorar, que seguro que siempre algo se puede mejorar y así aprender de los fallos, como siempre muchas gracias de antemano por vuestro tiempo.
Saludos. :)
Ahí van los códigos...
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="portal web aprenderprogramar.com">
<meta name="keywords" content="estilos y herncia en tablas css">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos28.css">
</head>
<body>
<div id="tabla1">
<table>
<caption>Medidas y equivalencias</caption>
<thead>
<tr>
<th>Cantidad de producto</th>
<th>Cuchara</th>
<th>Cucharilla</th>
<th>Taza grande</th>
<th>Taza de café</th>
</tr>
</thead>
<tr>
<td>Agua</td>
<td>17 grs</td>
<td>5 grs</td>
<td>150 grs</td>
<td>90 grs</td>
</tr>
<tr>
<td>Azucar</td>
<td>18 grs</td>
<td>7 grs</td>
<td>120</td>
<td>70 grs</td>
</tr>
<tr>
<td>Vino</td>
<td>17 grs</td>
<td>5 grs</td>
<td>150 grs</td>
<td>90 grs</td>
</tr>
<tr>
<td>sal</td>
<td>18 grs</td>
<td>7 grs</td>
<td>----</td>
<td>----</td>
</tr>
<tr>
<td>Leche</td>
<td>17 grs</td>
<td>5 grs</td>
<td>150 grs</td>
<td>90 grs</td>
</tr>
<tr>
<td>Arroz</td>
<td>17 grs</td>
<td>6 grs</td>
<td>100 grs</td>
<td>65 grs</td>
</tr>
<tr>
<td>Cacao</td>
<td>12 grs</td>
<td>4 grs</td>
<td>----</td>
<td>----</td>
</tr>
</table>
</div>
<br/>
<div id="tabla_2">
<table>
<caption>Temperaturas del horno</caption>
<thead>
<tr>
<th>Marca en el horno</th>
<th>Grados celsius</th>
<th>Grados farenheit</th>
<th>Descripción</th>
<th>Apto para cocinar</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>110º a 140º</td>
<td>225º a 275º</td>
<td>Muy bajo/muy suave/minimo suave</td>
<td>Merengues/guisos/platos co huevo</td>
</tr>
<tr>
<td>2</td>
<td>150º</td>
<td>300º</td>
<td>Suave</td>
<td>Platos de cocción larga/braseados</td>
</tr>
<tr>
<td>3</td>
<td>170º</td>
<td>325º</td>
<td>Moderado/bajo</td>
<td>Bizcochuelos/flanes</td>
</tr>
<tr>
<td>4</td>
<td>180º</td>
<td>350º</td>
<td>Moderado</td>
<td>Galletas/lasagna</td>
</tr>
<tr>
<td>5-6</td>
<td>190º</td>
<td>375º</td>
<td>Moderado alto</td>
<td>Pasteles/tartas/empanadas</td>
</tr>
<tr>
<td>7</td>
<td>200º a 220º</td>
<td>400º a 425º</td>
<td>Alto/fuerte</td>
<td>Hojaldres</td>
</tr>
<tr>
<td>8</td>
<td>230º a 240º</td>
<td>450 a 475º500º</td>
<td>Fuerte</td>
<td>Asados/pan/pizza</td>
</tr>
</table>
</div>
<br/>
<div id="tabla_3">
<table>
<caption>Tallas de caballero</caption>
<thead>
<tr>
<th>Tallas de caballero</th>
</tr>
<tr>
<th>Talla</th>
<th>cm</th>
<th>44</th>
<th>46</th>
<th>48</th>
<th>50</th>
<th>52</th>
<th>54</th>
<th>56</th>
</tr>
</thead>
<tr>
<th>Estatura</th>
<th>cm</th>
<td>168</td>
<td>171</td>
<td>174</td>
<td>177</td>
<td>180</td>
<td>182</td>
<td>184</td>
</tr>
<tr>
<th>Contorno pecho</th>
<th>cm</th>
<td>88</td>
<td>92</td>
<td>96</td>
<td>100</td>
<td>104</td>
<td>108</td>
<td>112</td>
</tr>
<tr>
<th>Contorno cintura</th>
<th>cm</th>
<td>78</td>
<td>82</td>
<td>86</td>
<td>90</td>
<td>94</td>
<td>98</td>
<td>104</td>
</tr>
<tr>
<th>Contorno cadera</th>
<th>cm</th>
<td>90</td>
<td>94</td>
<td>98</td>
<td>102</td>
<td>106</td>
<td>110</td>
<td>115</td>
</tr>
<tr>
<th>Largo espalda</th>
<th>cm</th>
<td>42</td>
<td>43</td>
<td>43,5</td>
<td>44,5</td>
<td>45</td>
<td>45,5</td>
<td>46</td>
</tr>
<tr>
<th>Largo brazo</th>
<th>cm</th>
<td>61</td>
<td>62</td>
<td>63</td>
<td>64</td>
<td>65</td>
<td>66</td>
<td>67</td>
</tr>
<tr>
<th>Contorno cuello</th>
<th>cm</th>
<td>37</td>
<td>38</td>
<td>39</td>
<td>40</td>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
</table>
</div>
<br/>
</body>
</html>
Y ahora el CSS...
/*Ejercicio CU01051D curso css, estilos y herencia en tablas css. width, height, font-size, y overflow en tablas. Propiedad
border-collapse.*/
body{
font-family: arial,sans-rerif;
margin-top: 2em;
}
#tabla1{width: 600px;}
#tabla1, #tabla1 th, #tabla1 td{
border: 8px solid gray;
border-collapse: collapse;
text-align: center;
}
#tabla1 th, #tabla1 td{
width: 20%;
}
#tabla_2{width: 100%;}
#tabla_2, #tabla_2 th, #tabla_2 td{
border: 2px solid brown;
text-align: center;
}
#tabla_2 th, #tabla_2 td{
width: 20%;
}
#tabla_3{width: 500px;}
#tabla_3, #tabla_3 th, #tabla_3 td{
border-bottom: 6px solid blue;
border-collapse: collapse;
text-align: center;
}
#tabla_3 th, #tabla_3 td{
width:100px;
}
#tabla_3 caption{
border-bottom: 6px solid blue;
}
-
Hola Pandemia,
no está bien resuelto el ejercicio. Me costó encontrar un poco el por qué no hacia lo que se pedía, pero te comento.
En la tabla1 y tabla3 los border tienen que ser collapse, cosa que no sale. El id que aplicas a cada div se lo tienes que aplicar directamente a table y una vez que lo pongas ya verás lo que sucede.
Además recuerda que las etiquetas <caption> son los 'títulos' de las tablas y no se encuentran dentro de las tablas.
Saludos!!!
-
Buenos días amigo bermartinv, decirte que ya decía yo que algo no salia bien pero bueno, como siempre agradecerte que me eches una mano.
También decirte que si te fijas bien en el html la etiqueta <caption> sí que está debajo de la de <table> en todas las tablas; y en el CSS, si te fijas en la tabla 1 y 3 tengo las etiquetas de border-collapse: collapse, lo que si que me faltaba y es donde tu has dado en el clavo y a mi no se me ocurrió es en el id de los div aplicarlo en las etiquetas <table> directamente y ahora, "creo" que sí funciona todo bien y esta todo como lo pide el ejercicio.
De todas maneras como siempre gracias por tu tiempo y enseñarme esas cosillas que se me pasan como principiante que soy, siempre me enseñas algo nuevo.
Saludos y ahí van los códigos nuevos...
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="portal web aprenderprogramar.com">
<meta name="keywords" content="estilos y herncia en tablas css">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos28.css">
</head>
<body>
<div id="tabla1">
<table id="tabla1">
<caption>Medidas y equivalencias</caption>
<thead>
<tr>
<th>Cantidad de producto</th>
<th>Cuchara</th>
<th>Cucharilla</th>
<th>Taza grande</th>
<th>Taza de café</th>
</tr>
</thead>
<tr>
<td>Agua</td>
<td>17 grs</td>
<td>5 grs</td>
<td>150 grs</td>
<td>90 grs</td>
</tr>
<tr>
<td>Azucar</td>
<td>18 grs</td>
<td>7 grs</td>
<td>120</td>
<td>70 grs</td>
</tr>
<tr>
<td>Vino</td>
<td>17 grs</td>
<td>5 grs</td>
<td>150 grs</td>
<td>90 grs</td>
</tr>
<tr>
<td>sal</td>
<td>18 grs</td>
<td>7 grs</td>
<td>----</td>
<td>----</td>
</tr>
<tr>
<td>Leche</td>
<td>17 grs</td>
<td>5 grs</td>
<td>150 grs</td>
<td>90 grs</td>
</tr>
<tr>
<td>Arroz</td>
<td>17 grs</td>
<td>6 grs</td>
<td>100 grs</td>
<td>65 grs</td>
</tr>
<tr>
<td>Cacao</td>
<td>12 grs</td>
<td>4 grs</td>
<td>----</td>
<td>----</td>
</tr>
</table>
</div>
<br/>
<div id="tabla_2">
<table id="tabla_2">
<caption>Temperaturas del horno</caption>
<thead>
<tr>
<th>Marca en el horno</th>
<th>Grados celsius</th>
<th>Grados farenheit</th>
<th>Descripción</th>
<th>Apto para cocinar</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>110º a 140º</td>
<td>225º a 275º</td>
<td>Muy bajo/muy suave/minimo suave</td>
<td>Merengues/guisos/platos co huevo</td>
</tr>
<tr>
<td>2</td>
<td>150º</td>
<td>300º</td>
<td>Suave</td>
<td>Platos de cocción larga/braseados</td>
</tr>
<tr>
<td>3</td>
<td>170º</td>
<td>325º</td>
<td>Moderado/bajo</td>
<td>Bizcochuelos/flanes</td>
</tr>
<tr>
<td>4</td>
<td>180º</td>
<td>350º</td>
<td>Moderado</td>
<td>Galletas/lasagna</td>
</tr>
<tr>
<td>5-6</td>
<td>190º</td>
<td>375º</td>
<td>Moderado alto</td>
<td>Pasteles/tartas/empanadas</td>
</tr>
<tr>
<td>7</td>
<td>200º a 220º</td>
<td>400º a 425º</td>
<td>Alto/fuerte</td>
<td>Hojaldres</td>
</tr>
<tr>
<td>8</td>
<td>230º a 240º</td>
<td>450 a 475º500º</td>
<td>Fuerte</td>
<td>Asados/pan/pizza</td>
</tr>
</table>
</div>
<br/>
<div id="tabla_3">
<table id="tabla_3">
<caption>Tallas de caballero</caption>
<thead>
<tr>
<th>Tallas de caballero</th>
</tr>
<tr>
<th>Talla</th>
<th>cm</th>
<th>44</th>
<th>46</th>
<th>48</th>
<th>50</th>
<th>52</th>
<th>54</th>
<th>56</th>
</tr>
</thead>
<tr>
<th>Estatura</th>
<th>cm</th>
<td>168</td>
<td>171</td>
<td>174</td>
<td>177</td>
<td>180</td>
<td>182</td>
<td>184</td>
</tr>
<tr>
<th>Contorno pecho</th>
<th>cm</th>
<td>88</td>
<td>92</td>
<td>96</td>
<td>100</td>
<td>104</td>
<td>108</td>
<td>112</td>
</tr>
<tr>
<th>Contorno cintura</th>
<th>cm</th>
<td>78</td>
<td>82</td>
<td>86</td>
<td>90</td>
<td>94</td>
<td>98</td>
<td>104</td>
</tr>
<tr>
<th>Contorno cadera</th>
<th>cm</th>
<td>90</td>
<td>94</td>
<td>98</td>
<td>102</td>
<td>106</td>
<td>110</td>
<td>115</td>
</tr>
<tr>
<th>Largo espalda</th>
<th>cm</th>
<td>42</td>
<td>43</td>
<td>43,5</td>
<td>44,5</td>
<td>45</td>
<td>45,5</td>
<td>46</td>
</tr>
<tr>
<th>Largo brazo</th>
<th>cm</th>
<td>61</td>
<td>62</td>
<td>63</td>
<td>64</td>
<td>65</td>
<td>66</td>
<td>67</td>
</tr>
<tr>
<th>Contorno cuello</th>
<th>cm</th>
<td>37</td>
<td>38</td>
<td>39</td>
<td>40</td>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
</table>
</div>
<br/>
</body>
</html>
Y ahora el CSS....
/*Ejercicio CU01051D curso css, estilos y herencia en tablas css. width, height, font-size, y overflow en tablas. Propiedad
border-collapse.*/
body{
font-family: arial,sans-rerif;
margin-top: 2em;
}
#tabla1{width: 600px;}
#tabla1, #tabla1 th, #tabla1 td{
border: 8px solid gray;
border-collapse: collapse;
text-align: center;
}
#tabla1 th, #tabla1 td{
width: 20%;
}
#tabla_2{width: 100%;}
#tabla_2, #tabla_2 th, #tabla_2 td{
border: 2px solid brown;
text-align: center;
}
#tabla_2 th, #tabla_2 td{
width: 20%;
}
#tabla_3{width: 500px;}
#tabla_3, #tabla_3 th, #tabla_3 td{
border-bottom: 6px solid blue;
border-collapse: collapse;
text-align: center;
}
#tabla_3 th, #tabla_3 td{
width:100px;
}
#tabla_3 caption{
border-bottom: 6px solid blue;
}
-
Hola Pandemia,
deberías quitar el id de cada etiqueta div. Y recuerda el nombre de un atributo id debe ser único, no puede aparecer en varios sitios.
-
Menudo patán, al final o se me olvidó o pensaba que los había quitado, bueno la cuestión es que ya esta resuelto he quitado los div, que pensaba que había quitado; gracias por el apunte, te dejo los códigos nuevos.
Saludos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="portal web aprenderprogramar.com">
<meta name="keywords" content="estilos y herncia en tablas css">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos28.css">
</head>
<body>
<table id="tabla1">
<caption>Medidas y equivalencias</caption>
<thead>
<tr>
<th>Cantidad de producto</th>
<th>Cuchara</th>
<th>Cucharilla</th>
<th>Taza grande</th>
<th>Taza de café</th>
</tr>
</thead>
<tr>
<td>Agua</td>
<td>17 grs</td>
<td>5 grs</td>
<td>150 grs</td>
<td>90 grs</td>
</tr>
<tr>
<td>Azucar</td>
<td>18 grs</td>
<td>7 grs</td>
<td>120</td>
<td>70 grs</td>
</tr>
<tr>
<td>Vino</td>
<td>17 grs</td>
<td>5 grs</td>
<td>150 grs</td>
<td>90 grs</td>
</tr>
<tr>
<td>sal</td>
<td>18 grs</td>
<td>7 grs</td>
<td>----</td>
<td>----</td>
</tr>
<tr>
<td>Leche</td>
<td>17 grs</td>
<td>5 grs</td>
<td>150 grs</td>
<td>90 grs</td>
</tr>
<tr>
<td>Arroz</td>
<td>17 grs</td>
<td>6 grs</td>
<td>100 grs</td>
<td>65 grs</td>
</tr>
<tr>
<td>Cacao</td>
<td>12 grs</td>
<td>4 grs</td>
<td>----</td>
<td>----</td>
</tr>
</table>
<br/>
<table id="tabla_2">
<caption>Temperaturas del horno</caption>
<thead>
<tr>
<th>Marca en el horno</th>
<th>Grados celsius</th>
<th>Grados farenheit</th>
<th>Descripción</th>
<th>Apto para cocinar</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>110º a 140º</td>
<td>225º a 275º</td>
<td>Muy bajo/muy suave/minimo suave</td>
<td>Merengues/guisos/platos co huevo</td>
</tr>
<tr>
<td>2</td>
<td>150º</td>
<td>300º</td>
<td>Suave</td>
<td>Platos de cocción larga/braseados</td>
</tr>
<tr>
<td>3</td>
<td>170º</td>
<td>325º</td>
<td>Moderado/bajo</td>
<td>Bizcochuelos/flanes</td>
</tr>
<tr>
<td>4</td>
<td>180º</td>
<td>350º</td>
<td>Moderado</td>
<td>Galletas/lasagna</td>
</tr>
<tr>
<td>5-6</td>
<td>190º</td>
<td>375º</td>
<td>Moderado alto</td>
<td>Pasteles/tartas/empanadas</td>
</tr>
<tr>
<td>7</td>
<td>200º a 220º</td>
<td>400º a 425º</td>
<td>Alto/fuerte</td>
<td>Hojaldres</td>
</tr>
<tr>
<td>8</td>
<td>230º a 240º</td>
<td>450 a 475º500º</td>
<td>Fuerte</td>
<td>Asados/pan/pizza</td>
</tr>
</table>
<br/>
<table id="tabla_3">
<caption>Tallas de caballero</caption>
<thead>
<tr>
<th>Tallas de caballero</th>
</tr>
<tr>
<th>Talla</th>
<th>cm</th>
<th>44</th>
<th>46</th>
<th>48</th>
<th>50</th>
<th>52</th>
<th>54</th>
<th>56</th>
</tr>
</thead>
<tr>
<th>Estatura</th>
<th>cm</th>
<td>168</td>
<td>171</td>
<td>174</td>
<td>177</td>
<td>180</td>
<td>182</td>
<td>184</td>
</tr>
<tr>
<th>Contorno pecho</th>
<th>cm</th>
<td>88</td>
<td>92</td>
<td>96</td>
<td>100</td>
<td>104</td>
<td>108</td>
<td>112</td>
</tr>
<tr>
<th>Contorno cintura</th>
<th>cm</th>
<td>78</td>
<td>82</td>
<td>86</td>
<td>90</td>
<td>94</td>
<td>98</td>
<td>104</td>
</tr>
<tr>
<th>Contorno cadera</th>
<th>cm</th>
<td>90</td>
<td>94</td>
<td>98</td>
<td>102</td>
<td>106</td>
<td>110</td>
<td>115</td>
</tr>
<tr>
<th>Largo espalda</th>
<th>cm</th>
<td>42</td>
<td>43</td>
<td>43,5</td>
<td>44,5</td>
<td>45</td>
<td>45,5</td>
<td>46</td>
</tr>
<tr>
<th>Largo brazo</th>
<th>cm</th>
<td>61</td>
<td>62</td>
<td>63</td>
<td>64</td>
<td>65</td>
<td>66</td>
<td>67</td>
</tr>
<tr>
<th>Contorno cuello</th>
<th>cm</th>
<td>37</td>
<td>38</td>
<td>39</td>
<td>40</td>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
</table>
<br/>
</body>
</html>
Y ahora el CSS...
/*Ejercicio CU01051D curso css, estilos y herencia en tablas css. width, height, font-size, y overflow en tablas. Propiedad
border-collapse.*/
body{
font-family: arial,sans-rerif;
margin-top: 2em;
}
#tabla1{width: 600px;}
#tabla1, #tabla1 th, #tabla1 td{
border: 8px solid gray;
border-collapse: collapse;
text-align: center;
}
#tabla1 th, #tabla1 td{
width: 20%;
}
#tabla_2{width: 100%;}
#tabla_2, #tabla_2 th, #tabla_2 td{
border: 2px solid brown;
text-align: center;
}
#tabla_2 th, #tabla_2 td{
width: 20%;
}
#tabla_3{width: 500px;}
#tabla_3, #tabla_3 th, #tabla_3 td{
border-bottom: 6px solid blue;
border-collapse: collapse;
text-align: center;
}
#tabla_3 th, #tabla_3 td{
width:100px;
}
#tabla_3 caption{
border-bottom: 6px solid blue;
}