top of page

Grado: 10°

Tema:  HTML
 
Competencia:  Diseña páginas web con código Html  insertando tablas.
 
Material de Estudio:

T a b l a s

Las tablas presentan la información de manera más organizada y visualmente más fácil de analizar. Resultan de mayor utilidad dado que mejoran notablemente la apariencia de la página web.

  • <Table> </Table>:

Indican que se va a insertar una tabla; tanto las filas como las columnas que se vayan a usar deben estar dentro de estas etiquetas.

Los atributos que utilizaremos para esta etiqueta son:

   Border: Indica el grosor de la  línea que bordea toda la tabla delimitadoras entre celda y celda. 

 

Ejemplo:

   <Table Border = 6>

   Bordercolor: Indica el color del borde de la tabla. 

   Ejemplo:

   <Table Bordercolor = "#3ad4f6">

  • <Th></Th>:

Se encarga de definir una celda como la cabecera de una columna en una tabla, y por cada columna se debe usar un TH.

  • <Tr></Tr>:

Hace referencia a las filas de la tabla.

  • <Td></Td>:

Hace referencia a las columnas o celdas que contendrán una fila, por tanto estas etiquetas deben estar dentro de los “<tr> </tr>”, y por cada columna se debe usar un “<td></td>”.

Ejemplo:


<table border=1>
 
<tr>
  <th>Nombre</th>
  <th>Taller</th>
  <th>Evaluación</th>
 
</tr>


 <tr>
  <td>Yuyeimis</td>
  <td>4.8</td>
  <td>5.0</td>
 
</tr>


 <tr>
  <td>Suso</td>
  <td>2.3</td>
  <td>3.7</td>
 
</tr>
</table>

CENTRAR INFORMACIÓN

PARA CENTRAR UN TEXTO, UNA IMAGEN O UNA TABLA UTILIZAR LA ETIQUETA <CENTER>. LA ETIQUETA DEBE IR ANTES DE LAS ETIQUETAS DE <font><Img> y <Table>; y la debes cerrar después de las etiquetas que cierran las anteriores.

 

Ejemplo para centrar una imagen:

<Center><Img Src= "La humildad.Jpeg"></Center>

Ejemplo para centrar un texto:

<Center><Font Face="Chiller" Size="3"> EL RESPETO </Font></Center>

Resultado del código

Captura.PNG

consultar :

Cómo cambiar formato al texto de cada celda en una tabla.

Practica N°1:

  1.  Diseñar las siguientes 2 páginas. Crear hipervínculo a las dos páginas de manera que  de una pagina se llegue a la otra  y viceversa.

          NO ENVÍAN NADA. ES PARA  PRACTICAR .

Captura1.PNG
Captura2.PNG
Captura2-1.PNG

Practica N°2:

  1.  Diseñar las siguientes 2 páginas. EN la siguiente imagen, el último texto, Tipos de Personalidades, es un hipervínculo que lleva a la página que se encuentra debajo de esta.

          NO ENVÍAN NADA. ES PARA  PRACTICAR .

Captura1.PNG
Captura1-1.PNG

Con el texto REGRESAR A LOS SENTIMIENTOS, se debe devolver a la página anterior (LOS SENTIMIENTOS)
NO ENVÍAN NADA. ES PARA  PRACTICAR .

Captura2.PNG
bottom of page