Datu tabulās kolonnās un rindās ir uzskaitīta dažāda informācija, lai to varētu viegli nolasīt. Dati parasti ir daļēji skaitliski ar teksta etiķetēm. Piemērs ir datu tabula, kas parāda, cik daudz kaloriju kāds ēd katru dienu. Datu tabulas izveidošanu tiešsaistē var veikt ar HTML vai sarežģītāku CSS pārlūka valodu. Galīgā tabula izskatās gluži kā datu tabula, kas izveidota izklājlapā vai uz papīra. Vienīgā atšķirība ir fona kodēšana, kas nav redzama, ja vien neskatās avota kodu. Kodēšanu var izveidot HTML redaktori, teksts vai citi veidi. Tiešsaistē ir daudz vietņu, kas piedāvā iespēju ievadīt datus, iestatīt dažus atribūtus un izveidot visu tabulas kodēšanu. Tiešsaistes datu tabulas parasti tiek izmantotas kā Web lapas sastāvdaļa. Datu tabulas bieži izmanto, lai izveidotu priekšmetu sarakstus ar kategorijām, piemēram, pārdodamās preces. Dažās tīmekļa lapās tās tiek izmantotas, lai parādītu statistiku informācijai. Lai gan datu tabulas drukāšanai vai atskaitēs var izmantot bezsaistē, parasti labāk to izmantot izklājlapu programmatūra, piemēram, Microsoft Office Excel, kas piedāvā daudz vairāk funkciju darbam ar datiem. Šajā rokasgrāmatā ir parādīts, kā izveidot HTML datu tabulu, izmantojot Notepad.
Lai ievadītu HTML kodu, atveriet HTML redaktoru vai vienkārši parastu Notepad teksta dokumentu. Notepad darbojas labi, ja esat pieradis pie HTML kodēšanas. HTML redaktori veic atkārtotus uzdevumus ātrāk, bet daži, piemēram, Frontpage, pievieno papildu nevajadzīgu kodēšanu, kas var palēnināt tīmekļa lapu darbību. Vislabāk vispirms ir kods ar HTML redaktoru, pēc tam atgriezieties un rediģējiet kodu ar roku, lai to notīrītu.
Izlemiet tabulas atribūtus apmalei, platumam, fona krāsai un fonta krāsām. Lai tabula būtu viegli lasāma, jums jāņem vērā tīmekļa lapas izkārtojums, platums, krāsas un citi atribūti. Jums arī jāizlemj, cik rindu un kolonnu nepieciešams datiem. Sāciet definēt tabulas atribūtus. (Mūsu piemērs parāda katru darba dienu pusdienās un vakariņās apēsto kaloriju skaitu. Mums ir nepieciešamas trīs kolonnas (diena, pusdienas un vakariņas) un septiņas rindas (divas etiķetēm un viena katrai darba dienai).
Pievienojiet apmali ap tabulu un datu šūnām. Lai ērti skatītos, malas sadala datus šūnās. To mēra pikseļos, un, lai tos neizmantotu, tam var piešķirt vērtību 0. Viena vai divu pikseļu apmale parasti ir laba. Apmales atzīme ir
bgcolor = border = "CHOSEN_BORDER_WIDTH"
Apmales krāsu var mainīt ar tagu
bordercolor = "CHOSEN_COLOR"
kurā izmantoti pamata krāsu termini, piemēram, sarkans vai melns vai sešciparu heksadecimālie krāsu kodi. Heksadecimāli piedāvā vairāk krāsu. Mūsu piemērā tiek izmantots border = "2" un bordercolor = "black".
Nosakiet visas tabulas platumu. To mēra pikseļos vai procentos no ekrāna lieluma. Pikseļi ir noteikti, un procenti ļauj tabulai pielāgoties dažādiem ekrāna izmēriem. Mēģiniet spriest par platumu, pamatojoties uz datu platumu visās rindās. Ja vēlāk uzzināsiet, ka galds ir pārāk plāns vai plats, to var mainīt. Mūsu piemērā tiek izmantots width = "175".
Iestatiet datu šūnu fona krāsu. Tas atšķiras no lapas fona krāsas, kas var piedāvāt labu kontrastu. Atzīme ir
bgcolor = "CHOSEN_COLOR"
tāpat kā apmales krāsa. Mūsu piemērā tiek izmantots bgcolor = "white".
Šūnās iestatiet teksta fonta krāsu. Pārliecinieties, ka krāsa labi kontrastē ar fonu, tāpēc tā ir viegli salasāma. Gaisma uz tumšas vai tumša uz gaismas vienmēr darbojas vislabāk. Atzīme ir
font = "CHOSEN_COLOR"
Mūsu piemērs ir font = "black", kas labi kontrastē ar balto fonu.
Starp kreiso un labo bultiņu izrakstiet pilnus tabulas tagus ar atstarpi starp tagu atribūtiem un sākumu ar tabulas tagu priekšā. Tagu secībai nav nozīmes, ja vien tabula atrodas ārpusē.
Nosakiet kolonnu platumus. Katras kolonnas platums ir atkarīgs no visas tabulas platuma. Paņemiet tabulas platumu un daliet to ar šūnu skaitu, lai iegūtu vienmērīga lieluma kolonnas. Ja nepieciešams, noregulējiet kolonnu platumus, bet kopējais daudzums nedrīkst pārsniegt tabulas platumu. Kad vienas šūnas platums mainās, pārējās šūnas ir jāpielāgo, lai kopējais tabulas platums. (Mūsu piemērs ir 175 platums un trīs kolonnas vienā rindā, tātad vienmērīgs sadalījums ir aptuveni 59. Faktiskais sadalījums ir 70, 60, 40.)
Sāciet pievienot savus datus. Vispirms sāciet jaunu rindu un pievienojiet tabulas rindu ar kodu
Ievadiet šūnas datus; izmantojot šo kodu, lai attēlotu tukšas šūnas:
Aizveriet šūnu ar tagu. Bordercolor tag tiek izmantots, lai norādītu šūnas apmales krāsu, ja vēlaties. Ja tas netiek rādīts, tiek izmantota noklusējuma tabulas bordercolor krāsa. Mūsu piemēra pirmais šūnas kods ir:
Atkārtojiet tabulas datu šūnu izveidi katrā no tām jaunā rindā, līdz visas rindas šūnas ir pabeigtas. Pēc tam pabeidziet rindu ar tagu. Sāciet nākamo rindu ar to pašu procesu, sākot ar
Aizveriet tabulas kodu ar tagu. Mūsu pēdējās tabulas kods, ja tas beidzas pēc divām datu rindām, ir zemāk.
Jums nepieciešamās lietas
- HTML redaktors vai Notepad
- Dati