HTML: postavitev tabele. Primeri, opis, uporaba, nasveti

Vsakdo, ki je kdaj želel ustvariti spletno stran za svoj projekt, se je soočil s problemom svojega pisanja. Ni vsakdo želi plačati, in ne vsak proračun si ga lahko privoščite, za ustvarjanje spletnega mesta za profesionalne webmastere, tako da večina začetnikov svojo pot do mesta ustvarjalci začnejo učiti tehnike postavitve. Ker kakovostna vsebina in razpoložljivost kupljenega prostora na strežniku, ki gosti spletno mesto, ni dovolj za obstoj. Najprej morate ustvariti "skelet" stran.

Kaj je html tabela?

Za odgovor na to vprašanje morate opredeliti pojem postavitve. Nestiranje - proces ustvarjanja strukture html-strani, dajanje na to glavne elemente. Postavitev tabele je uporaba tabele z nevidno konturo kot struktura strani. To pomeni, da bo stran mesta tabela z določenim številom stolpcev in vrstic, kjer ima vsaka celica določen element.


Postavitve html dokumentov, ki so nastale v obliki tabele, se uporabljajo v veliki večini območij in se uporabljajo že več kot 10 let. To je posledica enostavnosti strukture, polnjenja in vsestranskosti takšnega označevanja, ki je prikazan na enak način v različnih brskalnikih.

Prva faza izdelave mesta

Postavitev tabele se začne z označevanjem: html koda strani je napisana z tabelo, ki je sestavljena iz določenega števila stolpcev in vrstic. Če želite ustvariti preglednico v html, se za njeno odprtje uporablja posebna oznaka.Znotraj uporablja oznake ustvariti linijo

za ustvarjanje glavo tabele in

za ustvarjanje stolpec. Stolpci in glave se ustvari znotraj slogan, in vsaka vrstica je mogoče ustvariti s poljubnim številom stolpcev.












Prva tabela
V prvem stolpcuV drugem stolpcu


Sposobnost, da ustvarite tabelo vam omogoča prikaze postavitev html-strani, tako da boste morali ugotoviti, katere lastnosti so pri ustvarjanju tag in kako jih uporabljati.

Glavne lastnosti tabele oznak

