Kuinka tehdä suuri taulukko html:llä. Lähes vakiotila

HTML-taulukot ovat niin toimivia, että voit käyttää niitä kokonaisten verkkosivustojen asettamiseen (lue). Nyt puhumme yksinkertaisten HTML-taulukoiden lisäämisestä verkkosivulle, analysoimalla vain merkintöjä, mutta älä koske suunnitteluun, koska on parempi koristella taulukoita CSS-tyyleillä.

Taulukon tunnisteet ja attribuutit

Tässä ovat peruselementit, joita tarvitset taulukoiden luomiseen:

• - astia, jonka sisällä pöytä sijaitsee (sama kuin
  merkityille tai
  numeroiduille luetteloille).
  1. rajaa- attribuutti, joka määrittää kehysten paksuuden. On parempi käyttää sitä sen sijaan rajan omaisuutta CSS.
  sisällä

  määrittää taulukon allekirjoituksen. Sinun ei tarvitse käyttää säilöä, mutta jos päätät silti nimetä taulukon, aseta se heti tunnisteen jälkeen , solujen ja rivien ulkopuolella.

  - parillinen tunniste, joka sisältää taulukon rivin (samalla vaakatasolla sijaitsevat solut).

  , siinä on niin monta solua: yksi tunniste - yksi solu.

  voit ryhmitellä sarakkeita nopeasti ja tukkeutumatta koodia, määrittää ne Yleiset luonteenpiirteet. Säilön avulla voit erottaa taulukon loogiset osat toisistaan. Sijoitettu tagin jälkeen

  Tässä riviluokka määrittää solun mitat.

  Hei rakkaat blogin lukijat! Usein verkkosivuilla on tekstin ja kuvien lisäksi tarve esittää erilaisia ​​tietoja taulukoiden muodossa. Kyllä, tämä on ymmärrettävää, taulukko on kätevin tapa edustus Suuri määrä tiedot. Joten kysymys herää "Kuinka lisätä taulukoita html:ään?". Tässä artikkelissa vastaan ​​tähän kysymykseen ja annan sinulle monia esimerkkejä. erilaisia ​​html taulukoita.

  Kuinka luoda taulukko HTML:llä

  HTML-taulukot luodaan neljässä vaiheessa.

  1. Ensimmäisessä vaiheessa html-koodia käyttämällä paria tag

  , jos se ei ole siellä, niin sen jälkeen .

  käytetään samaan tarkoitukseen kuin . saattaa sisältää , mutta ei päinvastoin.

  jänneväli- attribuutti, joka määrittää sarakkeiden määrän, joihin säilön ominaisuuksia käytetään

  .

  , Ja - säiliöt, joiden avulla voit jakaa pöydän ylempään (otsikot), pääosaan (runko) ja alempaan (lopulliseen) osaan. HTML-taulukossa näiden tunnisteiden järjestys on sama kuin säilöjen järjestys , Ja

  Verkkosivuston luontityökalut

  Tarkoitus	Työkalu
