HTML parte 2 - Viñetas y Tablas

En esta segunda parte exploraremos lo que es el uso de las etiquetas para tablas y viñetas en html

Viñetas y Listas

Las listas son usadas para citar, numerar y definir objetos. En html existen 3 tipos de listas:

Listas desordenadas:

Se caracteriza por el uso de la etiqueta "<ul>" en ingles unorden list que traducido al español es lista desordenada (esto les ayudara a identificar una de la otra), ademas que cada uno de los elementos que deseemos ingresar en la lista deberá de poseer una etiqueta <li> que no necesita cierre

Ejemplo:

esto es una muestra de lista desordenada en html:

<ul>

         <li> Casa

         <li> Caballo

</ul>

que en el navegador se vería algo así:

• Casa
• Caballo

Se puede cambiar el tipo de viñeta por medio del atributo Type dentro de la etiqueta <ul> y los tipos pueden ser circle, disc, square


siguiendo el mismo ejemplo


disc

<ul type="disc">

         <li> Casa

         <li> Caballo

</ul>

seria:

• Casa
• Caballo

square

<ul type="square">

         <li> Casa

         <li> Caballo

</ul>

seria:

• Casa
• Caballo

circle

<ul type="circle">

         <li> Casa

         <li> Caballo

</ul>

seria:

• Casa
• Caballo

Listas Ordenadas:

Se caracteriza por el uso de la etiqueta "<ol>" en ingles orden list que traducido al español es lista ordenada (nuevamente esto les ayudara a identificar una de la otra), ademas que cada uno de los elementos que deseemos ingresar en la lista deberá de poseer una etiqueta <li> que no necesita cierre

Ejemplo:


<ol>
      <li>Venezuela
      <li>Colombia
      <li>EEUU
</ol>


se mostraría como:

1. Venezuela
2. Colombia
3. EEUU

ademas también se puede modificar el estilo de la lista a números romanos(I,II,III), a números romanos en minúscula(i,ii,iii) y a letras tanto en minúscula como en mayúscula(a,A,b,B), eso se logra añadiendo el atributo type="" a la etiqueta <ol>

Romanos (I)

<ol type="I">
      <li>Venezuela
      <li>Colombia
      <li>EEUU
</ol>


se mostraría como:

1. Venezuela
2. Colombia
3. EEUU

Romanos (i)

<ol type="i">
      <li>Venezuela
      <li>Colombia
      <li>EEUU
</ol>


se mostraría como:

1. Venezuela
2. Colombia
3. EEUU

Letras(a)

<ol type="a">
      <li>Venezuela
      <li>Colombia
      <li>EEUU
</ol>


se mostraría como:

1. Venezuela
2. Colombia
3. EEUU

Letras(A)

<ol type="A">
      <li>Venezuela
      <li>Colombia
      <li>EEUU
</ol>


se mostraría como:

1. Venezuela
2. Colombia
3. EEUU

Listas de Definición:

Se caracteriza por el uso de la etiqueta "<dl>" en ingles definition list que traducido al español es lista de definición (esto les ayudara a identificar una de la otra), ademas que cada uno de los elementos que deseemos ingresar en la lista deberá de poseer en este caso una de las siguientes etiquetas <dt> para el titulo de la definición y <dd> para la definición, ambas no necesitan cierre, para que la idea de esta lista se les haga mas clara esta es la lista que hallamos en los diccionarios


Ejemplo:


<dl>
       <dt>Perro
       <dd> Animal domestico de la familia de los caninos

       <dt>Gato
       <dd> Animal domestico de la famila de los felinos

</dl>


en el navegador se visualizaría como:

Perro

Animal domestico de la familia de los caninos

Gato

Animal domestico de la familia de los felinos

Listas Anidadas:

Para lograr mayor elegancia en la web, html nos permite anidar los tres tipos de listas, aqui hay un video de demostración donde se anidan las listas ordenadas <ol> y las listas desordenadas <ul>

Tablas

Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación en diferentes filas y columnas de modo que podamos resumir grandes cantidades de información de una manera que puede representarse rapida y facilmente

La etiqueta que permite crear tablas es <Table>....</Table> sin embargo este consta con un numero de etiquetas que serán descritas a continuación que permiten establecer la estructura de esta, dichas etiquetas son;


<tr>...</tr>: Abreviatura de Table row (Fila de la tabla) esta permite crear filas (Horizontal ----), se insertara igual al numero de filas que deseen que tenga la tabla


