Scrigroup - Documente si articole

Username / Parola inexistente      

Home Documente Upload Resurse Alte limbi doc  

CATEGORII DOCUMENTE





loading...

AccessAdobe photoshopAlgoritmiAutocadBaze de dateCC sharp
CalculatoareCorel drawDot netExcelFox proFrontpageHardware
HtmlInternetJavaLinuxMatlabMs dosPascal
PhpPower pointRetele calculatoareSqlTutorialsWebdesignWindows
WordXml


Inserare unui tabel

html

+ Font mai mare | - Font mai mic







DOCUMENTE SIMILARE

Trimite pe Messenger
Inserare unui tabel
Tag-uri utilizate pentru crearea legaturilor (referintelor, pointerilor)
Titluri

Inserare unui tabel

- Cum se foloseste marcajul <table> -

De cele mai multe ori este nevoie ca datele prezentate sa fie sintetizate sub forma unui tabel, avand astfel un impact mai mare asupra vizitatorului (ca sfat pentru incepatori !).




< Inserarea unei tabel este de asemenea foarte simpla, si se face accesand comanda 'Table/ Insert Table' din meniul principal. La accesarea acestei comenzi, ca efect vizual, va veti intalni cu o fereastra pe care am prezentat-o mai jos.

< Trebuie remarcata complexitatea meniului 'Table' care va ofera nenumarate posibilitati de a manipula datele dumneavoastra. Trebuie sa retineti, ca de aici se pot face toate configurarile necesare, referitoare la tabelul dorit (latime, inaltime, culoare, margini, etc.).

Tabelele sunt introduse prin utilizarea marcajului <TABLE> </TABLE> Limbajul HTML ia in considerare urmatoarele elemente pentru construirea unui tabel (unele sunt optionale):

Text explicativ care se refera la continutul tabelului;

Capul de tabel (capul de tabel va fi scos in evidenta fata de restul liniilor);

Datele din tabel (=valorile din celulele tabelului);

Celulele tabelului (alinierea continutului);

In HTML, construirea unui tabel se face rand cu rand, specificand celulele de pe fiecare linie. Prima linie este considerata ca fiind capul de tabel, unde se precizeaza ce fel de date sunt continute in coloanele respective. Linia se specifica prin tagul <TR> </TR> Celulele tabelului sunt introduse prin marcajul <TD> </TD>, iar celulele cap de tabel prin <TH> </TH>. Codul HTML pentru crearea unui tabel cu trei linii si doua coloane este:
 

<TABLE BORDER>
<TR>
<TH> Nume
</TH>
<TH> Telefon
</TH>
</TR>
<TR>
<TD> Bogdan
</TD>
<TD> 444222
</TD>
</TR>
<TR>
<TD> Andrei
</TD>
<TD> 222444
</TD>
</TR>
</TABLE>

Se obtine urmatorul tabel:

Nume

Telefon

Bogdan

Andrei

S-a folosit atributul BORDER pentru a desena un tabel in care se vad liniile ce formeaza celulele. Absenta atributului determina obtinerea unui tabel fara liniatura.

Celulele tabelului, fie ca fac parte din capul de tabel sau sunt celule obisnuite, pot contine orice marcaj acceptat de HTML, inclusiv legaturi sau alte tabele. Celulele vide nu sunt afisate dar, daca dorim acest lucru, trebuie sa introducem macar un tag <BR> pentru a face celula vizibila.

In exemplul urmator avem un tabel cu trei linii si patru coloane, in care celulele au fost facute vizibile prin introducerea tagului <BR> si a caracterului spatiu (nbsp precedat de &). Marginea groasa a tabelului a fost obtinuta prin specificarea valorii 5 pentru atributul BORDER.
 

Efectul obtinut este unul decorativ. Sursa Html este urmatoarea:

<TABLE Border=5>   <TR> <TH> <BR>  </TH> <TH> <BR>  </TH> <TH> <BR>  </TH> <TH> <BR>  </TH>   </TR>   <TR> <TD> <BR>  </TD> <TD> <BR>  </TD> <TD> <BR>  </TD> <TD> <BR>  </TD>   </TR>   <TR> <TD> <BR>  </TD> <TD> <BR>  </TD> <TD> <BR>  </TD> <TD> <BR>  </TD>   </TR> </TABLE> <BR>



