Crearea unui tabel
Să facem un nou fișier tabel dintr-o coloană, în celule din care, ca în meniu, vom prezenta legături către paginile disponibile și alte pagini ale site-ului WEB care nu au fost încă efectuate. La urma urmei, site-ul WEB poate conține 10 pagini. Prin urmare, este foarte important să puteți selecta rapid o pagină adecvată din meniu. Acest meniu se va pune apoi la marginea din stânga a ecranului, astfel încât să rămână mereu în câmpul vizual al utilizatorului.
Creați un fișier text nou și introduceți etichetele principale care creează structura documentului. În titlul documentului, selectați Meniu. Culoarea fundalului și a textului documentului, fără ajutorul altora, aleg astfel încât legăturile să fie perfect vizibile:
Orice tabel începe cu o etichetă
și se termină cu o etichetă
. Rândurile tabelului sunt formate dintr-o pereche de etichete |
, între care sunt plasate etichetele | . Orice pereche de aceste etichete formează o coloană. Între deschidere și închiderea | tag-uri sunt plasate text sau orice alt conținut al celulei.
Având în vedere ceea ce sa spus, codul HTML care descrie tabelul nostru, constând din prima coloană și care conține elemente de meniu cu numele paginilor site-ului WEB, trebuie să aibă următoarea formă:
Introduceți o linie goală între deschidere
și închiderea și, începând cu aceasta, introduceți codul desemnat.
Salvați documentul în folderul WEB sub numele menu.html, apoi deschideți fișierul menu.html în fereastra browserului.
Tabelul pe care l-am făcut este situat la marginea din stânga a ecranului. Această poziție poate fi modificată prin utilizarea în eticheta de deschidere
Elementele de meniu sunt plasate una sub cealaltă, iar marginile tabelului și celulelor nu sunt vizibile. Acest lucru se datorează faptului că, în mod prestabilit, rama și celulele tabelului nu sunt afișate. Pentru a activa afișarea lor, utilizați-o în etichetă
atributul de frontieră, specificând grosimea cadrului în pixeli ca valoare.
Adaugă pentru a eticheta
latimea graniței: 1px, pentru a afișa cadrul și celulele tabelului cu o lățime de 1 pixel:
Acum, masa este afișată cu margini de relief.
Dimensiunea mesei
Dimensiunea mesei este de obicei setată de browser în mod automat, astfel încât tot conținutul să fie afișat. Dar puteți seta lățimea fixă a tabelului în pixeli utilizând atributul de lățime.
Setați lățimea tabelului la 140 de pixeli prin adăugarea atributului lățime la eticheta de deschidere
astfel încât el a luat forma:
În fereastra browserului, lățimea tabelului va scădea, astfel încât în majoritatea celulelor textul va fi afișat în două rânduri.
Când utilizați tabela de etichete pentru a genera coloane
| Datele din celule sunt reprezentate de un font simplu și în mod implicit sunt aliniate la stânga celulelor. Dacă doriți să selectați date în celule, de exemplu, titlul coloanelor sau rândurilor din tabel, apoi în loc de etichete | folosiți confortabil etichetele | . Text în elemente | este de obicei îndrăzneț și aliniat la centrul celulelor.
Meniul nostru va arăta mai bine dacă elementele sale sunt centrate în celule și evidențiate cu caractere aldine. Prin urmare, înlocuim elementele din codul HTML
| element | .
Editați fișierul menu.html, înlocuind etichetele
și | respectiv tag-uri și | .
În etichete
și | puteți utiliza atributele vechi:
aliniere - pentru alinierea orizontală a conținutului celulelor în marginile centrale (centru), stânga (stânga) și dreapta (dreapta) ale celulei;
width - pentru a specifica lățimea celulei în pixeli;
înălțime - pentru a determina înălțimea celulei;
valign - pentru alinierea verticală a datelor din celulă cu marginile de sus și de jos și cu mijlocul celulei; în mod implicit valign = "mijloc".
Verificați modul în care funcționează aceste atribute, apoi întoarceți tabelul la starea anterioară.
Cum să colorați masa în diferite culori
De asemenea, puteți schimba culoarea oricărei celule, a unei coloane, a unei linii sau a întregii mese, inserând în etichetă vechiul atribut bgcolor | , | sau sau prin stil = "fundal-culoare: # 666;".
Experimentați culorile și alegeți cele care vă corespund, din punctul dvs. de vedere, pentru masă.
Exemplu de formare a meniurilor și a legăturilor din tabel
Editați fișierul menu.html cu liniile de cod care conțin numele paginii principale din meniu și despre care suntem pasionați. inserând link-urile de mai sus în fișierele other.html și list.html astfel încât aceste linii să aibă următoarea formă:
| Pagina principală |
|---|
| Despre ce ne pasionăm? |
|---|
Acum, primele două meniuri și jumătate sunt evidențiate în culori și subliniate ca link-uri. Să verificăm modul în care funcționează aceste linkuri.
Faceți clic pe primul link - Pagina principală. În funcție de versiunea browserului, fișierul other.html va fi încărcat fie într-o nouă fereastră separată, fie în aceeași fereastră a browserului.
Dacă fișierul a fost descărcat în aceeași fereastră de browser, faceți clic pe butonul Înapoi din bara de instrumente sau închideți doar fereastra dacă fișierul a fost încărcat într-o fereastră nouă. Afișajul va afișa din nou fișierul menu.html.
Faceți clic pe al doilea link - despre care suntem pasionați? Fișierul list.html apare în fereastra browserului.
Deci, pe baza tabelului, am făcut un meniu și ne-am asigurat că linkurile din el funcționează.
Informații suplimentare despre acest subiect
Descrierea acțiunilor elementare necesare producerii și înțelegerii pentru producerea primului lor banner pentru paginile web
Acest articol descrie cum să creați și să lucrați cu tabelele din FrontPage
Trimiteți-le prietenilor: