Autor Tema: Crear estilos CSS para tablas HTML anchura total, de celda, bordes, etc CU01051D  (Leído 3327 veces)

Boletos

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 57
    • Ver Perfil
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:

Código: [Seleccionar]
<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:

Código: [Seleccionar]
/*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.
« Última modificación: 03 de Marzo 2016, 08:08 por César Krall »

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Hola! Todo bien, a continuar

Saludos!
Responsable de departamento de producción aprenderaprogramar.com

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
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.

Boletos

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 57
    • Ver Perfil
Bermartinv justo hoy hice un ejercicio de esa forma.
Lo tendré en cuenta en adelante.
Un saludo!
Gracias!

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".