tag to oznako kot simbol odpiranja tabelo, služi, da se omeji svojo strukturo, ki določa svoj položaj na strani in splošnega stanja celice skozi značilnostmi:
  • Poravnava lastnino uporabi za poravnavo položaj tabele je mogoče nastaviti na "levo", "center" in "pravica". Ta poravnava na levo, na sredino in desno, oz.
  • nastaviti ozadje za nastavitev ozadje za tabelo s povezavo do njega.
  • bgcolor nastavi barva ozadja tabele, lahko vrednost je ime ali koda koli barve.
  • rob mize določa debelina okvirja, ki je navedena v milisekundah.
  • borderColor nastavi barvo obrobe.
  • odmik celice omogoča nastavitev intervalov med besedilom in meja celic.
  • kaže, da okvirjev lastnost brskalnik za prikaz tabele načinov meje, pri čemer vrednosti nična, mejo, nad, pod hsides, vsides, rhs, LHS. To torej pomeni, da ne prikazuje mejo, pripravi okvirokrog tabele vidimo samo zgornjo mejo ali le spodnje meje, ne skrivajmo samo horizontalnih meja ali le navpično, samo odsevamo desno ali levo mejo.
  • Atribut pravila zagotavlja informacije o tem, katere meje morajo celice prikazati. Vrednost none vam omogoča, da skrijete vse meje, vse točke na njihov prikaz, cols določa položaj vrstic med stolpci in vrstice - med vrsticami.
  • Oznaka
    Ta oznaka ustvari vrstico tabele, ki ustreza njenemu videzu. Ima majhen nabor atributov: poravnajte za poravnavo besedila v vrstici, bgcolor določa barvo ozadja celice, mejna barva določa barvo obrobe okoli črte. Oznake

    in

    Ti dve oznaki imata približno enako funkcionalnost: ustvarite celico v vrsti in nastavite njene pogoje prikaza z atributi:
  • Abbr vam omogoča kratek komentar o celici.
  • Poravnava je odgovorna za uskladitev vsebine treh horizontalnih položajev.
  • Ozadje se uporablja za zapolnitev ozadja celice s posebno sliko.
  • Bgcolor se uporablja za nastavitev barve ozadja v celici.
  • In obrobna barva določa barvo meja celice.
  • Višina služi za določanje višine celice.
  • Nowrap mora prepovedati prenos niza.
  • Teža določa širino celice.
  • Primer html-postavitve mesta

    Po preučevanju teorije dela s tabelami v html lahko začnete ustvarjati svojo postavitev strani. Če želite to narediti, ugotovite, kateri funkcionalni bloki bodo na vašem spletnem mestu. To je lahko klobuk, klet,blok vsebine, stranske bloke. V postavitvi tabele html morate ustvariti samo tabelo.
    Pravzaprav lahko na tej stopnji ustvarite popolnoma dokončano postavitev tako, da nastavite videz vsakega elementa z zgoraj opisanimi lastnostmi oznake. In potem morate samo kopirati kodo tabele na vsako novo stran, tako da ima en slog. Toda to je precej neprijetno, saj bo slog strani shranjen le v datoteko, kar pomeni, da boste morali, če boste morali nekaj spremeniti, težko poiskati zahtevani atribut slog v vsakem dokumentu in spremeniti njegovo vrednost. Vendar pa obstaja možnost, da optimizirate ta postopek s pomočjo metode tabelarnega postavljanja CSS. Zato pri ustvarjanju tabele html ni treba uporabljati atributov sloga v dokumentu. Edini atribut, ki ga uporabljamo, je id, ki vam omogoča, da se sklicujete samo na slog posameznega elementa. To je univerzalni atribut, ki se uporablja z vsemi oznakami. Zajema vrednosti, ki so sestavljene iz latiničnih črk in simbolov. Pri izdelavi tabele morate za oznako nastaviti ID, na primer z vrednostjo "document". Za celico (oznaka

    ali

    ), dodeljeno pod glavo, lahko atribut id sprejme vrednost "glava". Levi meni se lahko imenuje "left_side" in desno "right_side". Blok vsebine, recimo, se bo imenoval "vsebina", osnovo spletnega mesta - "noga".

    To bo prikazalo stran v brskalniku.

    Druga faza postavitve

    Ustvarjeni dokument mora biti povezan s slogovnoCSS datoteka za nadzor videza predmetov strani. Če želite to narediti, morate ustvariti dokument CSS, ga poimenovati, na primer, mystyle.css. In zdaj znotraj oznake v glavnem dokumentu strani morate predpisati naslednje :. Potem, ko vtipkate pogoje mystyle.css prikaza elementov, lahko spremenite videz strani, kot želite. Lastnost barve na primer podaja barvo besedila, ozadje pa določa, kako bo izgledalo ozadje elementa. Obstaja okoli 20 glavnih lastnosti, s pomočjo katerih lahko spremenite položaj elementov, njihovo velikost, barvo in izbor. Torej, ta postavitev ni zelo zapletena in se lahko celo opravi novinec, ampak kako ustvarjalno in zanimivo bo, odvisno le od vas.

    CSS-layout

    Kot veste, večina webmastere zdaj izbere drugo med tabelo in postavitvijo bloka v html. To je predvsem posledica dejstva, da je koda postavitve tabele zelo težavna in to ovira nalaganje strani. Obseg kode je pojasnjen s prisotnostjo kompleksne strukture strukture tabele (raven 3: takrat in šele po

    ). Vendar pa obstaja rešitev tega problema v jeziku Cascading Style Sheets (CSS).
    Postavitev CSS z zavihki se lahko izvede, na primer, če v oznaki obstajajo samo posamezni elementi, ki niso tabela. Če želite optimizirati kodo, lahko ustvarite dokumente tabele neposredno prekolastnosti slogov. To uporablja lastnost prikaza, ki pove brskalniku, kako naj zazna ta ali tisti element v dokumentu. Če je vrednost na primer tabela, se postavka prikaže kot tabela in če je tabela-vrstica ali celica tabele tabela oziroma celična vrstica. To odpravlja potrebo po uporabi oznak oznak v nizu html.

    Prilagodljiva postavitev tabele

    Prilagodljiva postavitev vključuje spreminjanje prikaza mesta na različnih zaslonih, odvisno od ločljivosti in velikosti zaslona. To je za izvajalca dokaj zahtevna naloga, saj zahteva previdne izračune in testiranje na mnogih platformah. Kljub temu si ne moremo predstavljati nobenega priljubljenega modernega vira brez uporabe prilagoditev za različne naprave. In CSS se uporablja za rešitev tega problema. Prvič, tako da je v vseh brskalnikih slog spletnega mesta edini, morate ponastaviti vse standarde prikaza brskalnika z uporabo css reset, da se znebite nestandardnih vdolbin, izbir in podobno. Drugič, morate prejeti medijske poizvedbe iz naprav, ki se povezujejo z virom, da pridobite informacije o ločljivosti zaslona in uporabite prilagoditve. V ta namen se večinoma uporabljajo lastnosti min-width, max-width in display. Prvi dve določata meje razširitve bloka in lastnost prikaza z vrednostjo none vam omogoča, da skrijete velike in nefunkcionalne bloke na zaslonih z nizko ločljivostjo.

    Primeri

    Ni pomembno, katero metodo razvijalec uporablja za ustvarjanje označevalne vrednosti, in jo bo lahko uredil s tako edinstvenim CSS inDovolj je estetsko domišljija. Spodaj so primeri postavitev tabel HTML.
    Še en primer.
    In to lahko uredite in tako.
    Pravzaprav sploh ni pomembno, da razporeditev tabel ni več videti sodobna in relevantna - zlahka jo nadomestijo ustvarjalnost in pismenost oblikovalskega oblikovanja.

    Sorodne publikacije