El documento describe los tipos de listas y tablas en HTML. Explica las etiquetas básicas para crear tablas como <table>, <tr>, y <td> y los atributos como bgcolor, border, y cellpadding. También cubre las listas ordenadas y desordenadas usando las etiquetas <ul> y <ol> junto con <li>, y cómo añadir estilos como círculos y cuadrados.

1. 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:
2013
SIGUIENTE

2.  Antes de nada, 3 cosas para tener claras en
las tablas HTML:
• La etiqueta de inicio <table> y la etiqueta de
cierre </table> inician y finalizan la tabla.
Lógico:
• * <tr> es la abreviatura de "table row" (es
decir, fila de la tabla) e inicia y finaliza las filas
horizontales. Lógico también.
• * <td> es la abreviatura de "table data" (es
decir, datos de la tabla). Esta etiqueta inicia y
finaliza cada una de las celdas que
componen las filas de la tabla. Todo sencillo y
lógico.
Universidad Estatal de Bolívar
Caedis Las Naves
EJEMPLO

3. 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

4.  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

5.  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

6. * 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

7. 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

8. 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

9. o circle
 square
• Disc
Estos 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á

10. Como la otra lista, cada elemento se pone
con <li>:
<p>Reglas</p>
<ol>
<li>No fumar
<li>No gritar
<li>Tener paciencia
</ol>