HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
Click here to load reader
Transcript of HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
![Page 1: HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.](https://reader038.fdocuments.ec/reader038/viewer/2022100518/5597acc51a28ab2b548b46bf/html5/thumbnails/1.jpg)
Universidad Estatal de Bolívar
Caedis Las Naves
Tema:
Tipos de listas y tablas
Integrantes:
Jenny Andachi Chávez, Guicela
Ocampo Ortiz
Tutor:
Licd. Marcelo Baño
Ciclo:
7mo Informática Educativa
Año electivo:
2013SIGUIENTE
![Page 2: HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.](https://reader038.fdocuments.ec/reader038/viewer/2022100518/5597acc51a28ab2b548b46bf/html5/thumbnails/2.jpg)
Antes de nada, 3 cosas para tener claras enlas tablas HTML:
• La etiqueta de inicio <table> y la etiqueta decierre </table> inician y finalizan la tabla.Lógico:
• * <tr> es la abreviatura de "table row" (esdecir, fila de la tabla) e inicia y finaliza las filashorizontales. Lógico también.
• * <td> es la abreviatura de "table data" (esdecir, datos de la tabla). Esta etiqueta inicia yfinaliza cada una de las celdas quecomponen las filas de la tabla. Todo sencillo ylógico.
Universidad Estatal de Bolívar
Caedis Las Naves
EJEMPLO
![Page 3: HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.](https://reader038.fdocuments.ec/reader038/viewer/2022100518/5597acc51a28ab2b548b46bf/html5/thumbnails/3.jpg)
Código:<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<tr>
<td>Celda 3</td>
<td>Celda 4</td>
</table>
Universidad Estatal de Bolívar
Caedis Las Naves
ATRIBUTOS
![Page 4: HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.](https://reader038.fdocuments.ec/reader038/viewer/2022100518/5597acc51a28ab2b548b46bf/html5/thumbnails/4.jpg)
Y veremos algo así:
Ahora les explicare cada atributo del código para que puedan modificarlo a su
gusto...
bgcolor="blue": podemos reemplazar "blue" por otro color pero atención los colores
se reemplazan con los nombres pero en Ingles.
border="4":con esto podemos definir el grosor del borde reemplazándolo siempre
con un numero.
bordercolor="yellow": acá podremos modificar el color del borde según el nombre
en ingles del color que quieras.
cellpadding="2": indica el espacio entre el borde de la celda y el contenido de la
celda.
cellspacing="2":indica el espacio entre cada celda.
align="center": indica la alineación de la tabla si es center o right o left.
Universidad Estatal de Bolívar
Caedis Las Naves
EJEMPLO
![Page 5: HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.](https://reader038.fdocuments.ec/reader038/viewer/2022100518/5597acc51a28ab2b548b46bf/html5/thumbnails/5.jpg)
Código:
<table bgcolor="blue" border="4" bordercolor="yellow" cellpadding="2" cellspacing="2" align="center"><tr>
<td>Celda 1</td><td>Celda 2</td>
<tr><td>Celda 3</td><td>Celda 4</td>
</table>
Universidad Estatal de Bolívar
Caedis Las Naves
SIGUIENTE
![Page 6: HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.](https://reader038.fdocuments.ec/reader038/viewer/2022100518/5597acc51a28ab2b548b46bf/html5/thumbnails/6.jpg)
* FRAME=" void / above / below / hsides /lhs / rhs / vsides / box
/border ". Este atributo es complementario a BORDER y sólo
funciona con Internet Explorer, y posibilita, en una tabla con
bordes, especificar cual o cuales de los exteriores serán visibles.
Podemos especificar pues:
- void - no se ven los bordes.
- above - borde superior.
- below - borde inferior.
- hsides - bordes superior e inferior.>
- lhs - borde izquierdo.
- rhs - borde derecho.
- vsides - bordes laterales.
- box - todos los bordes.
- border - todos los bordes.
Universidad Estatal de Bolívar
Caedis Las Naves
Etiqueta <TABLE> y sus atributos.
EJEMPLO
![Page 7: HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.](https://reader038.fdocuments.ec/reader038/viewer/2022100518/5597acc51a28ab2b548b46bf/html5/thumbnails/7.jpg)
Universidad Estatal de Bolívar
Caedis Las Naves
<TABLE BORDER="1" CELLSPACING="0"
FRAME="above">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
<TABLE BORDER="1" CELLSPACING="0"
FRAME="vsides">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>SALIR
![Page 8: HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.](https://reader038.fdocuments.ec/reader038/viewer/2022100518/5597acc51a28ab2b548b46bf/html5/thumbnails/8.jpg)
Listas Desordenadas: Se usa la etiqueta <ul> (y la etiqueta de cierre). Ul proviene de las palabras en inglés unorder list (lista desordenadas). Cada elemento se pone con la etiqueta <li>, sin etiqueta de cierre. Ejemplo:
<p>Países distribuidores</p><ul><li>México<li>Estados Unidos<li>Canadá</ul></p>
Resultado:
Países distribuidores
México
Estados Unidos
Canadá
Tipos de listas
![Page 9: HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.](https://reader038.fdocuments.ec/reader038/viewer/2022100518/5597acc51a28ab2b548b46bf/html5/thumbnails/9.jpg)
o circle square
• DiscEstos se pueden poner con el atributo type, ya sea en la etiqueta <ul> o <li>:
<ul type="square"><li>México<li type="circle">Estados Unidos<li>Canadá</ul>
Resultado:
México
o Estados Unidos
• Canadá
![Page 10: HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.](https://reader038.fdocuments.ec/reader038/viewer/2022100518/5597acc51a28ab2b548b46bf/html5/thumbnails/10.jpg)
Como la otra lista, cada elemento se pone con <li>:
<p>Reglas</p><ol><li>No fumar<li>No gritar<li>Tener paciencia</ol>
![Page 11: HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.](https://reader038.fdocuments.ec/reader038/viewer/2022100518/5597acc51a28ab2b548b46bf/html5/thumbnails/11.jpg)