Unidad 6. Ejercicio: Formato de Tablas



En este ejercicio practicaremos con tablas. Para realizar este ejercicio debes haber realizado el ejercicio anterior de esta unidad, tendrás el archivo excel2.html o también puedes copiar el código que se muestra a continuación.

Ejercicio 2: Formato de Tablas

  1. Desde el editor Brackets abre el archivo excel2.html. Debes tener este código:
  2. <!doctype html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>Curso de Excel 2016</title>
    </head>
    <body>
      <ul>
      <li><a href="excel1.html">Atrás</a></li>
      <li><a href="index.html">Índice</a></li>
      <li><a href="excel3.html">Adelante</a></li>
      </ul>
      <h1>Unidad 2. Empezando a trabajar con Excel</h1>
      <p>Las teclas activas para poder desplazarse a través de la hoja son:</p>
      <table>
        <tr>
          <th>MOVIMIENTO</th>
          <th>TECLADO</th>
        </tr>
        <tr>
          <td> Celda Abajo </td>
          <td><kbd>FLECHA ABAJO </kbd></td>
        </tr>
        <tr>
          <td> Celda Arriba </td>
          <td><kbd>FLECHA ARRIBA</kbd></td>
        </tr>
        <tr>
          <td> Celda Derecha </td>
          <td><kbd>FLECHA DERECHA </kbd></td>
        </tr>
        <tr>
          <td> Celda Izquierda </td>
          <td><kbd>FLECHA IZQUIERDA </kbd></td>
        </tr>
        <tr>
          <td> Pantalla Abajo </td>
          <td><kbd>AVPAG</kbd></td>
        </tr>
      </table>
      <hr>
      <p><a href="http://www.aulaclic.es/index.htm" target="_blank"> &copy; aulaClic S.L.</a></p>
      </body>
      </html>

    Y se debe ver así;

    Ej. paso a paso 1 de la unidad 6

     

  3. Vamos a darle un borde a la tabla utilizando la hoja de estilo excel2.css, tenemos que crear un nuevo archivo pulsando en Archivo, Nuevo y escribir este código: table {border-style:solid}, pulsamos Archivo, Guardar y le damos el nombre excel2.css dentro de la carpeta ejercicios/curso-excel/css. Añadimos el enlace a esta hoja de estilo en el archivo excel2.htlm: <link rel="stylesheet" type="text/css" href="css/excel2.css" />

    El resultado será este:

    Ej. 6_2 tablas

  4. Ahora para añadir un borde a las celdas añadimos a la hoja de estilo el selector td: td {border-style:solid}

    Ej. 6_2 tablas a

  5. Para evitar el doble borde en las celdas añadimos al selector table la propiedad border-collapse:collapse: table {border-collapse: collapse}

    Ej. 6_2 tablas c

  6. A continuación para separar el contenido de la celda del borde, al selector td le damos un padding: 5px, y para dar color de fondo beige a las celdas background-color: beige, es decir, con esta hoja de estilo:
    table { border-style:solid;
    border-collapse: collapse;
    }
    td { border-style:solid;
    padding: 5px;
    background-color: beige}

    obtendremos este resultado:

    Ej. 6_2 tablas d

  7. Para acabar vamos a dar formato a la fila de cabecera th, color bisque, padding 5 px y borde solid: th { border-style:solid; padding: 5px; background-color: bisque}
    Obtendremos este resultado:
    Ej. 6_2 tablas e

    También puedes ver el resultado en este enlace: excel2_2.html

  8. Pulsa en el menú Archivo y elige Guardar con el mismo nombre el archivo html excel2.html y la hoja de estilo excel2.css. Visualiza la página web desde el editor Brackets con el botón .
  9. Si no dispones de un editor de texto (por ejemplo, si estás viendo este curso desde un dispositivo móvil) puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.

 


Enero-2019 (V 2.0)
Volver






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.