Tutorial HTML

• Notiuni introductive
• Notiuni de baza
• Comentarii
• Formatare text
• Liste
• Legaturi
• Imagini
• Sunete
• Videoclipuri
• Tabele
• Cadre
• Formulare
• Harti de imagini
• HTML si CSS
• Verificarea paginii

Tabele

Tabelele reprezintă un element foarte important al unei pagini web. În foarte multe cazuri, tabele cu chenare invizibile sunt folosite ca şi „schelet” al paginii, pentru a putea realiza alinieri complexe ale elementelor acesteia.

Tag-ul pentru descrierea unui tabel este <table> şi </table>. În cadrul acestora trebuie descrise liniile (rândurile) tabelului, în cadrul fiecărui rând trebuind descrise celulele acestuia.

Descrierea unui rând se face între tag-urile <tr> şi </tr>. La rândul lor, celulele din cadrul rândului se descriu între <td> şi </td> . Atît tag-ul </tr> cât şi tag-ul</td> pot fi omise.

Atribute ale tag-ului <table>

Un prim atribut al tag-ului <table> este border=”grosime_pixeli” . Dacă acest atribut este omis, tabelul va avea un chenar invizibil. Dacă se specifică doar atributul, omiţând grosimea, aceasta va fi luată, implicit, ca fiind 1.

Iată un exemplu de cod pentru definirea unui tabel cu valoarea implicită ca fiind 1.

Atributul cellpadding=”nr_pixeli” permite stabilirea unui spaţiu care va fi lăsat, în fiecare celulă a tabelului, între conţinutul celulei şi marginile acesteia. Dacă nu se specifică acest atribut, el este în mod implicit considerat 0.

Vizualizarea

Atributul cellspacing=”nr_pixeli” permite stabilirea spaţiului care va fi lăsat între chenarele celulelor vecine în tabel (şi inclusiv între ele şi chenarul exterior al tabelului). Dacă nu se specifică acest atribut, el este în mod implicit considerat 2.

Vizualizarea

Conţinutul unei celule poate fi cât se poate de general: de la text şi imagini până la alte tabele (se pot deci construi chiar şi tabele imbricate), ca în exemplul următor:

Vizualizarea

Atributul width=”lăţime” poate stabili cât de lat să fie tabelul. Lăţimea poate fi dată în procente, caz în care se va calcula ca şi procent din lăţimea ferestrei browser-ului (ex: width=”50%”) sau în pixeli (ex: width=”500”);

Atributul height=”înălţime” poate stabili cât de înalt să fie tabelul. Lăţimea poate fi dată, la fel ca şi în cazul atributului width, în procente sau în pixeli;

Atributul align determină alinierea tabelului în pagină. Poate la una dintre valorile left, right sau center. Dacă, pe lângă tabel, mai scriem şi text, acesta se va poziţiona faţă de tabel în acelaşi mod în care se poziţionează şi faţă de imagini;

Atributul bgcolor=”culoare” permite stabilirea culorii de fundal a tuturor celulelor tabelului;

Atributul bordercolor=”culoare” permite stabilirea culorii chenarului (deopotrivă cel interior cât şi cel exterior)

Un exemplu de cod folosind toate aceste atribute

Vizualizarea

Atribute ale tag-ului <tr>

Atributul align determină, pentru toate celulele de pe linie, modul alinierii conţinutului pe orizontală, în interiorul celulelor. Poate la una dintre valorile left, right, center sau justify;

Atributul valign determină, pentru toate celulele de pe linie, modul alinierii conţinutului pe verticală, în interiorul celulelor. Poate la una dintre valorile top, bottom sau middle;

Atributul bgcolor determină, pentru toate celulele de pe linia respectivă, culoarea de fundal.

Atribute ale tag-ului <td>

Atributul width şi height determină, pentru celula respectivă, lăţimea şi înălţimea. Poate fi dată în procente sau pixeli. Dacă e specificată în procente, se va lua din lăţimea, respectiv înălţimea 25 tabelului. Modificarea lăţimii şi a înălţimii unei celule va avea efect şi asupra celorlalte celule, pentru ca tabelul să fie aliniat;

Atributul align şi valign stabilesc, la fel ca şi în cazul lui </tr>, modul în care este aliniat conţinutul în interiorul celulei, pe orizontală respectiv pe verticală, fiind prioritare faţă de alinierea la nivel de linie

Atributul colspan=”n” stabileşte întinderea celulei respective în dreapta cu n coloane (echivalentul operaţiei Merge Cells din Word, în cazul în care unim celule adiacente pe orizontală);

Atributul rowspan=”n” stabileşte întinderea celulei respective în jos cu n linii (echivalentul operaţiei Merge Cells din Word, în cazul în care unim celule adiacente pe verticală);

Atributul bgcolor determină, pentru celula respectivă, culoarea de fundal. Evident, este prioritară faţă de acelaşi atribut la nivel de linie.

Exemplu de cod folosind atribute tagurilor <td> şi <tr>

Vizualizarea

Tag-ul <th>...</th> poate înlocui <td>...</td> . Atributele sunt aceleaşi. Singura diferenţă este că textele de după tag-ul <th> sunt, în mod implicit, tipărite îngroşat (Bold) iar alinierea lor se face pe centru.

Tag-ul <caption>...</caption> permite scrierea unui titlu pentru tabel. Acest tag trebuie să se găsească imediat după <table>. Acest tag suportă atributul align . Acesta poate lua una dintre valorile: left (titlul va fi poziţionat în stânga sus), right (poziţionare dreapta sus), top (poziţionare pe centru sus), bottom (poziţionare pe centru jos);

Exemplu de cod folosind tagurile <th> şi <caption>

Vizualizarea