Létrehozása és tervezési táblázatok

A közelmúltban, a népszerűsége az asztalok hihetetlenül magas, akkor már nem csak a táblázatos adatok, hanem volt az elsődleges eszköz a kialakulását a dokumentum szerkezetét (annak ellenére, hogy bizonyos hiányosságokat). Jelenleg a dokumentum elrendezése egyre gyakrabban használják a blokk DIV elem.

Táblázat ugyanaz marad HTML nyelvi elem, amely nélkülözhetetlen a megteremtése komplex struktúrák bemutatása táblázatos adatokat, ahol blokk tagjai tehetetlenek, és nem rendelkeznek ilyen változékonyság.

A táblázat alapján

Táblázat egy összetett szerkezet, és úgy van kialakítva több HTML. Az első szakaszban van kialakítva tömbelem

. amely az alapja, a táblázat alapján. A következő lépés az épület - egy sort a táblázatban. amelynek előállításához egy pár címkék :

  • - tag pár létrehoz egy sejt, amely arra szolgál, mint az oszlop fejlécében, a címke nem kötelező;
  • - kötelező tag pár létrehoz egy sejt - az alapja az asztalra;

Ahogy az a kód felett található táblázat tartalmazza négy sort () És öt oszlopot. A sejteket az első sor - oszlopfejlécek (). Mivel a második, harmadik és negyedik sor sejtek tartalmaznak alapadatokat táblázat (). címkék , sokoldalú, és nem csak a sima szöveget, hanem mindenféle címkék akár más asztaloknál!

Ügyeljen arra, hogy a szerkezet a tábla, hogy van egy szigorúan hierarchikus beágyazott ha törni és átrendezheti a címkéket más sorrendben, az asztalon, vagy megjelenik az oldalon, vagy megjelenik, de nem helyesen. Az alapvető szabályok kialakítása a táblázat:

  • tag pár táblához, az összes többi tag is ágyazott meg;
  • tag pár
    • második szint asztal vagy egy string ágyazott tag
    ;
  • páros címkék
    • és tartalmaznak táblázatos adatokat;
  • Ha tegyen semmilyen más szöveg vagy tag a tag pár
    • és harmadik szint az asztal vagy a sejtek kell ágyazni a címke
    , Ezen adatok nem lesznek figyelembe véve, és nem jelenik meg a weboldalon;

    táblázat fejléc

    A táblázat a lehetőséggel, hozzátéve egy fejlécet egy páros tag

    . amely után kerül a címke . Elvileg lehet beilleszteni bármilyen helyzetben a táblázatban, ez nem hiba. Az alapértelmezett cím szöveg jelenik meg az asztal felett.

    Ábra. 2. A táblázat a címet.

    szakasz táblázata

    Használata szakaszokat, amelyek páros címkék táblázat osztható logikai részből áll. Ezek nem jelenik meg a böngésző oldalon, de a teljesítménye beállítható mindegyik. Három logikai részből áll:

    - Szakaszcímsorok oszlopok;
  • - táblázat bázisok szakasz;
  • - Szakasz összefoglaló adatokat összegezve az egész táblára;

    , , , helyezni egy asztal
    , és tartalmaznia kell címkék :

    Cellaegyesítéskor

    Az asztal fölött, egyszerű szerkezetű vizsgálta, és ha szükséges, bonyolultabbá tenni azt, például, hogy egyesítsen sejtek egy. Erre az esetre vannak speciális tulajdonságok és ColSpan RowSpan címkék

    ) Használata RowSpan attribútum értéke 2:

    Megjegyezzük, hogy ha cellákat egyesíteni vagy attribútumok ColSpan RowSpan, el kell távolítani a kódot egyesített cellákat, kivéve azt, hogy kezdődik az egyesület, a szám függ az attribútum értékét ColSpan, RowSpan.

    Azaz, az 1. példában, a négy sejteket egyesítjük, kezdve az első, amely hozzá van rendelve attribútum ColSpan = 4 (mivel kezd Association), a fennmaradó három el kell távolítani (mert egyesítjük). Csak egy ötödik sejt marad a kód (mert nincs benne az unió).

    Ugyanez az elv lesz az integráció a függőleges. A második példában az első négy sejtvonalak hozzárendelt RowSpan Képesség = 2, ami az első négy alsó sejteket eltávolítjuk a kódot, hiszen egységesek. Kivéve az utolsó, amely nem szerepel az unió.

    Ábra. 4. táblázat egyesítése sejtekbe ColSpan attribútumok, RowSpan.

    Így CSS táblázat tulajdonságai

    Miután létrehozott egy HTML táblázat segítségével, lépjen a következő lépésre, a készítményt az asztal CSS stílusokat alkalmazni címkék

    és . Az első arra szolgál, hogy összehozza vízszintesen, függőlegesen egy második. Value tulajdonság történt számos egyesített cellák:

    1. Össze első négy horizontális sejtek utolsó sorban az asztal, meg kell tulajdonítani tag ColSpan

    		(Mely tartalmazza a szöveg „Összesen 1”) értéket rendelni a 4:

    2. Össze sejtek függőlegesen fő dokumentum része (részben

    ,
    ,,
    .

    Kerete sejtek

    A keret a sejtek körül lehet levonni segítségével CSS tulajdonságok határon. A szintaxis a következő:

    • vonalvastagság - lehet beállítani, hogy a pixel (képpont), valamint a használó speciális fenntartott szavakat: vékony (2 px), közepes (4 px) és vastag (6 px);
    • Felirata típus - az attribútum értékét külön szó: pontozott (szaggatott vonal), szaggatott (pontozott vonal), jó (vonal), dupla (kettős vonal), stb

    5. ábra: Alkalmazás a táblázatban sejtek tulajdonságait átnyúló, keret minden egyes cella keretben.

    Ha szeretné, hogy a keret csak a sejtek közötti, nem keretezett mindegyiket külön-külön, akkor kell használni a stílus tulajdonságait border-összeomlás. a következő értékeket:

    • collapse - frame sejtek között csak az egyik;
    • külön - minden egyes cella szegélyezik saját keretet;

    6. ábra alkalmazásával az asztal tulajdonságok border-összeomlás. Szomszédos cellák vannak elválasztva, egy keretet.

    cellák méretét

    Az alapértelmezett méret a sejtek, a böngésző formák, attól függően, hogy azok tartalma, ha ez szükséges, hozzanak egy statikus formában használja a stílus tulajdonságait szélesség, magasság. Ebben az esetben, ha a tartalmuk nem kerül egy sorba, akkor bekövetkezik a következő transzfer.

    7. ábra Alkalmazás tulajdonságai szélességét és magasságát, hogy adja meg a szélessége és magassága a sejtek.

    Padding a sejtekben

    Kétféle külső és belső behúzás, az első behúzás fajta között a határok a szomszédos sejtek a második cellaszegélyek azok tartalmát. CSS tulajdonságok francia alább:

    • padding - belső bemélyedés van beállítva pixel (képpont);
    • határ-térköz - a külső behúzás érték van beállítva, mint a pixel (képpont). Ez az opció nem használható, ha a Behúzása telepítve közötti a határokat a szomszédos sejtek, de csak egy keretben vannak elválasztva a jelenlétében azt tulajdonságainak szomszédos cellák;

    Ábra. 8. táblázat Alkalmazás tulajdonságok padding, hogy margót.

    Hely cím

    Alapértelmezésben a táblázat fejlécében található fölötte, de a hely helyzete megváltoztatható a stilisztikai tulajdonságait képaláírás-oldalon. amely úgy az értékeket:

    • top - fejléc található a táblázat felett;
    • alsó - a fejléc alatt található az asztal;

    színes sejtek

    Festeni egy cella egy bizonyos színt kell használni az ingatlan background-color:

    Ábra. 9. Az a cella ingatlan háttér színét.

    Összehangolása cella tartalmát

    Összehangolni a tartalmát a vízszintes és függőleges cella esetén használják a következő stílus tulajdonságok:

    • text-align - vízszintbeállításán cella tartalmának veszi értékek balra, középre, jobbra;
    • vertikális-align - függőleges igazítás a tartalom. Értékek: felső, középső alsó;

    Ábra. 10. Illessze cella tartalmát tulajdonságok text-align és vertical-align.

    Regisztráció a cella tartalmát

    Az tartalmát tervezés megértette a formázás szöveg található a sejtekben. Fő CSS tulajdonság használható erre a célra egy font:

    Ábra. 11. Regisztráció A cella tartalmát font tulajdonság.

    Minden CSS stílusokkal az asztalra

    lásd még