Llenguatge html/Llistes i taules

Llistes i taules

del llibre Llenguatge html

Les llistes i les taules, són uns elements de vital importància als documents html, aquí t'explicarem com crear-les i editar-les.

Llistes

Hi ha dos tipus de llistes, les llistes ordenades i les llistes desordenades.

Llistes desordenades

Per començar una llista desordenada utilitzarem l'element UL amb l'etiqueta <UL> per començar i </UL> per acabar la llista. Es pot personalitzar la llista amb diversos atributs, com ara:

Type: Amb aquest atribut podem triar si els elements de la llista han de tenir un punt (circle), quadre (square) o disc introduint-los. Per tant quedarà TYPE = circle, TYPE = disc o TYPE = square, depenent del que vulguem.

Plain: Elimina els marcadors (punts, quadres o discos)

SRC: Amb això podem utilitzar una imatge com a marcador. Quedaria així: SRC = <imatge>.

WRAP: Ens permet triar si s'han de disposar els elements vertical o horitzontalment. WRAP = horiz, WRAP = vert.

Style: Permet designar estils a la taula.

Un altre element es l'etiqueta és LH que funciona amb les etiquetes <LH> i </LH>; són per delimitar el títol.

Molt bé, però com posem elements a la llista? Molt fàcil, amb l'element LI, que té dues etiquestes: <LI> per obrir i </LI> per tancar. L'element LI també té els atributs Type i Style que hem vist per l'atribut UL.

Amb tot el que hem vist quedaria quelcom similar a això:

<UL>

 <LH>Títol de la llista</LH>

 <LI type="square">Aquest és un element introduït per un cercle</LI>

 <LI>Aquest és un altre element. No s'especifica per quin símbol ha d'anar introduït.</LI>

 <LI>Un tercer element...</LI>

</UL>

Quedaria així:

Aquest és un element introduït per un cercle
Aquest és un altre element. No s'especifica per quin símbol ha d'anar introduït.
Un tercer element...

També es poden crear subllistes:

<UL>
 <LI>Primer element</LI> 
 <LI>Segon element</LI> 
 <LI>Terçer element</LI> 
   <UL> 
     <LI>Primer subelement</LI> 
     <LI>Segon subelement</LI> 
   </UL> 
 <LI>Quart element</LI> 
 <LI>Cinquè element</LI> 
</UL>

Quedaria així:

Primer element
Segon element
Terçer element

Primer subelement
Segon subelement

Quart element
Cinquè element

Llistes ordenades

Utilitzant l'atribut OL per començar i acabar la llista crearem una llista ordenada. Es fa amb les etiquetes <OL> i </OL>.

Les llistes ordenades poden tenir els següents elements:

Continue: Continua la numeració allà on s'ha quedat la llista anterior.

Start: Indica el nombre pel que es comença a comptar; quedaria així: START = 2, per exemple.

Type: Indica el tipus de marca (1, 2, 3, 4.. | a, b, c... | A, B, C, D... | i, ii, iii, iv... | I, II, III, IV...). Quedaria així: Type = 1, Type = a, Type = A, Type = i o Type = I

Skip: Avança la numeració fins al valor indicat. Quedaria així: SKIP = 2, per exemple.

Com amb les llistes desordenades també s'utilitza l'atribut LI per separar els diferents elements; té els següents atributs:

Style: Per definir estils.

Type: Funciona igual que el Type per a l'atribut OL que hem vist una mica més a dalt.

Value: Defineix un valor (nombre) per el qual reiniciar la seqüència.

Podríem crear per exemple, a hores d'ara, una llista així:

<ol>
<li>Primer element</li>
<li Type = a>Segon element</li>
<li Value = 2>Tercer element</li>
</ol>

Que quedaria semblant a això:

Primer element
Segon element
Tercer element

Llistes de definició

Estan constituïdes per concepte i definició. Amb els atributs DL, DT i DD.

DL: Serveix per delimitar la llista: indicar on comença i on acaba. <dl> i </dl>.

DT: S'utilitza per indicar el concepte a definir. <dt> i </dt> (la de tancament és opcional, però sempre és millor utilitzar-la per evitar errors de visualització).

DD: Indica la definició del concepte a definir. <dd> i </dd> (la de tancament és opcional, però sempre és millor utilitzar-la per evitar errors de visualització).

Podríem crear quelcom similar a això:

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>WWW</dt>
<dd>World Wide Web</dd>
</dl>

Que quedaria així:

HTML: HyperText Markup Language
WWW: World Wide Web

Taules

Les taules serveixen perquè en diferents ordinadors amb una resolució diferent puguin veure la mateixa informació igual d'ordenada i atractiva.

Les etiquetes principals de les taules són Table (

, serveix per crear la taula), Table Row (, per crear files) i Table Distribution (, per crear columnes, ha d'anar entre les i ).

Un exemple de taula simple seria:

<table>
<tr><td>Cel·la 1</td><td>Cel·la 2</td></tr>
<tr><td>Cel·la 3</td><td>Cel·la 4</td></tr>
</table>

(Sempre dins de les etiquetes body)

A les taules també s'hi poden afegir imatges, formats per el text, altres taules, etc.

A més hi podem afegir títols, que quedaren centrats a dalt de la taula, això es fa amb l'etiqueta CAPTION (<caption></caption>).

Un nou exemple:

<table>
<caption>Provant de fer una taula</caption>
<tr><td><img height="100" alt="Laberint de triple espiral" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Triple-Spiral-labyrinth-variant.png" width="100"></td><td><big><span style="background-color: red"><span style="color:yellow;">Cel·la 2</span></span></big></td></tr>
<tr><td>Cel·la 3</td><td>&nbsp</tr>
</table>

Aquí hem utilitzat l'etiqueta caption, hem posa't una imatge a la cel·la 1, format al text de la cel·la 2, hem deixa't igual la cel·la 3, però... i la quatre? A la quatre hi hem afegit , s'anomena Non-breaking space i serveix per deixar caràcters en blanc, en aquest cas un cel·la, així podem fer que la primera fil·la tingui dues cel·les i la segona només una.

Anem complicant la cosa, ara afegirem vores a la taula: dins de l'etiqueta table hi posem border="2" i a més li posarem color bordercolor="red". També afegirem color de fons bgcolor i posarem vores a les cel·les Cellpadding (per determinar la el gruix de cada vora) i Cellspacing (per determinar la distància entre cel·les).

Vegem com quedaria:

<table border="2" bordercolor="red" bgcolor="green" cellpadding="5" cellspacing="15">
<caption>Provant de fer una taula</caption>
<tr><td><img height="100" alt="Laberint de triple espiral" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Triple-Spiral-labyrinth-variant.png" width="100"></td><td><big><span style="background-color: red; color:yellow;">Cel·la 2</span></big></td></tr>
<tr><td>Cel·la 3</td><td>&nbsp</tr>
</table>

Si vulguéssim posar una imatge de fons en comptes d'un color hauríem de canviar bgcolor per background. Posaríem, per exemple, això:

background="http://upload.wikimedia.org/wikipedia/commons/c/ce/Triple-Spiral-labyrinth-variant.png"

Ara volem posar títol a les files i columnes, per això utilitzarem l'etiqueta TH, quedarà així:

<table>
<tr>
<td></td>
<th>Títol columna 1</th>
<th>Títol columna 2</th>
<tr>
<th>Títol fila 1</th>
<td>Fila 1 de la columna 1</td>
<td>Fila 1 de la columna 2</td>
</table>