Tablas y Listas

Tablas

Una Tabla en HTML es una manera muy eficiente de organizar datos por medio de cuadrantes, los tags que se utilizan para definir una tabla son <table> ,y dentro de estos tags se utilizan <tr> para definir un renglón, <th> para definir un encabezado y <td> para definir el contenido de la celda , a su vez cada tag también toma ciertos parámetros para definir la altura,alineación, color, entre otras cosas de cada cuadrante o "celda".

<table align="center" border="4">
<tr>   
<th> Producto </th> 
<th> Valor </th>
</tr>
<tr>
<td>Relojes</td>   
<td><font color="blue">$120.35 </font></td>   
</tr>
<tr>
<td bgcolor="yellow" height=100>PDA's</td>   
<td>$250.00</td>   
</tr>
</table>

Lo anterior generaría una tabla como la siguiente:

Varios parámetros pueden ser modificados para dar un efecto visual diferente : Si se desea que las celdas no aparezcan enmarcadas se debe modificar border=0 , agregando el parámetro cellspacing = x se incrementa el espacio entre celdas, la alineación de la tabla puede ser modificada de una manera similar asi como los colores de cada celda.

Listas

La creación de listas es otro elemento de HTML utilizado ampliamente, existen dos metodologías:

Listas sin Enumerar

Para definir este tipo de listas se utilizan los tags <li> y y <ul> . El elemento <li> genera un inciso ("bullet") para la información , mientras que <ul> desfasa el contenido hacia el interior del documento.

Esto aún no se desfasa 
<ul>  
<li> Este es el primer elemento sin enumerar
<li> Le sigue el segundo 
<li> Es mejor utilizar listas enumeradas
</ul>
El desfase terminó

Genera la siguiente lista:

Esto aún no se desfasa 

El desfase terminó

Listas Enumeradas

Para crear un lista enumerada se utilizan los tags <ol> y y <li> . El elemento <li> genera un inciso ("bullet") dependiendo del parámetro que sea especificado en <ol> , además <ol> también desfasa el contenido de la lista de acuerdo a su composición.

Esto aún no se desfasa 
<ol type="I">  
<li> Primer elemento romano 
<ol type="1">
<li> Mejor en la lista interna  
<li> Su segundo Valor  
</ol>  
<li> Seguimos con el segundo romano 
<ol type="a">
<li> Empezamos lista con letra para terminar 
</ol>
</ol>
Termina el desfase

Genera la siguiente lista: