Autor Tema: HTML Estilos y herencia CSS en tablas aplicarles formato personalizado CU01051D  (Leído 1385 veces)

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Buenas tardes! Les adjunto mi ejercicio CU01051D del tutorial de desarrollo web con programación en CSS y como siempre aguardo sus mejoras / correcciones.

HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<html>

<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="CSSEjerciciofinale51.css">
</head>

<body>

    <table id="primera">
        <caption> Tabla numero 1 </caption>
      <tr>
        <th> Columnas </th> 
        <th> Columnas </th> 
        <th> Columnas </th> 
        <th> Columnas </th>
        <th> Columnas </th> 
      </tr>
   
      <tr>
        <td> DATO </td> 
        <td> DATO </td> 
        <td> DATO </td>
        <td> DATO </td> 
        <td> DATO </td>
      </tr>
       
       <tr>
        <td> DATO </td> 
        <td> DATO </td> 
        <td> DATO </td>
        <td> DATO </td> 
        <td> DATO </td>
       </tr>
       
       <tr>
        <td> DATO </td> 
        <td> DATO </td> 
        <td> DATO </td>
        <td> DATO </td> 
        <td> DATO </td>
       </tr>
 
       <tr>
        <td> DATO </td> 
        <td> DATO </td> 
        <td> DATO </td>
        <td> DATO </td> 
        <td> DATO </td>
       </tr>
 
        <tr>
         <td> DATO </td> 
         <td> DATO </td> 
         <td> DATO </td>
         <td> DATO </td> 
         <td> DATO </td>
       </tr>
 
        <tr>
         <td> DATO </td> 
         <td> DATO </td> 
         <td> DATO </td>
         <td> DATO </td> 
         <td> DATO </td>
       </tr>
       
       <tr>
         <td> DATO </td> 
         <td> DATO </td> 
         <td> DATO </td>
         <td> DATO </td> 
         <td> DATO </td>
       </tr>
 
     </table>
    </br>
   
   <table id="segunda">
        <caption> Tabla numero 2 </caption>
      <tr>
        <th> Columna 1 </th> 
        <th> Columna 2 </th> 
        <th> Columan 3 </th> 
        <th> Columna 4 </th>
        <th> Columna 5 </th> 
      </tr>
   
       <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
       
       <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
       
        <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
          <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
          <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
        <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
       
       <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
     </table>

    </br>
       <table id="tercera">
        <caption> Tabla numero 3 </caption>
      <tr>
        <th> Columna 1 </th> 
        <th> Columna 2 </th> 
        <th> Columan 3 </th> 
        <th> Columna 4 </th>
        <th> Columna 5 </th> 
      </tr>
   
       <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
       
       <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
       
        <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
          <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
          <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
        <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
       
       <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
     </table>
</br>

</body>

</html>


CSS

Código: [Seleccionar]

#primera    {width:600px;border-collapse:collapse;}
#primera th {width:20%;} /*columna*/
#primera td, #primera th {border:8px solid gray;} /*no funciona con #primera td,th ...lo mismo en los de abajo*/

#segunda {width:100%;}
#segunda th {width:20%;}
#segunda td, #segunda th {border:2px double brown;}

#tercera {width:500px; border-collapse: collapse;}
#tercera th {width:100px;}
#tercera td {border-bottom:6px solid blue;}


« Última modificación: 18 de Junio 2017, 11:55 por Alex Rodríguez »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Ejercicio Final - Estilos y herencia CSS en tablas - (CU01051D)
« Respuesta #1 en: 26 de Abril 2017, 19:29 »
Buenas alefaletti.

Bien resuelto.

Saludos.  ;D

 

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".