U tablicama podataka nalaze se razne informacije u stupcima i redovima radi lakšeg čitanja. Podaci su obično djelomično numerički s tekstualnim oznakama. Primjer je tablica podataka koja pokazuje koliko kalorija netko pojede svaki dan. Izrada mrežne tablice podataka može se izvršiti pomoću HTML-a ili složenijeg jezika CSS preglednika. Završna tablica izgleda poput podatkovne tablice stvorene u proračunskoj tablici ili na papiru. Jedina je razlika u pozadinskom kodiranju, koje se ne vidi osim ako se gleda izvorni kod. Kodiranje se može stvoriti pomoću HTML uređivača, teksta ili na druge načine. Na mreži postoje mnoge web stranice koje nude mogućnost unosa podataka, postavljanja nekoliko atributa i izrade svih kodiranja tablice za vas. Tablice mrežnih podataka obično se koriste kao dio web stranice. Tablice podataka često se koriste za izradu popisa predmeta s kategorijama, poput predmeta za prodaju. Neke ih web stranice koriste za prikaz statističkih podataka. Iako se tablice podataka mogu koristiti izvanmrežno za ispis ili u izvješćima, obično je bolje koristiti softver za proračunske tablice, kao što je Microsoft Office Excel, koji nudi mnogo više značajki za rad s podacima. Ovaj vodič pokazuje kako stvoriti HTML tablicu podataka s Notepadom.
Otvorite HTML uređivač ili samo obični tekstualni dokument Notepad za unos HTML koda. Notepad dobro funkcionira ako ste navikli na HTML kodiranje. HTML urednici brže ponavljaju zadatke, ali neki, poput Frontpagea, dodaju dodatno, nepotrebno kodiranje koje može usporiti web stranice. Najbolje je prvo kodirati HTML uređivačem, a zatim se vratiti i ručno urediti kôd da ga očistite.
Odlučite atribute tablice za obrube, širinu, boju pozadine i boje fonta. Morate uzeti u obzir izgled web stranice, širinu, boje i druge atribute kako biste tablicu učinili lako čitljivom. Također morate odlučiti koliko je redaka i stupaca potrebno za podatke. Počnite definirati atribute tablice. (Naš primjer pokazuje broj kalorija pojedenih za ručak i večeru svakog radnog dana. Trebamo tri stupca (dan, ručak i večera) i sedam redaka (dva za naljepnice i jedan za svaki radni dan).
Dodajte obrub oko tablice i ćelija podataka. Granice razdvajaju podatke u ćelije radi lakšeg pregleda. Mjeri se u pikselima i može mu se dati vrijednost 0 da ih se ne koristi. Obrub od jednog ili dva piksela uglavnom je u redu. Oznaka obruba je
bgcolor = border = "CHOSEN_BORDER_WIDTH"
Boja obruba može se mijenjati s oznakom
bordercolor = "CHOSEN_COLOR"
koji koristi osnovne pojmove boja, poput crvene ili crne ili šesteroznamenkaste heksadecimalne kodove boja. Heksadecimalci nude više boja. Naš primjer koristi border = "2" i bordercolor = "black".
Odredite širinu cijele tablice. Mjeri se u pikselima ili postocima veličine zaslona. Pikseli su konačni, a postoci omogućuju prilagodbu tablice različitim veličinama zaslona. Pokušajte procijeniti širinu na temelju širine podataka u redovima. Ako kasnije otkrijete da je tablica pretanka ili široka, može se promijeniti. Naš primjer koristi width = "175".
Postavite boju pozadine ćelija podataka. Drugačija je od boje pozadine stranice, koja može ponuditi dobar kontrast. Oznaka je
bgcolor = "CHOSEN_COLOR"
baš poput boje obruba. Naš primjer koristi bgcolor = "white".
Postavite boju fonta teksta u ćelijama. Pazite da boja bude u kontrastu s pozadinom, tako da je lako čitljiva. Svjetlo na tamnom ili tamno na svjetlu uvijek najbolje funkcionira. Oznaka je
font = "CHOSEN_COLOR"
Naš primjer je font = "black", koji je u dobrom kontrastu s bijelom pozadinom.
Zapišite kompletne oznake tablice između lijeve i desne strelice s razmakom između atributa oznake i počevši od oznake tablice ispred. Redoslijed oznaka nije važan, sve dok je "stol" ispred.
Odredite širine stupaca. Širina svakog stupca ovisi o širini cijele tablice. Uzmite širinu tablice i podijelite je s brojem ćelija da biste dobili stupce jednake veličine. Ako je potrebno, prilagodite širinu stupaca, ali ukupna vrijednost ne može premašiti širinu tablice. Kada se promijeni širina jedne ćelije, ostale ćelije treba prilagoditi tako da zbrajaju širinu tablice. (Naš primjer ima širinu od 175 i tri stupca po retku, dakle ravnomjerno dijeljenje od oko 59. Stvarna podjela je 70, 60, 40.)
Počnite dodavati svoje podatke. Prvo započnite novi redak i dodajte redak tablice s kodom
Unesite svoje podatke za ćeliju; pomoću ovog koda za predstavljanje praznih ćelija:
Zatvorite ćeliju s oznakom. Oznaka bordercolor koristi se za određivanje boje obruba ćelije, ako želite. Ako je izostavljena, koristi se zadana boja obruba tablice. Naš prvi primjer ćelijskog koda je:
Ponavljajte izradu ćelija podataka tablice, svaku na novom retku, dok se sve ćelije u retku ne dovrše. Zatim redak završite oznakom. Započnite sljedeći redak istim postupkom, počevši od
Zatvorite kod tablice s pomoću označiti. Naš konačni kod tablice, ako je završen nakon dva retka podataka, nalazi se u nastavku.
Stvari koje će vam trebati
- HTML editor ili Notepad
- Podaci