Pentru atasarea unei explicatii se foloseste tagul:

<CAPTATION ALIGN='aliniere'> Explicatie </CAPTATION>

unde tipul de aliniere poate fi:

TOP-explicatia este plasata deasupra tabelului (optiune implicita);

BOTTOM-explicatia este plasata dedesuptul tabelului;

Marcajul pentru explicatie trebuie plasat imediat dupa tagul TABLE, inainte de a se incepe definirea randurilor tabelului.

< In momentul in care doriti sa inserati in pagina dumneavoastra un tabel, folosind programul FrontPage Express, sau in momentul configurarii lui, va veti intalni cu o fereastra asemanatoare cu cea din stanga paginii.

< Observati ca aveti posibilitatea de a specifica alinierea datelor in celula atat pe verticala cat si pe orizontala ('Alignment') cat si dimensiunea marginilor ('Border Size') si chiar dimensiunea spatiului dintre celulele tabelului. ('Cell Spacing')

Alinierea datelor in tabel

Alinierea datelor in celulele tabelului se poate face prin doua atribute:

ALIGN -defineste alinierea orizontala si poate lua valorile:

o        LEFT- datele aliniate la stanga;

o        RIGHT-datele aliniate la dreapta;

o        CENTER- datele sunt centrate;

VALIGN- defineste alinierea verticala si poate avea valorile:

o        TOP - datele sunt aliniate la marginea de sus a celulei;

o        BOTTOM -datele sunt aliniate la baza celulei;

o        MIDDLE - datele sunt centrate vertical la mijlocul celulei;

Atributele de aliniere pot fi plasate in tagurile ce delimiteaza liniile si in tagurile ce definesc celulele. Daca plasam atributul ALIGN=left in tagul TABLE, textul care urmeaza tabelului 'curge' pe langa acesta (tabelul este aliniat in stanga ferestrei navigatorului iar in dreapta sa se afiseaza textul. Folosirea atributului ALIGN=right plaseaza tabelul in marginea dreapta iar textul 'curge' in partea stanga a tabelului.

Reluam primul exemplu, utilizand o aliniere diferita pentru liniile si celulele tabelului:

Nume si prenume

Telefon   


 Bogdan
 


 Andrei
 

iar sursa Html este:

<TABLE Border>   <TR Valign=TOP> <TH> Nume si prenume </TH> <TH> Telefon    </TH>   </TR>   <TR> <TD Align=left> <BR> Bogdan<BR>  </TD> <TD Align=right> 444222 </TD>   </TR>   <TR> <TD Valign=Middle><BR> <BR> Andrei<BR>  </TD> <TD Valign=Bottom> 222444 </TD>   </TR> </TABLE>

< Un lucru foarte util in editorul FrontPage Express este ca la selectarea tabelului sau a unei celule si apasarea butonului drept al mouse-ului va apare un meniu util de unde se poate configura tabelul dumneavoastra. Optiunile 'Cell Properties' sau 'Table Properties' sunt cele mai utile in acest sens. In urma activarii lor, ca efect vizual, veti vedea o fereastra de unde se pot configura atat dimensiunile tabelului sau celulei cat si culorile de fundal sau ale chenarelor.

Celule extinse

Daca dorim sa organizam datele in tabel astfel incat este nevoie ca o celula sa se intinda pe mai multe linii sau coloane, avem la dispozitie atributele:

COLSPAN = n - permite unei celule sa se intinda pe n coloane;

ROWSPAN = n - permite unei celule sa se intinda pe n randuri;

Cele doua atribute pot fi plasate in tagurile folosite pentru specificarea celulelor de date. Celulele de date se pot extinde intotdeauna in jos si/sau spre dreapta.








Politica de confidentialitate

DISTRIBUIE DOCUMENTUL

Comentarii


Vizualizari: 475
Importanta: rank

Comenteaza documentul:

Te rugam sa te autentifici sau sa iti faci cont pentru a putea comenta

Creaza cont nou

Termeni si conditii de utilizare | Contact
© SCRIGROUP 2020 . All rights reserved

Distribuie URL

Adauga cod HTML in site