Autor Tema: HTML Estilos y herencia en tablas con CSS Código de ejemplo ejercicio CU01051D (Leído 2219 veces)

hymsoft · « **en:** 01 de Octubre 2016, 22:13 »

Buenas buenas!!!!
Después de un tiempo sin aparecer, por aquí estoy dejando mi código para el ejercicio de las tablas CU01051D del curso básico de programador web con CSS.

Saludos!!!!

CU01051D.html

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta name="author" content="Hugo A. Segura" />
    <meta name="description" content="Tablas y CSS" />
    <meta name="keywords" content="curso, aprender a programar, html, css,(CU01051D)" />    
    <meta charset="utf-8" />
    <meta name="robots" content="index, follow" />
    <title>Ejemplos de tablas y css</title>
    <link rel="stylesheet" type="text/css" href="CU01051D.css"/>
  </head>
  <body>
    <table id="tabla1">
      <caption>Tabla de prueba 01</caption>
      <tr>
        <th>Encabezado 1</th>
        <th>Encabezado 2</th>
        <th>Encabezado 3</th>
        <th>Encabezado 4</th>
        <th>Encabezado 5</th>
      </tr>
      <tr>
        <td>Dato 1_1</td>
        <td>Dato 2_2</td>
        <td>Dato 3_3</td>
        <td>Dato 4_4</td>
        <td>Dato 5_5</td>
      </tr>
      <tr>
        <td>Dato 1_1</td>
        <td>Dato 2_2</td>
        <td>Dato 3_3</td>
        <td>Dato 4_4</td>
        <td>Dato 5_5</td>
      </tr>
      <tr>
        <td>Dato 1_1</td>
        <td>Dato 2_2</td>
        <td>Dato 3_3</td>
        <td>Dato 4_4</td>
        <td>Dato 5_5</td>
      </tr>
      <tr>
        <td>Dato 1_1</td>
        <td>Dato 2_2</td>
        <td>Dato 3_3</td>
        <td>Dato 4_4</td>
        <td>Dato 5_5</td>
      </tr>
      <tr>
        <td>Dato 1_1</td>
        <td>Dato 2_2</td>
        <td>Dato 3_3</td>
        <td>Dato 4_4</td>
        <td>Dato 5_5</td>
      </tr>
      <tr>
        <td>Dato 1_1</td>
        <td>Dato 2_2</td>
        <td>Dato 3_3</td>
        <td>Dato 4_4</td>
        <td>Dato 5_5</td>
      </tr>        
    </table>
    <table id="tabla2">
      <caption>Tabla de prueba 02</caption>
      <tr>
        <th>Encabezado 1</th>
        <th>Encabezado 2</th>
        <th>Encabezado 3</th>
        <th>Encabezado 4</th>
        <th>Encabezado 5</th>
      </tr>
      <tr>
        <td>Dato 1_1</td>
        <td>Dato 2_2</td>
        <td>Dato 3_3</td>
        <td>Dato 4_4</td>
        <td>Dato 5_5</td>
      </tr>
      <tr>
        <td>Dato 1_1</td>
        <td>Dato 2_2</td>
        <td>Dato 3_3</td>
        <td>Dato 4_4</td>
        <td>Dato 5_5</td>
      </tr>
      <tr>
        <td>Dato 1_1</td>
        <td>Dato 2_2</td>
        <td>Dato 3_3</td>
        <td>Dato 4_4</td>
        <td>Dato 5_5</td>
      </tr>
      <tr>
        <td>Dato 1_1</td>
        <td>Dato 2_2</td>
        <td>Dato 3_3</td>
        <td>Dato 4_4</td>
        <td>Dato 5_5</td>
      </tr>
      <tr>
        <td>Dato 1_1</td>
        <td>Dato 2_2</td>
        <td>Dato 3_3</td>
        <td>Dato 4_4</td>
        <td>Dato 5_5</td>
      </tr>
      <tr>
        <td>Dato 1_1</td>
        <td>Dato 2_2</td>
        <td>Dato 3_3</td>
        <td>Dato 4_4</td>
        <td>Dato 5_5</td>
      </tr>        
    </table>
    <table id="tabla3">
      <caption>Tabla de prueba 03</caption>
      <tr>
        <th>Encabezado 1</th>
        <th>Encabezado 2</th>
        <th>Encabezado 3</th>
        <th>Encabezado 4</th>
        <th>Encabezado 5</th>
      </tr>
      <tr>
        <td>Dato 1_1</td>
        <td>Dato 2_2</td>
        <td>Dato 3_3</td>
        <td>Dato 4_4</td>
        <td>Dato 5_5</td>
      </tr>
      <tr>
        <td>Dato 1_1</td>
        <td>Dato 2_2</td>
        <td>Dato 3_3</td>
        <td>Dato 4_4</td>
        <td>Dato 5_5</td>
      </tr>
      <tr>
        <td>Dato 1_1</td>
        <td>Dato 2_2</td>
        <td>Dato 3_3</td>
        <td>Dato 4_4</td>
        <td>Dato 5_5</td>
      </tr>
      <tr>
        <td>Dato 1_1</td>
        <td>Dato 2_2</td>
        <td>Dato 3_3</td>
        <td>Dato 4_4</td>
        <td>Dato 5_5</td>
      </tr>
      <tr>
        <td>Dato 1_1</td>
        <td>Dato 2_2</td>
        <td>Dato 3_3</td>
        <td>Dato 4_4</td>
        <td>Dato 5_5</td>
      </tr>
      <tr>
        <td>Dato 1_1</td>
        <td>Dato 2_2</td>
        <td>Dato 3_3</td>
        <td>Dato 4_4</td>
        <td>Dato 5_5</td>
      </tr>        
    </table>
  </body>
</html>

CU01051D.css

Código: [Seleccionar]

/* Estilos para muestras de tablas y css */

*{font-size: 62.5%/1.2;}

body{
  font-family: Arial, Helvetica, sans-serif;
}

table{
  margin-bottom: 2em; /* dejo un espaciado entre talba y tabla */
}


/* Tabla 1 */

table#tabla1{
  width: 600px;
}

table#tabla1 th, table#tabla1 td{
  width: 20%;
}

table#tabla1, table#tabla1 th, table#tabla1 td{
border: solid .8em gray;
border-collapse: collapse;
}

/* Tabla 2 */
table#tabla2{
  width: 100%;
}

table#tabla2 th, table#tabla1 td{
  width: 20%;
}
  
table#tabla2 ,table#tabla2 th, table#tabla2 td{
  border: solid .2em brown;
}

/* Tabla 3 */
table#tabla3{
  width: 500px;
}

table#tabla3 th,table#tabla1 td{
  width: 100px;
}
  
table#tabla3 ,table#tabla3 th, table#tabla3 td{
  border-bottom: solid .6em blue;
  border-collapse: collapse;
}

Chompy129 · « **Respuesta #1 en:** 02 de Octubre 2016, 06:28 »

Hola hymsoft, hacia tiempo que no te veia.

En tu ejercicio como que confundiste colocar em en los bordes en vez usar px como se decía en el ejercicio.
También que en alguna linea de código seleccionaste por error #tabla1 al asignar el ancho para td.

Sin embargo, todo lo demás en el ejercicio esta bien hecho.

Saludos!

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: