Taulukko - yksi tärkeimmistä, mutta samalla monimutkainen tekijää, joiden on oltava läsnä verkkosivuilla. Niiden avulla on kätevää soveltaa tärkeitä ja hyödyllisiä tietoja melko tiivistetyssä muodossa. Tietenkin suurin toimitukselle malleja, työskentelevät eri moottoreita, automaattisesti lisätä taulukon sivustollesi tai erillinen julkaisu, mutta mitä jos web design resurssi, sen sivuja on luotu tyhjästä? Sitten noviisi isäntä voi saada ongelman: miten tehdä taulukon HTML. Katsotaanpa, miten nopeasti ja oikein luoda kohteen.
Valitse editori
Ensinnäkin alkavat luoda taulukon, kannattaa määritellä editorin, jossa voit työskennellä. Tietenkin helpoin tapa valita ohjelma, jossa luot perus sivuston koodia. Mutta se on parasta käyttää tähän tarkoitukseen vanhoja hyviä Muistioon.
Voit kysyä, miksi mutkistaa elämääsi, koska jos teet kaiken oikein editorin, niin tulos on nähtävissä heti, myös ja jopa kysyy ohjelma käyttää.
Kyllä, se on totta, mutta luoda taulukon tyhjästä, et vain voi tutkia perusteellisesti periaatteen perustamisestaan, mutta myös estää kiusallista kirjoitusvirheitä ja virheitä taustalla koodi. Joskus käy sattumaa, että kursori siirretään alas, ja kirjoittamassa koodia virheellisesti hiipii, joka on joskus vaikea löytää. Taulukon muodostamista muistikirjan, voit kopioida koodi ja liitä oikea paikka sinulle.
Algoritmi luoda taulukon
Aluksi pitää lyhyt algoritmi, miten tehdä taulukon HTML. Tarkoituksena on varmistaa, että ymmärrät järjestyksessä kunkin vaiheen. Sitten analysoida tarkasti, kuinka suorittaa jokaisella tavaralla.
Aloitetaan valmistelutoimien.
1. Vedä kaavamaisen paperille taulukko kuvaa.
2. Laske rivien ja soluja. Jos useita eri menneisyys - ajattele jokaisen ryadochka erikseen.
3. Määrää rivin otsikon soluja (esimerkiksi, «№» solu, "Nimi" ja t. D.).
4. Kirjoita tärkeimmät parametrit taulukon - väri, korkeus ja leveys, tekstin tasausta - lyhyesti sanottuna kaiken, mitä näyttävät kunnossa.
Sitten mene suoraan luomiseen taulukossa:
1. Aseta tunnisteet taulukosta.
2. Aseta tunnisteet rivien määrän perusteella, että tarvitset.
3. rivit lisätä tunnisteita solujen (normaalit ja isoja), myös sen perusteella, määrä, joka on tallennettu paperille.
4. Aseta parametrit koko pöydän.
5. Jos haluat asettaa parametrit yksittäisten solujen.
6. Täytä meidän solussa tekstiä.
luoda taulukon
Joten, voit valita editori, nyt Katsotaanpa miten luoda taulukon HTML. Tunniste, joka mahdollistaa pöytä (
) työnnetään sivun koodi on pariksi, eli meidän rakentaminen alkaa tämän tunnisteen ja päättyy .
Asettaminen tunnisteet taulukon, siirry luoda rivejä ja soluja.
Nyt toteamme, että nämä elementit ovat myös pariksi. Tag
määrittelee merkkijonon, ja | - soluja.
Ylemmän soluja tulisi käyttää pariksi elementtejä | .
Kuten jo mainittiin, ensimmäinen askel on piirtää viivan, sitten ne täytyy rekisteröityä soluun. Jotta sekaannusten välttämiseksi, on suositeltavaa tehdä mitään täyte kunkin lohkon rivi tai kaksi, tai muuten määrätä uuden lohkon osia käyttämällä "Tab" -näppäintä.
Miten se näyttää? Jotain tällaista:
- ;
-
; -
№ p / p ; -
nimi ; - ;
-
; -
| 1 | ; -
Ivanov ; - ;
- .
Kuten huomaatte, mitään monimutkaista siitä. Tärkeintä - älä eksy rivien ja soluja. Muuten taulukko kallistetaan.
Olemme puretaan luoda taulukon HTML, nyt voimme siirtyä parametreihin sekä Matrix ja sen rivit ja solut.
taulukon asetukset Kun koodi on kirjoitettu, on tarpeen kiinnittää huomiota seuraaviin seikkoihin: Yhdenmukaistamisen taulukon HTML, väri rajojen, tausta, tekstiä, ja niin edelleen.
Parametrit on määritelty taulukossa tag . Näitä ovat:
1. Raja - rajan leveys. Määritelty kokonaisluku. Oletusarvona kaikki taulukoiden reunat katoavat.
2. bordercolor - värin rajan. Sitä voidaan antaa heksaväriarvo (# 00008B), ja hänen nimensä angliykom (tummansininen). Oletuksena se on aina harmaa.
3. bgcolor - taustaväri. Määrittelemiä koodi tai nimi.
4. - tasaa tekstin taulukon. Oletus - vasemmalla. On seuraavat vaihtoehdot tämän parametrin:
- vasen - oikea pakkauksiin;
- -obtekanie oikealta vasemmalle;
- keskus - ulostulo taulukko keskellä ilman virtausta.
5. leveys ja korkeus - leveys ja korkeus pöydän. Se voi olla joko pikseleinä tai prosentteina (suhteessa selainikkunan kokoa).
Määrättäessä tiettyä indikaattoria, kannattaa kiinnittää erityistä huomiota suunnitteluun. Määrittämisen jälkeen parametri mennä merkki "yhtä", jonka jälkeen lainausmerkeissä osoittaa ennalta määrätyn arvon.
Mitä tekstin väri, niin laatia se samalla tavalla kuin tavallinen teksti HTML-muodossa.
Esimerkki taulukosta:
- ;
-
; -
№ p / p ; -
nimi ; - ;
-
; -
| 1 | ; -
Ivanov ; - ;
- .
parametrit riviä Siksi olemme jo tajunnut, miten tehdä taulukon HTML, ja määrätä sen tärkeimmistä muuttujista. Mutta mitä jos me tarvitse varata merkkijono? Tutustu hänen ei niin varsinaiseen pöytään?
linja parametrit on kirjoitettu tag samalla tavalla kuin tiedot taulukossa. Linja seuraavista muuttujista voidaan määritellä:
1. Jo tiedossa teille rajalle, bordercolor ja bgcolor.
2. - tasaa tekstiä riville. Se voidaan asettaa vasemmalle, keskelle ja oikealle.
3. valign - tagi tasaa tekstin pystysuunnassa. Se vie seuraavat arvot:
- top - teksti tasataan ylärajan;
- keski - keskellä;
- pohja - alareunassa.
Esimerkki linja puhdistuma:
-
; -
№ p / p ; -
nimi ; - .
parametrit solut Ja viimeinen asia mitä pitäisi kiinnittää huomiota niihin, jotka haluavat tietää, miten tehdä taulukon HTML - parametrien yksittäisten solujen, sekä normaalia että pääomaa. Itse asiassa kaikki tehdään samalla tavoin kuin taulukon tai rivi. Vain lisätty kaksi tärkeää seikkaa:
1. colspan - Tämä parametri määrittää sarakkeiden määrä, jonka solu voi ulottua.
2. rowspan - osoittaa jo rivien käytössä tämän solun.
Koska suunnittelu ei poikkea reseptiä linjalla, se ei johda mallikoodin.
tulokset Tee taulukko ei ole niin vaikeaa kuin se saattaa vaikuttaa ensi silmäyksellä. Tärkeintä kirjoittaessaan sen koodin - pitkäjänteisyyttä ja huomiota.
Mitä, miten lisätä taulukon HTML, niin sen koodinumero on tarpeeksi kopioi ja liitä se paikkaan sivusi, jossa, mielestäsi tulisi sijoittaa.
Älä pelkää kokeilla, ja pian olet täysin oppinut tekniikkaa luoda taulukoita. Onnea!
| |
| | | |
| | | |
|