html como crear tablas y tipos de listas
TRANSCRIPT
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
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
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
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
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
* 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
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
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
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á
Como la otra lista, cada elemento se pone con <li>:
<p>Reglas</p><ol><li>No fumar<li>No gritar<li>Tener paciencia</ol>
