Foros aprenderaprogramar.com

Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: alefaletti en 13 de Abril 2017, 19:48

Título: HTML Estilos y herencia CSS en tablas aplicarles formato personalizado CU01051D
Publicado por: alefaletti en 13 de Abril 2017, 19:48
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;}
Título: Re:Ejercicio Final - Estilos y herencia CSS en tablas - (CU01051D)
Publicado por: pedro,, en 26 de Abril 2017, 19:29
Buenas alefaletti.

Bien resuelto.

Saludos.  ;D