Merkintä	HTML	XHTML
Sisustus	CSS
Kehitys	PHP	Python

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

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

  • - avasi pöydän antaen sille kehysten paksuuden.
    - he nimesivät sen.
    - avasi linjan.
    - loi solun otsikkosuunnittelulla.
    - loi riville toisen otsikkosolun. Colspan-parametri osoitti, että tämän solun tulisi kattaa kaksi vaakasuunnassa.
    - sulki linjan. Loput rivit luotiin samalla tavalla.
    - lisäsi taulukon toisen rivin tavallisilla soluilla otsikon sijaan. Seuraavat rivit ja solut lisättiin samalla tavalla.

    Verkkosivuston luontityökalut

    Tarkoitus	Työkalu
  Merkintä	HTML	XHTML

    - sulki pöydän.

  Pöytien monipuolisuuden ansiosta suuri numero Ulkonäköä säätelevien parametrien perusteella taulukoista on jo pitkään tullut selvä standardi web-sivujen asettelulle. Pöytä kanssa näkymätön raja edustaa kuin modulaarinen verkko, jonka lohkoihin on kätevä sijoittaa verkkosivun elementtejä. Tämä ei kuitenkaan ole täysin oikea lähestymistapa, koska kaikki HTML-objekti määritelty omiin tarkoituksiinsa ja jos sitä ei käytetä aiottuun tarkoitukseen ja kaikkialla, tämä tarkoittaa, että vaihtoehtoja ei ole. Näin se oli pitkään aikaan kunnes tasot korvasivat taulukot verkkosivuston ulkoasussa. Tämä ei tarkoita, että kerroksia käytetään nyt jatkuvasti, mutta trendi on jo selkeästi noussut esiin - taulukoita käytetään taulukkotietojen sijoittamiseen ja tasoja asetteluun ja suunnitteluun.

  Taulukon luominen

  Taulukko koostuu solujen riveistä ja sarakkeista, jotka voivat sisältää tekstiä ja kuvia. Taulukoita käytetään yleensä tietojen järjestämiseen ja esittämiseen, mutta taulukot eivät rajoitu siihen. Taulukoiden avulla on kätevä asetella sivuasetteluja järjestämällä oikealla tavalla katkelmia tekstistä ja kuvista.

  Voit lisätä taulukon verkkosivulle käyttämällä tunnistetta

  . Tämä elementti toimii säiliönä elementeille, jotka määrittävät taulukon sisällön. Mikä tahansa taulukko koostuu riveistä ja soluista, jotka määritetään vastaavasti tunnisteilla Ja määrittää rivit ja täsmälleen sama kuin taulukkotiedot. Riville voidaan asettaa seuraavat muuttujat:

  1. Tiedät jo reunan, bordercolorin ja bgcolorin.

  2. Tasaa - tekstin tasaus rivillä. Voi ottaa arvot vasemmalle, keskelle ja oikealle.

  3. Valign - tämä tagi tasaa tekstin pystysuunnassa. Hyväksyy seuraavat arvot:

  • alkuun - teksti on tasattu yläreunaan;
  • keskellä - keskellä;
  • pohja - alareunaa pitkin.

  Esimerkki rivimuodosta:

  ;

  ;

  ;

  .

  Soluvaihtoehdot

  Ja viimeinen asia, johon kannattaa kiinnittää huomiota niille, jotka haluavat tietää, miten taulukko tehdään HTML-kielellä, ovat yksittäisten solujen parametrit, sekä tavalliset että isoilla kirjaimilla. Pohjimmiltaan kaikki tehdään täsmälleen samalla tavalla kuin taulukossa tai rivissä. Ainoa asia on, että lisätään kaksi muuta tärkeää elementtiä:

  1. Colspan - tämä parametri määrittää sarakkeiden määrän, jonka solu voi kattaa.

  2. Riviväli - osoittaa tämän solun varaamien rivien määrän.

  Koska suunnittelu ei eroa rivin kirjoittamisesta, emme anna koodiesimerkkiä.

  johtopäätöksiä

  Pöydän tekeminen ei ole niin vaikeaa kuin miltä ensi silmäyksellä näyttää. Tärkeintä koodia kirjoitettaessa on sinnikkyys ja huomio.

  Mitä tulee taulukon lisäämiseen HTML-koodiin, sinun tarvitsee vain kopioida ja liittää sen koodi juuri siihen kohtaan sivullasi, jossa sen pitäisi mielestäsi sijaita.

  Älä pelkää kokeilla, niin opit pian luomaan taulukot täydellisesti. Onnea!

  Tämä tila perustuu vakiotilaan muutamin poikkeuksin: taulukon solujen sisällä ja toistensa alla olevien kuvien näyttäminen tapahtuu kuten yhteensopivuustilassa. Vaihda melkein vakiotila käytetään jotakin seuraavista doctyypeistä.

  HTML-kehykset:

  XHTML:n kehykset:

  Kuvat toistensa alla

  Kun kuvia näytetään pystysuorassa rivinsiirrolla
  Lähes vakiotilassa olevat kuvat näkyvät yhdessä ilman aukkoja. Esimerkki 1.2 näyttää koodin kahden kuvan näyttämiseksi.

  Esimerkki 1.2. Tulostaa kaksi kuvaa

  HTML 4.01 IE Cr Op Sa Fx

  Koska piirustukset olivat aiemmin yksi ja "leikattu" mukavuuden vuoksi, ne muodostuvat yksittäinen kuva(Kuva 1.1).

  Riisi. 1.1. Kuvien tulostus lähes vakiotilassa

  Vakiotilassa kuvien väliin tulee pieni rako (kuva 1.2).

  Riisi. 1.2. Kuvien tulostaminen vakiotilassa

  Voit ohittaa tämän ominaisuuden vakiotilassa kahdella päätavalla:

  1. lisää näyttö: kuvien esto;
  2. käytä line-height-ominaisuutta ylätason säilölle.

  Harkitse näitä menetelmiä yksityiskohtaisemmin.

  Tunnisteen muuntaminen Lohkoelementti auttaa meitä useammin kuin kerran ohittamaan erilaiset kuviin liittyvät ongelmat. Tällä kertaa käytämme ominaisuutta, joka lohkoelementti s ovat rivissä toistensa alapuolella (emme ota huomioon sisennyksiä). Tässä tapauksessa tunniste
  Tietysti se tulee poistaa koodista (esimerkki 1.3).

  Esimerkki 1.3. Block-ominaisuuden käyttäminen

  Display-ominaisuutta ei tarvitse käyttää, voit myös käyttää line-height , tämä ominaisuus määrittää riviväli. Asettamalla tunnisteen kooksi 1px

  Minkä sisällä kuvat sijaitsevat, saamme samanlaisen tuloksen (esimerkki 1.4).

  Esimerkki 1.4. Line-height-ominaisuuden käyttäminen

  XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

  Kuvat taulukossa

  Kun lisäät kuvan taulukon soluun, myös selaintilojen välillä on eroja. Ymmärtääksesi, katsotaan seuraavaa koodia (esimerkki 1.5). Jotta taulukon ympärillä oleva reunus olisi näkyvissä, TABLE-valitsimen tyyleihin on lisätty border-ominaisuus.

  Esimerkki 1.5. Taulukon kuva

  HTML 4.01 CSS 2.1 IE Cr Op Sa Fx

  . Taulukossa on oltava vähintään yksi solu (esimerkki 12.1). Sallittu tagin sijaan	käytä tunnistetta	. Teksti solussa, jossa on tunniste	, selain näyttää lihavoituna ja solun keskelle kohdistettuna. Muuten tunnisteiden avulla luotujen solujen väliset erot	Ja	Ei. Esimerkki 12.1. Taulukon luominen Solu 1 Solu 2 Solu 3 Solu 4 Solujen järjestys ja niiden ulkonäkö on esitetty kuvassa. 12.1. Taulukot ovat yksi tärkeimmistä, mutta samalla monimutkaisia ​​elementtejä, jonka on oltava web-sivuilla. Heidän avullaan on kätevää lähettää tärkeitä ja hyödyllistä tietoa melko tiivistetyssä muodossa. Tietenkin useimmat mallien editorit ovat käynnissä erilaisia ​​moottoreita, voit lisätä taulukon automaattisesti verkkosivuston tai erillisen julkaisun sivulle, mutta entä jos verkkoresurssin ja sen sivujen suunnittelu luodaan tyhjästä? Sitten aloittelija mestari voi kohdata ongelman: kuinka tehdä Selvitetään kuinka luoda tämä elementti oikein ja nopeasti. Editorin valinta Ensinnäkin, kun aloitat taulukon luomisen, sinun tulee päättää editorista, jossa työskentelet. Tietenkin helpoin tapa on valita ohjelma, jossa luot pääsivuston koodin. Mutta on parasta käyttää vanhaa hyvää muistikirjaa näihin tarkoituksiin. Saatat kysyä, miksi monimutkaistaa elämääsi, koska jos teet kaiken kerralla editorissa, näet tuloksen heti ja voit myös käyttää ohjelman vihjeitä. Kyllä, tämä on totta, mutta kun luot taulukon kanssa uusi alku, et pysty vain tutkimaan perusteellisesti sen luomisperiaatetta, vaan myös välttämään ärsyttäviä kirjoitusvirheitä ja virheitä pääkoodissa. Joskus käy niin, että kohdistin liikkuu vahingossa alas, ja kirjoitusprosessin aikana koodiin hiipii virhe, jota on joskus vaikea löytää. Kun olet luonut taulukon Notepadissa, voit kopioida sen koodin ja liittää sen haluamaasi paikkaan. Taulukon luontialgoritmi Ensin luodaan lyhyt algoritmi taulukon tekemiseen HTML-kielellä. Tämä on välttämätöntä, jotta ymmärrät kunkin vaiheen järjestyksen. Sitten selvitämme tarkasti, kuinka kukin piste suoritetaan. Aloitetaan valmisteluvaiheista. 1. Piirrä kaavamainen esitys taulukosta paperille. 2. Laske rivien ja solujen määrä. Jos jälkimmäisten lukumäärä on erilainen, lasketaan jokaiselle riville erikseen. 3. Määritä rivin otsikkosolujen määrä (esimerkiksi solut "Nro", "Nimi" jne.). 4. Kirjoitamme muistiin taulukon tärkeimmät parametrit - väri, korkeus ja leveys, tekstin tasaus - yleensä kaikki, mikä tuntuu tarpeelliselta. 1. Lisää taulukkotunnisteet. 2. Lisää rivitunnisteet tarvitsemasi määrän mukaan. 3. Lisää riveille solutunnisteet (tavalliset ja isoilla kirjaimilla) myös paperillesi kirjoitetun numeron perusteella. 4. Aseta parametrit taulukolle kokonaisuutena. 5. Aseta tarvittaessa ilmaisimet yksittäisiä soluja. 6. Täytä solumme tekstillä. Luo taulukko Joten, olet valinnut editorin, nyt selvitetään kuinka luodaan taulukko HTML:ssä. Tunniste, jolla taulukko lisätään sivukoodiin ( ), on paritettu, eli rakentamisemme alkaa tällä tunnisteella ja päättyy. Kun olet lisännyt taulukkotunnisteita, siirrymme rivien ja solujen luomiseen. Huomaa heti, että nämä elementit ovat myös pareittain. Tag