<th>...</th>: Abreviatura de table header (Cabecera o encabezado de la tabla) permite crear columnas verticales ( | ) en negritas los cuales harán referencia al titulo de la columna


<td>---<td>: Abreviatura de table data (datos de la tabla) igual que el <th> permite crear columnas verticales pero estas no aparecerán en negritas y hace referencia a la información de la columna


Ejemplo:


crearemos una tabla de 2*3 (2 filas 3 columnas) que guarde información sobre la cantidad de animales en una casa con su respectivo encabezado en la tabla


1) Abrimos la etiqueta table para crear la tabla (para este ejemplo agregare el atributo border el cual me permitira establecer el grosor del borde de la tabla)


<table border="1">


</table>


2) Ya que nos están pidiendo 2 filas procederemos a abrir y cerrar 2 veces la etiqueta fila de la tabla


<table border="1">
             <tr>
             
             </tr>
             <tr>
             
             </tr>          


</table>


3)Ya una vez teniendo las filas procederemos a crear las columnas basandonos en la fila que nos encontremos, primeramente los encabezados en la primera fila



<table border="1">
             <tr>
                    <th>Gatos</th>
                    <th>Perros</th>
                    <th>Aves</th>
             </tr>
             <tr>
             
             </tr>          


</table>



4) ya creado los encabezados procedemos a crear las columnas de datos para este ejemplo diremos que hay 4 gatos, 2 perros y 6 aves



<table border="1">
             <tr>
                    <th>Gatos</th>
                    <th>Perros</th>
                    <th>Aves</th>
             </tr>
             <tr>
                    <td>4</td>
                    <td>2</td>
                    <td>6</td>
             </tr>          


</table>


ya una vez terminado nuestra tabla se vera algo asi:

Gatos	Perros	Aves
4	2	6

Configuración del tamaño de la tabla

Para ajustar el ancho de la tabla se utiliza el atributo width y se establece un numero de pixeles del ancho de la tabla que se desea obtener

ejemplo

a la tabla hecha anteriormente le pondremos width="200"

<table border="1" width="200">

             <tr>

                    <th>Gatos</th>

                    <th>Perros</th>

                    <th>Aves</th>

             </tr>

             <tr>

                    <td>4</td>

                    <td>2</td>

                    <td>6</td>

             </tr>          

</table>

de esa forma la tabla tendria la siguiente forma:

Gatos	Perros	Aves
4	2	6

Tamaño y alineación de celdas

cada celda de la tabla bien sea en la cabecera o en los datos de las tablas también poseen atributos que permiten ajustar su tamaño o alinear el texto que se encuentra en su interior, dichos atributos son:

width: permite establecer el ancho de la celda

align: permite establecer hacia donde estará alineado el texto

ambos atributos se incresan dentro de la etiqueta <th> o <td>

ejemplo

<table border="1" width="200">

             <tr>

                    <th>Gatos</th>

                    <th>Perros</th>

                    <th>Aves</th>

             </tr>

             <tr>

                    <td align="left">4</td>

                    <td align="center">2</td>

                    <td align="right">6</td>

             </tr>          

</table>


En el navegador se mostrará de la siguiente manera:

Gatos	Perros	Aves
4	2	6

Combinar celdas

Para crear celdas combinas bien sea a través de filas o columnas, debemos de colocar en las etiquetas <td> o <th> los atributos

rowspan="num": En donde num representa el numero de filas que se desean abarcar

colspan="num": En donde num representa el numero de columnas que se desea abarcar 

Ejemplo:

Agrupando Columnas:

<table border="1" width="200">

             <tr>

                    <th colspan="3">Gatos</th>

             </tr>

             <tr>

                    <td>4</td>

                    <td>2</td>

                    <td>6</td>

             </tr>          

</table>


que pasaría a ser:

Gatos
4	2	6

Agrupando Filas:

<table border="1" width="200">

             <tr>

                    <th rowspan="2">Gatos</th>

                    <th>Perros</th>

                    <th>Aves</th>

             </tr>

             <tr>

                    <td align="center">2</td>

                    <td align="right">6</td>

             </tr>          

</table>

que pasaría a ser:

Gatos	Perros	Aves
	2	6

Trabajando con tablas

Aquí les dejo un vídeo donde se puede apreciar como se trabaja con las tablas en html