Tabulas spēlē nozīmīgu lomu, kad runa ir par datu attēlošanu organizētā formātā. Šajā pamācībā jūs uzzināsiet, kā izveidot pamata HTML tabulas un izmantot svarīgās tagus izkārtojumam un struktūrai.
Solījumu soļi
Sāksim ar jūsu pirmās tabulas izveidi! Vispirms jums jāzina, ka pamattranšē ir. Šis tag iekļauj visu tabulu.
Tagad pievienosim rindu. Katru rindu definē ar tagu, kas apzīmē "tabulas rindu". Šajā rindā pagaidām nav datu, tāpēc tā paliek tukša. Varat iedomāties, ka katra rinda var nodrošināt vietu vairākām kolonnām.
Tagad ir laiks pievienot dažus datus tabulai. Tam mēs izmantosim -tagu un pievienosim attiecīgās vērtības. Pieņemsim, ka pirmais vārds ir „Jan“, e-pasts ir „support@programmierenlern.info“ un dzimšanas datums ir 23.06.1982. Jūsu rinda tad vajadzētu izskatīties šādi:
Pārliecinieties, ka tagad tabula izskatās labāk. Jūs varat pievienot tik daudz rindu, cik vēlaties, vienkārši izmantojot vēl vairāk - un -tagus. Pievienosim vēl vienu darbinieku. Nosauksim viņu par „Joe Average“ un viņa e-pasts varētu būt „joe@average.com“.
Ja mēs tagad atsvaidzinām tabulu, redzam, ka tā pieaug un visi ievadītie dati ir redzami. Struktūra ir svarīga, jo tā nodrošina jums skaidru pārskatu par informāciju.
Kas notiks, ja jūs vēlaties pievienot kāju tabulas beigās, piemēram, autortiesībām? Šeit nāk klāt colspan. Ar colspan varat norādīt, cik daudz kolonnu šūna var aizņemt. Tātad, lai iestatītu autortiesības pār visām trim kolonnām, jūs rakstāt: Autortiesības 2015 coding-geeks.de.
Pēc šīs kājas pievienošanas jums vajadzētu pārbaudīt izskatu. Ideja ir tāda, ka kāja tiek novietota zem kolonnām un dati tiek skaidri prezentēti. Šajā gadījumā kāja nav savā kolonnā un tāpēc tam vajadzētu atrasties virs citām trim kolonnām.
Ja tagad samazināt colspan uz diviem, jūs varētu arī pievienot otro norādi. Pieņemsim, ka vēlaties attēlot „Coding Geeks“ jaunā kolonā. Lai to paveiktu, izmantot -tagu vēlreiz, pareizi pielietojot colspan.
Ja esat sekojuši visiem šiem soļiem, esat iemācījušies, kā izveidot pamata HTML tabulas. Tomēr vizuālo dizainu vajadzētu veikt ar CSS, lai uzlabotu izkārtojumu un lietošanas ērtumu. Tas ietver satura un izkārtojuma atdalīšanu, lai vēlāk jums būtu lielāka elastība savas mājas lapas dizainā.
Kopsavilkums - HTML tabulu izveidošanas pamati
Jūs esat iepazinies ar HTML tabulu struktūru un izmantošanu, sākot ar uzbūvi, datu novietošanu un beidzot ar kāju. Tagad jūs varat attēlot vienkāršus tabulārus datus savā tīmekļa vietnē.
Bieži uzdoti jautājumi
Kādi ir pamata tagi HTML tabulām?Pamata tagi ir,, virsrakstu un datu šūnām.
Vai es varu izveidot neierobežotu skaitu rindu un kolonnu tabulā?Jā, teorētiski jūs varat pievienot daudz rindu un kolonnu, bet ir svarīgi domāt par lasāmību.
Kā man vajadzētu stilizēt tabulas?Izmantojiet CSS dizainam, nevis tiešas HTML īpašības, piemēram, border.
Ko nozīmē colspan?Colspan atribūts ļauj šūnai izpleties pāri vairākām kolonnām.
Kāpēc CSS ir labāk piemērots izkārtojumam nekā HTML atribūti?CSS atdala saturu no tā stilizēšanas, tādējādi nodrošinot lielāku elastību un iespējas dizainam.