- solut. Käytä otsikkosoluissa parielementtiä	. Kuten jo mainittiin, ensimmäinen asia, joka sinun tulee tehdä, on luoda rivit ja kirjoittaa sitten solut niihin. Hämmennyksen välttämiseksi suosittelemme joko yhden tai kaksi rivin sisennystä kunkin lohkon väliin tai kirjoittamista uusi lohko elementtejä "Tab"-näppäimellä. Miltä tämä mahtaa näyttää? Näin: ; ; ; ; ; ; ; ; Ei. Sukunimi 1 ; Ivanov . Kuten näette, tässä ei ole mitään monimutkaista. Tärkeintä ei ole hämmentyä rivien ja solujen lukumäärässä. Muutoin pöytä voi mennä vinoon. Olemme keskustelleet taulukon luomisesta HTML-kielellä, nyt voimme siirtyä sekä itse matriisin että sen rivien ja solujen parametreihin. Taulukon asetukset Koodia kirjoitettaessa tulee kiinnittää huomiota seuraaviin kohtiin: tasaus reunoihin, tausta, teksti jne. Taulukon parametrit määritetään tagissa . Nämä sisältävät: 1. Reunus - reunuksen leveys. Määritetty kokonaislukuna. Oletusarvoisesti minkä tahansa taulukon rajat ovat nolla. 2. Bordercolor - reunuksen väri. Voidaan määrittää nimellä heksadesimaalikoodi väri (#00008B) ja sen nimi englanniksi (DarkBlue). Oletuksena se on aina harmaa. 3. Bgcolor - Määritetään myös koodilla tai nimellä. 4. Tasaa - tekstin tasaus taulukon takana. Oletuksena - tasattu vasemmalle. Tälle parametrille on olemassa seuraavat vaihtoehdot: vasen - virtaa oikealla; oikea - virtaa vasemman ympäri; keskellä - näytä pöytä keskellä ilman käärettä. 5. Leveys ja korkeus - pöydän leveys ja korkeus. Voidaan määrittää joko pikseleinä tai prosentteina (suhteessa selainikkunan kokoon). Kun määräät tämän tai toisen indikaattorin, sinun tulee kiinnittää erityistä huomiota suunnitteluun. Parametrin määrittämisen jälkeen on oltava "yhtä"-merkki, jonka jälkeen määritetty arvo ilmoitetaan lainausmerkeissä. Mitä tulee tekstin väriin, se on suunniteltu samalla tavalla kuin tavallinen teksti HTML-muodossa. Esimerkki pöydän suunnittelusta: ; ; ; ; ; ; ; ; Ei. Sukunimi 1 ; Ivanov . Rivivaihtoehdot Joten olemme jo selvittäneet kuinka tehdä taulukko HTML-kielellä ja määrittää sen pääparametrit. Mutta entä jos meidän on korostettava viiva? Pitäisikö se muotoilla eri tavalla kuin taulukon pääteksti? Riviparametrit kirjoitetaan tagiin
Ei.	Sukunimi

  Tämän esimerkin tulos on esitetty kuvassa. 1.3a. Vakiotilassa kuvan ulostulo on hieman erilainen (kuva 1.3b).

  A	b

  Riisi. 1.3. Kuva taulukossa. a - melkein vakiotila, b - vakiotila

  On havaittavissa, että normaalitilassa kuvan alareunassa näkyy pieni sisennys. Mistä se tulee? Jos lisäät tekstiä soluun ja lähennät (kuva 1.4), näet selvästi, että kuva on sisäinen elementti on tasattu tekstin perusviivaan eikä sen alareunaan. Vastaavasti ero tekstin perusviivan ja alareunan välillä on kuvan alla olevan aukon arvo.

  Riisi. 1.4. Perustaso teksti

  Jälleen on useita tapoja muuttaa taulukon kuvien käyttäytymistä. Ensimmäinen menetelmä on jo mainittu, tämä on tagin muuntaminen lohkoelementtiin käyttämällä näytön ominaisuudet arvolohkon kanssa (katso esimerkki 1.3). Tyyli on tässä tapauksessa seuraava:

  TABLE IMG ( näyttö: lohko; )

  Jos solun sisällä on tekstiä kuvien ohella, tällä tyylillä voi olla ei-toivottuja seurauksia. Sen sijaan, että kuva sijoitettaisiin tekstin viereen, se ilmestyy uudelle riville lohkoelementtinä. Tässä tapauksessa on suositeltavaa asettaa kuvat tasattavaksi alareunaan käyttämällä vertikaalinen tasausominaisuus arvon pohjalla (esimerkki 1.6).

  Esimerkki 1.6. Kuvien tasaus

  XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

  Teksti

  Vaikka kaikissa selaimissa tässä esimerkissä Kuva on tasattu alareunaan, itse tekstin tasaus on hieman erilainen. Firefox selaimet, Safari, IE7 kohdistavat tekstin kuvan alareunaan ja Opera, IE8, IE9 - yläreunaan.

  Yhden pikselin piirustukset

  Aikana taulukkoasettelu aktiivisesti käytössä läpinäkyvä kuva kooltaan yksi pikseli kerrallaan, niin sanottu yhden pikselin kuva. Taulukon soluun sijoitettu kuva ei antanut sen kutistua tiettyihin rajoihin, mutta se oli helposti skaalattavissa, jolloin solun leveys tai korkeus asetettiin. Koska kuva on läpinäkyvä, voit asettaa sen soluun taustaväri ja saada tietyn paksuiset vaaka- tai pystysuorat viivat.

  Vakiotilassa odotamme samoja ongelmia kuin käytettäessä tavallisia kuvia solujen sisällä. Solun korkeus kasvaa, kun kuviin lisätään pohjatäyte. Tämä ongelma voidaan ratkaista paljon yksinkertaisemmin, eikä se vaadi ylimääräisen tyylin käyttöä. Nykyaikaiset selaimet täydellisesti näyttö annetut mitat soluja ja ilman saatavuutta lisäkuvia sisällä. Siksi riittää yksinkertaisesti poistaa yhden pikselin piirros solusta.

  - tunniste, joka luo taulukon otsikkosolun. Ulkoisesti sen sisältö eroaa muiden solujen sisällöstä - yleensä sisällä olevasta tekstistä	Selain korostaa sen lihavoituna ja sijoittaa sen keskelle.	- säiliö, jolla luodaan yksinkertainen solu. Kuinka monta tällaista tunnistetta rivi sisältää (tag

  ilmoitamme selaimelle, että verkkosivulle on lisätty taulukko: . Taulukkoelementti on web-sivun lohkoelementti. Siksi taulukko näytetään aina kanssa uusi rivi pystysuoralla sisennyksellä alkaen viereisiä elementtejä, joten sitä ei tarvitse laittaa kappaleeseen.

  2. Toisessa vaiheessa muodostamme rivit taulukot, parillisten tunnisteiden sijoittaminen

  . Jokainen elementti luo erillisen rivin:
  
  
  
  
  

  3. Seuraavaksi kolmannessa vaiheessa muodostamme soluja taulukoita käyttäen parillisia tunnisteita Ja , jotka on sijoitettu elementin sisään . Tag luo säännöllinen solu ja solu otsikko, eli vastaavan sarakkeen otsikko:

  
  
  
  
  
  
  
  
  
  
  

  4. Viimeisessä vaiheessa asetamme ne elementtien sisään Ja solun sisältö. HTML-koodi taulukon lisäämiseksi verkkosivulle näyttää suunnilleen tältä:

  
  
  
  
  
  
  
  
  
  
  

  Sarake 1	Sarake 2	Sarake 3
  Solu 1-1	Solut 1-2	Solut 1-3
  Solu 2-1	Solu 2-2	Solut 2-3

  Niiden avulla voit hienosäätää reunusten näyttöä. Sen avulla voit muuttaa kehysten paksuutta ja väriä sekä muuttaa reunusten tyyppiä.

  Solujen sisään sijoitettavaa tekstiä ei tarvitse sulkea, mutta jos teksti on suuri, se voidaan jakaa kappaleiksi tagin avulla

  Jos haluat jotenkin muotoilla lisättyä tekstiä, voit käyttää .

  Tekstin lisäksi voimme sijoittaa kuvia soluihin tagin avulla :

  

  Solun sisältö voi olla jopa toinen taulukko. Tässä tapauksessa sisäkkäisen taulukon luominen ei eroa tavallisen taulukon luomisesta. Vain tagien välissä Ja tunnisteet lisätään

  Ja, ja siihen lisätään rivit ja solut.

  Taulukoita luotaessa on hyvä muistaa joitain sääntöjä:

  • taulukon luomiseen käytetään vain tunnistetta ;
    tag
    voi olla vain tagin sisällä ;
    tunnisteet
    , mikä tahansa muu tunnisteen sisältö selain jättää huomiotta;
    taulukon sisältöä (tekstiä tai kuvia) voidaan sisällyttää vain tunnisteisiin

    , joka antaa taulukolle otsikon. Otsikkoteksti menee tämän tagin sisään, jonka pitäisi olla tagin sisällä . Ja sillä ei ole väliä mihin kohtaan taulukon html-koodissa sijoitat tunnisteen . Lisäksi on sallittua käyttää enintään yhtä elementtiä samassa taulukossa ja sen pitäisi mennä html-koodi heti tagin jälkeen

    , selain näyttää edelleen otsikon taulukon yläpuolella ja keskittää sen. Mutta yleensä tunniste

    sijoitetaan heti avaustunnisteen jälkeen :

    Tämä on pöytä

    Solu 1.1	Solu 1.2
Solu 2.1	Solu 2.2

    Näyttö:

    Taulukon osiot

    Html-taulukko voidaan loogisesti jakaa osiin - osiin. Osioita on kolmen tyyppisiä:

    • otsikko-osio, joka sisältää otsikkosolut, jotka muodostavat taulukon otsikon;
    • runko-osa, joissa perustiedot sisältävät solut sijaitsevat;
    • valmistumisosio, johon yhteenvetotiedot sisältävät solut sijoitetaan.

    Taulukon otsikkoosio muodostetaan käyttämällä parillista tagia

    .

    Runko-osa luodaan pariksi liitetyllä tunnisteella

    . Yksi html-taulukko voi sisältää useita runko-osia, joten voit luoda rakennuspalikoita joihin ne voivat soveltaa yhtenäisiä tyylejä rekisteröinti

    Pääteosan muodostaa parillinen tunniste

    ja yhden säiliön sisällä voi olla vain yksi.

    Kaikkien näiden pariksi liitettyjen tunnisteiden on sisällettävä tunnisteet

    , jotka muodostavat vastaaviin osioihin liittyviä rivejä:

    Sarake 1	Sarake 2	Sarake 3
Solu 1.1	Solu 1.2	Solu 1.3
Solu 2.1	Solu 2.2	Solu 2.3
Tulos 1	Tulos 2	Tulos 3

    Taulukon solujen yhdistäminen

    On vielä puhuttava taulukoiden tärkeimmästä ominaisuudesta - solujen yhdistäminen. Attribuutteja käytetään yhdistämään useita soluja yhdeksi colspan Ja riviväli tunnisteet

    Ja	voi olla vain tagin sisällä
    Ja	; taulukon soluissa tulee olla ainakin jonkin verran sisältöä, muuten selain ei välttämättä näytä niitä ollenkaan, mutta jos jonkin solun täytyy olla tyhjä, se yleensä sijoitetaan rikkoutumaton tila(HTML kirjaimellinen); taulukko viittaa web-sivun lohkoelementteihin; Taulukon ja sen solujen koot riippuvat sisällöstä, ts. pöytä on venytetty leveyteen ja korkeuteen niin, että kaikki sopii; tehdään pieni sisennys yksittäisten solujen rajojen väliin sekä kunkin solun reunuksen ja sen sisällön väliin; otsikkosolujen teksti (th elementti) näytetään lihavoituna ja keskitettynä; Reunuksia taulukon ja sen solujen ympärille ei piirretä oletusarvoisesti. Taulukon otsikko Aloitetaan tunnistepari
    Ja	. Colspan-attribuutti määrittää vaakasuunnassa yhdistettyjen solujen lukumäärän ja pystysuunnassa yhdistettyjen rivien lukumäärän: 1.1 1.2-1.3 2.1 2.2 2.3 3.1-4.1 3.2 3.3 4.2 4.3 Esimerkkitulos: 1.1 1.2-1.3 2.1 2.2 2.3 3.1-4.1 3.2 3.3 4.2 4.3 Kun yhdistät soluja, on tärkeää tarkistaa kunkin rivin solujen määrä varmistaaksesi, ettei virheitä ole. Kyllä, suunnittelu	korvaa kaksi solua, joten sisään seuraava rivi tunnisteita pitäisi olla kaksi		, tai sama malli! Jos solujen määrä kaikilla riveillä ei täsmää, näkyviin tulee tyhjiä ylimääräisiä soluja. Esimerkki väärä html-koodi kun yhdistetään soluja: solu 1.1 solu 1.2 solu 2.1 solu 2.2 Ja tulos näkyy selaimessa: Nuo. Jos analysoit html-koodia, huomaat, että ensimmäisellä rivillä on kolme solua, joista kaksi yhdistetään käyttämällä colspan-attribuuttia, ja vain kaksi solua lisätään toiselle riville. Siksi toiselle riville ilmestyy kolmas tyhjä solu. Tunnisteen attribuutit Tässä viestissä olemme jo kohdanneet yhden tag-attribuutin . Bord-attribuutilla, joka määrittää reunuksen paksuuden pikseleinä. Oletuksena se on 0 ja siksi solut näytetään oletusarvoisesti ilman reunusta. Bord-attribuutin lisäksi tagilla on useita muita tärkeitä attribuutteja . Katsotaanpa niitä. Attribuutti kohdistaa-sarjat vaaitus taulukot sivulla. Voi ottaa arvot vasemmalle, keskelle, oikealle, jotka asettavat kohdistuksen vasemmalle, keskelle ja oikealle. Oletusarvot vasemmalle. Attribuutti tausta, mikä asettaa taustakuvan pöytään. Ottaa arvokseen kuvatiedoston osoitteen. bgcolor-sarjat taustaväri taulukoita. Voidaan käyttää tausta-attribuutin kanssa. Attribuutti reunuksen väri sarjat kehyksen väri taulukoita. Cellpadding- päättää solun reunan ja sen sisällön välinen etäisyys. Voit parantaa taulukon luettavuutta. Arvo voi olla mikä tahansa positiivinen luku. Soluvälit-sarjat välinen etäisyys ulkorajoja soluja. Puhutaanpa tästä miten taulukko lisätään html-sivu Lopetan vain yhteenvedon: tageja käytetään taulukon lisäämiseen — taulukon nimi, - rivin lisääminen ja , täydennysosio ja runko-osa - ; solujen yhdistämiseen käytämme tag-attribuutteja - solun lisääminen; taulukko on web-sivun lohkoelementti; solujen sisältö voi olla tekstin lisäksi myös kuvia ja muita taulukoita; taulukko voi sisältää kolmen tyyppisiä osioita: otsikkoosio - jänneväli ja riviväli. Siinä kaikki, seuraavassa viestissä puhun navigointityökaluista html-sivustolla. Tilaa blogipäivitykseni, jotta et menetä tätä postausta! Siinä se, nähdään taas! Lisää tästä aiheesta: Lataa Driver Sweeper – ohjelma ajurien poistamiseen käyttöjärjestelmästä Windows Lataa ohjelma kortin ajurien poistamiseen Heittää Sniper Elite V2:n työpöydälle Mitä tehdä, jos sniper elite 3 viivästyy Etsitään vastaavaa kuvaa Internetistä Muut artikkelit: Tehokkaimmat älypuhelimet Top 10 tehokkain puhelin Nykytekniikan avulla on mahdollista sovittaa teho ja suorituskyky tavalliseen älypuhelimeen... Kuinka poistaa sivu ja tili maailmassani Tapahtuu, että henkilö rekisteröitymisen jälkeen ymmärtää, että tämä sosiaalinen verkosto ei ole häntä varten ja haluaa... Kuinka poistaa Avast tietokoneeltasi, jos sitä ei voida poistaa Nyt tarkastelemme kuinka poistaa Avast niin, että virustorjuntaohjelman poistamisen jälkeen tietokone ei... Nokia Lumian yhdistäminen tietokoneeseen Ensimmäistä kertaa artikkelit ja Lifehacks voivat tuottaa pettymyksen kaikille, jotka ovat äskettäin ostaneet tämän matkapuhelimen... × Sivustohaku Luokat ×