Tabelele de date listează diverse informații în coloane și rânduri pentru o citire ușoară. Datele sunt de obicei parțial numerice cu etichete text. Un exemplu este un tabel de date care arată câte calorii consumă cineva în fiecare zi. Realizarea unui tabel de date online se poate face cu HTML sau cu limbajul browserului CSS mai complex. Tabelul final arată exact ca un tabel de date creat într-o foaie de calcul sau pe hârtie. Singura diferență este codarea de fundal, care nu se vede decât dacă ne uităm la codul sursă. Codificarea poate fi creată de editori HTML, text sau alte modalități. Există multe site-uri online care oferă posibilitatea de a introduce date, de a seta câteva atribute și de a crea toate codurile de tabel pentru dvs. Tabelele de date online sunt de obicei utilizate ca parte a unei pagini web. Tabelele de date sunt adesea folosite pentru a crea liste de articole cu categorii, cum ar fi articolele de vânzare. Unele pagini Web le folosesc pentru a afișa statistici pentru informații. În timp ce tabelele de date pot fi utilizate offline pentru tipărire sau în rapoarte, de obicei este mai bine să le utilizați software pentru foi de calcul, cum ar fi Microsoft Office Excel, care oferă mult mai multe funcții pentru lucru cu date. Acest ghid arată cum să creați un tabel de date HTML cu Notepad.
Deschideți un editor HTML sau doar un document text obișnuit Notepad pentru a introduce cod HTML. Notepadul funcționează bine dacă sunteți obișnuiți cu codarea HTML. Editorii HTML fac sarcinile repetitive mai rapide, dar unii, cum ar fi Frontpage, adaugă coduri suplimentare, inutile, care pot încetini paginile Web. Cel mai bun lucru de făcut este mai întâi codul cu un editor HTML, apoi reveniți și editați codul manual pentru a-l curăța.
Decideți atributele tabelului pentru margine, lățime, culoarea de fundal și culorile fontului. Trebuie să luați în considerare aspectul paginii web, lățimea, culorile și alte atribute pentru a face tabelul ușor de citit. De asemenea, trebuie să decideți câte rânduri și coloane sunt necesare pentru date. Începeți să definiți atributele tabelului. (Exemplul nostru arată numărul de calorii consumate la prânz și cină în fiecare zi a săptămânii. Avem nevoie de trei coloane (zi, prânz și cină) și șapte rânduri (două pentru etichete și unul pentru fiecare zi a săptămânii).
Adăugați o margine în jurul tabelului și a celulelor de date. Bordurile separă datele în celule pentru o vizualizare ușoară. Se măsoară în pixeli și i se poate da o valoare de 0 pentru a nu-i folosi. O margine de unul sau doi pixeli este în general bună. Eticheta pentru chenar este
bgcolor = border = "CHOSEN_BORDER_WIDTH"
Culoarea chenarului poate fi modificată cu eticheta
bordercolor = "CHOSEN_COLOR"
care utilizează termenii de bază de culori, cum ar fi roșu sau negru sau coduri de culoare hexazecimale din șase cifre. Hexadecimale oferă mai multe culori. Exemplul nostru folosește border = "2" și bordercolor = "black".
Determinați lățimea întregului tabel. Se măsoară în pixeli sau procent din dimensiunea ecranului. Pixelii sunt definitivi, iar procentele permit tabelului să se adapteze la diferite dimensiuni ale ecranului. Încercați să judecați lățimea pe baza lățimii datelor de pe rânduri. Dacă aflați mai târziu că masa este prea subțire sau largă, aceasta poate fi schimbată. Exemplul nostru folosește width = "175".
Setați culoarea de fundal a celulelor de date. Este diferit de culoarea de fundal a paginii, care poate oferi un contrast bun. Eticheta este
bgcolor = "CHOSEN_COLOR"
la fel ca culoarea chenarului. Exemplul nostru folosește bgcolor = "alb".
Setați culoarea fontului textului din celule. Asigurați-vă că culoarea contrastează bine cu fundalul, astfel încât să fie ușor de citit. Lumina pe întuneric sau întunericul pe lumină funcționează întotdeauna cel mai bine. Eticheta este
font = "CHOSEN_COLOR"
Exemplul nostru este font = "negru", care contrastează bine cu fundalul alb.
Scrieți etichetele de tabel complete între o săgeată la stânga și la dreapta, cu un spațiu între atributele de etichetă și începând cu eticheta de tabel în față. Ordinea etichetelor nu contează, atâta timp cât „tabelul” este în față.
Determinați lățimile coloanei. Lățimea fiecărei coloane depinde de lățimea întregului tabel. Luați lățimea tabelului și împărțiți-l la numărul de celule pentru a obține coloane de dimensiuni egale. Dacă este necesar, reglați lățimile coloanei, dar totalul nu poate depăși lățimea mesei. Când o lățime de celulă se schimbă, celelalte celule trebuie să fie ajustate pentru a totaliza lățimea tabelului. (Exemplul nostru are o lățime de 175 și trei coloane pe rând, deci o împărțire uniformă de aproximativ 59. Împărțirea efectivă este de 70, 60, 40.)
Începeți să adăugați datele. Mai întâi, începeți o nouă linie și adăugați un rând de tabel cu codul
Introduceți datele pentru celulă; folosind acest cod pentru a reprezenta celule goale:
Închideți celula cu eticheta. Eticheta bordercolor este utilizată pentru a specifica culoarea marginii celulei, dacă se dorește. Dacă este lăsat în afara, se folosește tabelul implicit color. Primul cod de celulă al exemplului nostru este:
Repetați crearea celulelor de date ale tabelului, fiecare pe o nouă linie, până când toate celulele din rând sunt complete. Apoi încheiați rândul cu eticheta. Începeți următorul rând cu același proces, începând cu
Închideți codul tabelului cu etichetă. Codul nostru final al tabelului, dacă este încheiat după două rânduri de date, este mai jos.
Lucruri de care ai nevoie
- Editor HTML sau Notepad
- Date