Hyödyllisiä vinkkejä

Taulukon luominen HTML-muodossa

Pin
Send
Share
Send
Send


HTML-taulukot niitä käytetään paitsi tavanomaisella tavalla (soluihin, riveihin ja sarakkeisiin jakautuneena datajoukkona), mutta myös tietojen sijoittamisen helpottamiseksi sivulle. Yksinkertaisesti sanottuna, voit esittää koko html-sivun taulukon muodossa ja esimerkiksi laittaa valikon vasempaan sarakkeeseen, tärkeimmät tiedot keskimmäiseen sarakkeeseen ja lisälinkit oikeanpuoleiseen sarakkeeseen. Vain sinä valitset sarakkeiden, rivien ja vastaavasti solujen määrän, ja niitä voi olla mikä tahansa.

Nyt lukemasi sivusta se rakennettiin alun perin tälle periaatteelle: se on jaettu useisiin riveihin ja jokainen rivi sarakkeisiin (ja eri riveissä eri määrään sarakkeita). Joihinkin tuloksena oleviin soluihin puolestaan ​​asetetaan enemmän taulukoita (taulukot lisätään taulukoihin). Voit jopa nähdä sen puhtaasti visuaalisesti.

Yleensä taulukkojen käyttäminen HTML-muodossa helpottaa sivuston rakentamista. Kuitenkin, sinä itse näet kaiken! Joten siirrytään suoraan harjoitteluun.

§ 1. Pöydän luominen

Ama: sta luodaan HTML-taulukko, jossa on tunnisteet, taulukkorivit (sijoitetut tunnisteiden väliin) ja taulukon sarakkeet (sijoitetaan tunnisteiden väliin) ja tunnisteet.

Luo esimerkiksi taulukko, joka koostuu yhdestä rivistä ja kahdesta sarakkeesta. HTML näyttää tältä:

Mutta yleensä taulukossa on paljon rivejä ja sarakkeita, ja sellaisella tietueella sekoitat jatkuvasti. Siksi suosittelen aluksi ensimmäistä menetelmää.

§ 2. Pöytäkehys (reunat)

Oletuksena selainten taulukko näkyy ilman kehystä. Pöydän kehyksen tekemiseksi näkyväksi käytetään määrää ”” jo tutut edellisistä osioista ”:reunus»:

Ja sitten selain näyttää:

Ensimmäinen soluToinen solu

Attribuutin ”border” alku vaikuttaa vain ulkorajaan, solujen välisiä rajoja ei voi muuttaa. Ne voidaan joko näyttää tai ei. Jos esimerkiksi muutat ”border” -attribuutin arvon arvosta “1” arvoon “5”:

Ensimmäinen soluToinen solu

Voit muuttaa taulukon reunuksen väriä valitsemalla “bordercolor". Esimerkiksi:

Sitten selaimessa näemme:

Ensimmäinen soluToinen solu

§ 3. Tausta taulukossa

Voit muuttaa sisennyksen välillä taulukon vierekkäisiin soluihin, HTML-määrite käyttää "cellspacing". Monimutkaistamme taulukkoa selvyyden vuoksi: tee kaksi riviä kolmesta sarakkeesta ja käytä "cellpacing" -määritettä:

B-reititin näyttää:

Ensimmäinen soluToinen soluKolmas solu
Neljäs soluViides soluKuudes solu

Luetelmakohtaan sisällä solut määritteen "cellpadding". Jos muutamme HTML-koodimme ensimmäistä riviä:

Ensimmäinen soluToinen soluKolmas solu
Neljäs soluViides soluKuudes solu

§ 4. Pöytäsolujen liitto

Taulukon solujen yhdistämiseksi vaakasuunnassa (sarakkeet) tai pystysuunnassa (rivit) käytetään seuraavia määritteitä HTML: ssä:

colspan - solujen yhdistäminen vaakasuoraan (sarakkeet),

rowspan - solujen yhdistäminen pystysuunnassa (rivit).

Muuta esimerkiksi HTML-koodiamme seuraavasti:

Sitten selaimessa näemme:

Ensimmäinen ja toinen soluKolmas solu
Neljäs soluViides soluKuudes solu

Ensimmäinen soluToinen soluKolmas ja kuudes solut
Neljäs soluViides solu

§ 5. Taulukon otsikko

Jos käytät taulukkoa tietojen järjestämiseen (etkä sivun asetteluun), saatat joutua käyttämään otsikkoa. Taulukon otsikko asetetaan tunnisteella. Esimerkiksi:

Selaimessa se näyttää tältä:

Taulukon otsikko
Ensimmäinen soluToinen soluKolmas solu
Neljäs soluViides soluKuudes solu

Voit käyttää attribuuttia “kohdista". Tasaa taulukon kanssa.

Tasausmääritteellä on seuraavat arvot:

  • vasen - kohdistaa otsikon taulukon vasempaan reunaan,
  • oikea - kohdistaa otsikon taulukon oikeaan reunaan,
  • keskus - kohdistaa otsikon taulukon keskelle (oletusarvo),
  • ylin - sama kuin "keskellä", toimii vain kaikissa selaimissa,
  • pohja - otsikko asetetaan pöydän alla keskellä.

Taulukon otsikko
Ensimmäinen soluToinen soluKolmas solu
Neljäs soluViides soluKuudes solu

§ 6. Taulukon mitat

Ja voit muuttaa taulukon ja solujen kokoa seuraavilla määritteillä:

  • leveys - taulukon, sarakkeen, solun leveys,
  • korkeus - pöydän, rivin, solun korkeus.

Ja x-arvot määritetään pikselinä tai prosenttina. Esimerkiksi:

Se näyttää tältä:

Ensimmäinen soluToinen soluKolmas solu
Neljäs soluViides soluKuudes solu

§ 7. Taulukon kohdistus

HTML-muodossa taulukon vaakasuuntainen kohdistaminen sivun suhteen tehdään tunnetulla määritteellä:kohdista". Sen merkitykset ovat tuttuja myös sinulle:

  • keskus - pöydän kohdistus keskelle,
  • vasen - taulukon kohdistus vasemmalle,
  • oikea - taulukon kohdistus oikealle.

Oletuksena kohdistus tapahtuu vasemmalle. Esimerkki:

Ensimmäinen soluToinen soluKolmas solu
Neljäs soluViides soluKuudes solu

Tasataksesi taulukon tekstiä (ja sen muuta sisältöä), sinun on käytettävä ”kohdista” -määritettä jokainen tietty solu! koska taulukon koko sisältö on soluissa. Esimerkki:

Ensimmäinen solu (oikealle kohdistettu)Toinen solu (keskitetty)Kolmas solu
Neljäs soluViides soluKuudes solu (oikealle kohdistettu)

Tasaa sisältöä pystysuunnassa solu attribuutti "valign", Jolla on seuraavat merkitykset:

  • lähtötilanteessa - suuntaus perustasoon,
  • pohja - suuntaus alareunaan,
  • keskimmäinen - kohdistus keskelle (oletusarvo),
  • ylin - kohdistus yläreunaan.

Reunat ja kehykset

Oletuksena taulukossa ei ole reunusta. Voit lisätä sen tunnisteen reunatunnisteella

. Joskus selaimet näyttävät kuitenkin tämän reunan eri tavalla, joten on parempi määrittää tämä prosessi tyylien kanssa työskentelemiseen:

Tausta ja tekstin väri

Tunnisteisiin HTML-taulukkosolun, rivin tai yksittäisen solun taustan osoittamiseksi

, Seuraavia vaihtoehtoja voidaan käyttää:

  • tausta - kuvaa käytetään taustana. Voit määrittää joko tiedostonimen tai polun siihen,
  • bgcolor - tausta on tietty väri. Voit määrittää sekä mielenkiinnon kohteena olevan sävyn nimen että heksadesimaalikoodin.

HTML-taulukon tekstin värin muuttamiseksi on käytettävä tunnistetta.

§ 8. Taulukon tausta

HTML-muodossa taulukon tai sen yksittäisten solujen taustaväri asetetaan käyttämällä ”bgcolor". Puhuimme siitä, kuinka HTML-elementin haluttu väri valitaan tunnissa, joka koski kehotunnisteen määritteitä. Esimerkki:

Selaimessa näemme:

ja
Ensimmäinen soluToinen soluKolmas solu
Neljäs soluViides soluKuudes solu

Voit käyttää kuvia taulukon tai yksittäisen solun taustana. HTML-muodossa tämä tehdään käyttämällä ”tausta". ”Tausta” -ominaisuuden arvo on osoite kuvaan (kuinka opiskelemme grafiikkaa tässä oppitunnissa). Esimerkki koko taulukon taustakuvasta:

Ensimmäinen soluToinen solu
Kolmas soluNeljäs solu

Yksittäiselle solulle taustakuva asetetaan seuraavasti:

Ensimmäinen soluToinen solu
Kolmas soluNeljäs solu

HTML-sisennys

HTML-muodossa taulukon sisennys asetetaan tunnisteella

:

  • solujen välimatka - etäisyys vierekkäisten solujen rajojen välillä,
  • solumerkintä - etäisyys sisällön ja solun reunan välillä.

Tämän koodin visuaalinen näyttö selaimessa on seuraava:

HTML-taulukon kohdistus

Voit määrittää kaksi parametria kullekin solulle tai riville, jotka suorittavat vaakasuuntaisen (kohdista) ja pystysuuntaisen (valignin) tekstin kohdistuksen HTML-taulukossa.

Kohdistusparametrilla voi olla seuraavat arvot:

  • vasen - kohdistus vasemmalla rajalla,
  • oikea - kohdistus oikealla reunalla,
  • keskipiste - keskikohta.

Voimakkaalla parametrilla voi olla seuraavat arvot:

  • alhaalta - kohdistus alarajaan,
  • ylhäällä - kohdistus ylärajaan,
  • keskellä - kohdistus keskellä.

Lisää kuva HTML-taulukkoon

Verkkovastaavilla on usein kysymys siitä, kuinka lisätä kuva HTML-taulukkoon? Tämän saavuttamiseksi on välttämätöntä rekisteröidä osoite tai kuvan nimi oikeaan soluun tunnisteen jälkeen

XHTML HTML -merkintä - lisäsi taulukon toisen rivin tavallisilla, mutta ei otsikkosoluilla. Seuraavat rivit ja solut insertoitiin samalla tavalla. - sulki pöydän.

Hyödyllisiä linkkejä:

  • HTML-perusteet - ilmainen 2 tunnin video-opetus HTML-perusteista,
  • Ilmainen kurssi sivuston ulkoasusta - esimerkki lohkoasettelusta tyhjästä,
  • Sivuston ulkoasu tyhjästä 2.0 on täysimittainen maksettu kurssi.

§ 9. Päätelmä

HTML: ssä taulukoita, kuten jo alussa totesin, käytetään pääasiassa sivun asetteluun. Tämä on heidän päätarkoituksensa. Jokaiseen taulukon soluun voit lisätä mitä tahansa muuta tietoa: tekstiä, kuvia tai muuta taulukkoa. Siksi ne ovat niin käteviä merkitsemään html-sivuja ja hajottamaan ne erillisiin lohkoihin. Voit esimerkiksi luoda tällaisen "sävellyksen":

.

  • leveys - leveys
  • korkeus - korkeus
  • alt - vaihtoehtoinen teksti, joka näkyy selaimessa, kun kuvanäyttötoiminto on poistettu käytöstä,
  • otsikko - kuvan kuvateksti,
  • kohdista - vaakasuuntainen kohdistus,
  • valign - pystysuuntainen kohdistus.

Käärittämällä kuvaa erityiseen tunnisteeseen, sitä voidaan käyttää linkkinä.

Solujen yhdistäminen HTML-taulukossa

Yhdessä sarakkeessa tai rivissä olevat naapurisolut voidaan yhdistää tunnisteen riviväli- ja colspan-parametreilla

.

Yhden rivin sarakkeiden liitto näyttää tältä:

HTML-taulukon generaattorit

Tietenkin voit luoda HTML-taulukoita itse kirjoittamalla kaikki HTML-tunnisteet manuaalisesti. Tässä tapauksessa taulukossa on vaara, että sitä ei laadita oikein, koska inhimillinen tekijä tuntee itsensä työskennellessään suurten tietomäärien kanssa.

Erityiset HTML-taulukkogeneraattorit ovat olleet olemassa jo pitkään säästääksesi aikaa. Heidän avullaan voit helposti luoda taulukon, jolla on monia asetuksia.

Yksi yleisimmistä taulukkogeneraattoreista on venäjänkielinen palvelu http://rusws.ru/genertabtag. Hänen arsenaalissaan on monia asetuksia rakennuspöydille: voit asettaa taustan värin, kohdistuksen, taulukon leveyden, kehyksen paksuuden jne.

Tämä on loistava vaihtoehto tuottaa yksinkertaisia ​​taulukoita, mutta vakavampiin tarkoituksiin suosittelemme käyttämään muita palveluita:

Samassa palvelussa on melko kätevä HTML-editori, johon voit rakentaa, täyttää taulukon ja saada sen koodin:

Jos päätät käyttää pöytägeneraattorin palveluita, sinun on lähestyttävä huolellisesti sinulle sopivan palvelun valintaa testaamalla suosituin niistä ja valitsemalla paras.

Tunnisteet ja taulukon määritteet

Taulukoiden luomiseen tarvitaan seuraavat elementit:

  • - astia, jonka sisällä pöytä sijaitsee (sama kuin merkityille tai numeroituihin luetteloihin).
  • reunus - attribuutti, joka määrittelee kehysten paksuuden. Sen sijaan on parempi käyttää CSS-rajaominaisuutta.
  • asettaa taulukon allekirjoituksen. Säiliötä ei voi käyttää, mutta jos päätät silti johtaa pöytää, aseta se heti tunnisteen jälkeen , solujen ja rivien ulkopuolella.
  • - paritunniste, joka sisältää taulukkorivin (solut sijaitsevat samalla tasolla vaakatasossa).
  • - Tagi, joka luo taulukon otsikkosolun. Ulkoisesti sen sisältö eroaa muiden solujen sisällöstä - yleensä sisällä oleva teksti Selain on lihavoitu ja keskitetty.
  • - säiliö, jolla yksinkertainen solu luodaan. Kuinka monta tällaista tunnistetta merkkijono sisältää (tunniste , siinä on niin paljon soluja: yksi tunniste - yksi solu.
  • Voit ryhmitellä sarakkeita nopeasti ja tukkematta koodia asettaaksesi niille yleiset ominaisuudet. Säiliötä käyttämällä voit erottaa taulukon loogiset osat toisistaan. Se sijaitsee tunnisteen jälkeen, ellei niin ole, sitten jälkeen .
  • käytetään samaan tarkoitukseen kuin. voi sisältää, mutta ei päinvastoin.
  • jänneväli - Attribuutti, joka määrittelee sarakkeiden määrän, joihin säilöominaisuuksia sovelletaan.
  • , ja - säilytysastiat, joiden avulla voit jakaa pöydän vastaavasti yläosaan (otsikot), pääosaan (alaosa) ja alaosaan (viimeinen osa). HTML-taulukossa näiden tunnisteiden järjestys on sama kuin säilytysjärjestys, ja HTML-dokumentissa.
  • colspan tarvitaan solujen yhdistämiseksi peräkkäin. Attribuutin arvo sisältää numeron, joka määrittää yhdistettävien solujen määrän.
  • rowspan liittyy sarakkeiden soluihin.

Esimerkki taulukon luomisesta

Luo HTML-dokumentti ja kopioi seuraava koodi siihen:

Selaimessa asiakirja näyttää tältä:

Selvitetään, mitkä koodirivit ovat vastuussa mistä.

  • - avasi pöydän ja kysyi häneltä kehysten paksuutta.
  • Työkalut sivustojen luomiseen - nimeltään se.
  • - avasi linjan.
  • tapaaminen - loi solun otsikolla.
  • työkalu - loi toisen rivin otsikkosolun. Colspan-parametri osoitti, että tämän solun tulisi olla kaksi vaakatasossa. - sulki linjan. Samoin loimme loput rivit.
Voi, missä on minun nuoruuteni!

Ja tämä on yksinkertaisin asia, joka voidaan tehdä taulukoiden avulla! Sivuston luominen taulukkomuodon perusteella on ehdottomasti mahdollista aloittelijalle! Tämä oppitunti on osoitus tästä.

Yleensä nyt on aika riippumattomille kokeille. Koska oppitunti on kyse taulukkojen luominen HTML-muodossa valmistunut. Ja sen kanssa tarinasi HTML-perusteista on valmis.

Ja meya tämän tiedon, aloin harppaa koko sivuston. Siksi suosittelen, että käytät tätä tietoa käytännössä. Vaikka HTML-sisällönkuvauskentistä on vielä osa, ne eivät liity suoraan sivuston luomiseen. Joten konsolidoi tämän osan tiedot ja napsauta Seuraava-painiketta.

Jaa linkki Seoded.ru-palveluun ystävien, tuttavien ja ihmisten kanssa, joiden kanssa keskustelet sosiaalisissa verkostoissa ja foorumeilla! Lisää itse sivusto kirjanmerkkeihin! Joten voita.

Jaa linkki tälle sivulle:

Katso video: How to create first web page in html - html tutorial for beginners (Elokuu 2022).

Pin
Send
Share
Send
Send