Llenguatge html/Llistes i taules

Afegeix enllaços
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[modifica]

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

Llistes desordenades[modifica]

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í:

    <LH>Títol de la llista</LH>
  • 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[modifica]

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ò:

  1. Primer element
  2. Segon element
  3. Tercer element

Llistes de definició[modifica]

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[modifica]

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>
Hauria de quedar així.

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>
Obtingut de «https://ca.wikibooks.org/w/index.php?title=Llenguatge_html/Llistes_i_taules&oldid=72237»