HTML: tabelipaigutus. Näited, kirjeldus, rakendus, näpunäited

Interneti-turundus

Sisukord:

HTML: tabelipaigutus. Näited, kirjeldus, rakendus, näpunäited
HTML: tabelipaigutus. Näited, kirjeldus, rakendus, näpunäited
Anonim

Iga inimene, kes on kunagi soovinud oma projekti jaoks veebisaiti luua, on seisnud silmitsi selle kirjutamise probleemiga. Mitte igaüks ei taha maksta ja mitte iga eelarve ei saa seda endale lubada, selle eest, et professionaalsed veebimeistrid saidi loovad, nii et enamik oma teed alustavaid saidi loojaid hakkab õppima paigutusmeetodeid. Sest kvaliteetsest sisust ja saidi majutamiseks ostetud serveriruumi olemasolust selle eksisteerimiseks ei piisa. Kõigepe alt peate looma lehe "skeleti".

Mis on tabelipaigutus html-is?

Sellele küsimusele vastamiseks on vaja määratleda paigutuse mõiste.

Paigutus on html-lehe struktuuri loomise protsess, asetades sellele peamised elemendid.

Tabelipaigutus on vastav alt nähtamatu kontuuriga tabeli kasutamine lehe struktuurina. See tähendab, et saidi leht on teatud arvu veergude ja ridadega tabel, kus igas lahtris asub teatud element.

html paigutused-tabelipaigutusega loodud dokumente kasutatakse valdaval enamusel saitidel ja neid on kasutatud üle 10 aasta. Selle põhjuseks on struktuuri moodustamise ja täitmise lihtsus, aga ka sellise märgistuse mitmekülgsus, mida kuvatakse erinevates brauserites samamoodi.

Paigutuse näide

Veebisaidi loomise esimene etapp

Tabelipaigutus algab märgistuse loomisega: lehe html-kood kirjutatakse tabeliga, mis koosneb teatud arvust veergudest ja ridadest.

HTML-vormingus tabeli loomiseks kasutatakse spetsiaalset silti

selle avamine. See kasutab silte

stringi loomiseks,

tabeli päise loomiseks ja

veeru loomiseks. Veerud ja pealkirjad luuakse reasildi sees ning igasse rida saab luua suvalise arvu veerge.


Esimene tabel
Esimene veerg Teine veerg

Tabeli loomise võimalus võimaldab teostada HTML-tabeli lehekülje paigutust, seega peate välja selgitama, millised atribuudid on loomise siltidel ja kuidas neid kasutada.

Tabeli siltide peamised atribuudid

Märgend

See silt, mis on tabeli avamise sümbol, piirab selle struktuuri, määrab selle asukoha lehel ja kõigi lahtrite üldise välimuse tänu atribuutidele:

  • Joondamise atribuuti kasutatakse tabeli asukoha joondamiseks, see võib võtta väärtusi "vasak", "keskel" ja "paremale". See on vasakule, keskele ja paremale joondamine.serv vastav alt.
  • Atribuut background võimaldab määrata tabelile sellele viidates taustapildi.
  • Bgcolor määrab tabeli taustavärvi, väärtuseks võib olla mis tahes värvi nimi või kood.
  • Ääris määrab tabeli ääriste paksuse ja määratakse pikslites.
  • Bordercolor määrab äärise värvi.
  • Cellpadding võimaldab teil määrata teksti ja lahtri ääriste vahet.
  • Atribuut Frame käsib brauseril kuvada tabeli äärised, võttes väärtused tühised, piirid, ülal, all, hsides, vsides, rhs, lhs. Mis vastav alt tähendab, et äärist ei kuvata, raami ümber laua kuvatakse, nähtavaks tehakse ainult ülemine ääris või ainult alumine, ei peideta ainult horisontaalseid või ainult vertikaalseid, kuvatakse ainult parem- või ainult vasak rida.
  • Reeglite atribuut sisaldab teavet selle kohta, milliseid lahtripiire kuvada. Väärtus none peidab kõik piirid, kõik näitab, et need on kuvatud, veerud määravad ridade asukoha veergude vahel ja read täpsustavad ridade vahel.

Märgend

See silt loob tabelirea ja vastutab selle välimuse eest. Sellel on väike komplekt atribuute: joondus teksti joondamiseks reas, bgcolor määrab lahtri taustavärvi, bordercolor määrab rea ümber oleva äärise värvi.

Sildid

ja

Neil kahel sildil on ligikaudu samad funktsioonid: nad loovad järjest lahtri ja määravad selle kuvamise tingimused atribuutide abil:

  • Abbr võimaldab teil lühid alt kommenteeridalahter.
  • Align vastutab sisu joondamise eest kolme horisontaalse asendi suhtes.
  • Tausta kasutatakse lahtri tausta täitmiseks konkreetse pildiga.
  • Bgvärvi kasutatakse lahtri taustavärvi määramiseks.
  • Ja piirivärv määrab lahtri ääriste värvi.
  • Kõrgust kasutatakse lahtri kõrguse määramiseks.
  • Reavahede vältimiseks pole mähistamist vaja.
  • Kaal määrab lahtri laiuse.

HTML-saidi paigutuse näide

Kui olete html-i tabelitega töötamise teooriat uurinud, võite alustada oma lehe märgistuse loomist. Selleks peaksite otsustama, millised funktsionaalsed plokid teie saidil asuvad. See võib olla päis, jalus, sisuplokk, külgplokid. Html-tabelipaigutuse korral peate looma ainult tabeli.

Tegelikult saate selles etapis luua täiesti valmis paigutuse, määrates iga elemendi välimuse ülalkirjeldatud siltide omaduste kaudu. Ja siis tuleb tabeli kood kopeerida ainult saidi igale uuele lehele, et sellel oleks üks stiil. Kuid see on üsna ebamugav, kuna lehe stiil salvestatakse ainult selle faili, mis tähendab, et kui teil on vaja midagi muuta, peate igast dokumendist vajaliku stiiliatribuudi leidmiseks ja selle väärtust muutma. Kuid on võimalus seda protsessi optimeerida, kasutades CSS-i tabelipaigutusmeetodit. Seetõttu ei ole html-tabeli loomise ajal vaja dokumendis stiiliatribuute kasutada. Ainus atribuut, mida tuleb rakendada, onsee on ID, mis võimaldab teil pääseda juurde ainult üksiku elemendi stiilile. See on üldine atribuut, mis kehtib mis tahes sildi kohta. See aktsepteerib väärtusi, mis koosnevad ladina tähtedest ja sümbolitest.

Tabeli loomisel peate määrama sildi ID

, näiteks väärtusega “dokument”. Seejärel lahtri jaoks (märgend

või

), mis on reserveeritud päise jaoks, võib id atribuut võtta väärtuse "header". Vasakpoolse menüü lahtrit võib nimetada "left_side" ja parempoolset "right_side". Oletame, et sisuplokki nimetatakse "sisuks" ja saidi jalust "jaluseks".

Märgistuse näide

Nii kuvatakse lehte brauseris.

Koodi kuvamine

Teine paigutusetapp

Leheobjektide välimuse juhtimiseks peab loodud dokument olema ühendatud CSS-stiilifailiga. Selleks tuleb luua CSS-dokument, anda sellele nimi, näiteks mystyle.css. Ja nüüd peate lehe põhidokumendi sildi sisse kirjutama järgmise: