4. fejezet.

Táblázatok html-ben

Az egyik legerősebb és széles körben használt HTML-alapok táblázatok. A táblázatos adatok prezentációjának fogalma nem igényel további magyarázatot. A HTML táblázatokat nemcsak hagyományosan, mint adatrekerációs módszerként használják, hanem a weboldalak formázási eszköze is. Példákat adunk olyan ténylegesen meglévő dokumentumokra, amelyekben a táblázatos nézet kényelmes módja egy dokumentum létrehozására. Ábrán. 4.1 Tipikus példát mutat a táblázatok használatára a sorok és oszlopok közötti numerikus adatok reprezentálásához. Ábrán. 4.2 A táblázat használata csak a dokumentum formázási objektumokat szolgálja fel, az oldalelemek kölcsönös helyét. Ha ilyen dokumentumot néz, akkor nem azonnal látható, hogy egy táblát használnak annak felépítéséhez, mivel a sejtek körüli keretek nem húzódnak.

A HTML nyelv első verziója nem nyújtott speciális eszközöket a táblázatok megjelenítésére, mivel főként egy egyszerű szöveg írására tervezték. A HTML-dokumentumok használatának fejlesztésével sürgős feladat lett az adatok benyújtásának, amelyekre számos sor és oszlop jelenléte jellemzően. Az oszlopokba igazított adatokat tartalmazó dokumentumok létrehozását először a szimulált szöveg segítségével végeztük, amelyen belül a szükséges illesztést a kívánt szóköz bevezetésével adták meg. Emlékezzünk vissza, hogy a szöveg a címkék párjában

ÉS

Monozine betűtípussal jelenik meg, és minden rések és fülek értelmesek. Az ilyen szöveg kiegyenlítő munkáját manuálisan végezték el, ami jelentősen lelassította a dokumentumok létrehozását. A táblázat támogatása Az adatok bemutatása a de facto szabványsá vált, mivel eredetileg minden vezető böngészőben valósult meg, és csak akkor, ha a HTML 3.2 specifikációban rögzítették.

A táblák létrehozásához speciális eszközök azonban nem törlik a szimulált szöveg használatát. A táblázatok használata nem korlátozódik a sorok és oszlopok adataira. Az egyik alkalmazás az oldal számos adatainak elhelyezkedésének megszervezése, amely egyszerű szövegből, képekből, egyéb táblázatokból stb. A táblák létrehozásának szabályai és a felhasználásuk példái.

Ábra . 4.1. A HTML táblázat tipikus példája

Ábra . 4.2. Mintaasztal keretek nélkül

A legegyszerűbb HTML táblák létrehozása

Fontolja meg először a címkék és paraméterek minimális készletét, szükséges és elegendő az egyszerű táblák létrehozásához, majd továbblépjen a részletes leíráshoz.

A táblázatok leírása a dokumentumszakaszon belül kell lennie . A dokumentum tartalmazhat tetszőleges számú táblázatot, és az asztalok fészkelője megengedett egymásnak. Minden táblázatnak címkével kell kezdődnie

És véget ért a címkével. Ezen címkékben található a táblázat tartalmának leírása. Bármely táblázat egy vagy több vonalból áll, amelyek mindegyike adatot ad az egyes sejtek számára.

Minden sor kezdődik (Asztal sor), és véget ért a címkével. A karakterláncban egy különálló cellát egy címkével keretezik és (Táblázatadatok) vagy és (Asztali fejléc). Címke Általában az asztalfejlécsejtekhez és - adatsejtek esetében. A használat különbségei csak az alapértelmezés szerint használt betűtípus típusát tartalmazzák, hogy megjelenítsük a sejtek tartalmát, valamint a sejten belüli adatok helyét. A típusú sejtek tartalma Megjeleníti a merész (félkövér) betűtípust, és a központban található (Align \u003d Center, Valign \u003d Közép). Címke sejtek Alapértelmezés szerint a bal oldali beállítások megjelenik (Align \u003d Balra) és középen (Valign \u003d középen) a függőleges irányban.

Címkék és nem jelenik meg az asztal sorának leírásán kívül . Befejező kódok, és Elhagyható. Ebben az esetben a karakterlánc vagy a sejt leírásának vége a következő sor vagy sejt kezdete, vagy az asztal vége. Befejező asztali címke Nem lehet elhagyni.

A táblázatban lévő sorok számát a nyitó címkék száma határozza meg , és az oszlopok száma - a maximális szám vagy Minden sor között. A sejtek egy része nem tartalmazhat semmilyen adatot, az ilyen sejteket a következő címkék párja írja le - , . Ha bármely karakterlánc végén egy vagy több sejt nem tartalmaz adatokat, akkor a leírásuk elhagyható, és a böngésző automatikusan hozzáadja a szükséges mennyiségű üres cellákat. Ebből következik, hogy az olyan táblák építése, amelyekben különböző stroke-ban vannak különböző számú azonos méretű oszlopok, nem megengedett.

Az asztalnak van egy címe, amely pár címke és. Leírás A táblázat fejlécének a címkékben kell lennie

és Bárhol, azonban a címkék bármelyikének leírásán kívül , vagy . A HTML nyelvi specifikáció szerint a leírás leírása szigorúbban a címsorok: közvetlenül a címke után kell elhelyezni és az első előtt . Javasoljuk, hogy tartsa be ezt a szabályt.

Alapértelmezés szerint az asztalfejléc szövege fölött van (Align \u003d Top), és vízszintes irányba helyezkedik el.

A felsorolt \u200b\u200bcímkéknek paraméterei lehetnek, amelyek száma és értékei eltérőek. A legegyszerűbb esetben azonban a címkéket olyan paraméterek nélkül használják, amelyek elfogadják az alapértelmezett értékeket.

Ez az információ elég elég ahhoz, hogy elemi táblákat készítsen. Adunk példát a két sorból és két oszlopból álló legegyszerűbb asztalra, amelynek kijelzője az 1. ábrán látható. 4.3.

Cell 1 sor 1	Cell 2 sor 1
Cell 1 sor 2	Cell 2 sor 2

Ábra. 4,8 Példa a legegyszerűbb asztalra

Táblázat megtekintése az oldalon

Tekintsük a különböző paraméterek hozzárendelését, amelyek a táblázatok leírása címkékben használhatók.

Táblázat címe

Tag fejléc asztal Egyetlen megengedett illeszkedési paraméterrel rendelkezik, amely elfogadja a nyomatékértékeket (az asztal feletti címet) vagy alsó (cím alatt). Az igazítási paraméter kihagyható, ami megfelel az Align \u003d tetejének értékének. Vízszintes irányban a táblázat címe mindig a központjában található. Előfordulhat, hogy az asztalnak nincs fejlécje. A táblázat fejlécjeként a legtöbb esetben egyszerű szöveget használnak, amelyet a HTML specifikáció szabályozza, de a címkék közötti valóságban és Látható a részben használt HTML elemek rögzítéséhez . Adunk példát a táblázat címjegyzékére:

Cím, amely a fiú alján található

Ha ez a fejléc leírása hozzáadódik a fenti példához, akkor a táblázat megjelenik az 1. ábrán látható módon. 4.4.

Ábra. 4.4.Táblázat címmel

A Microsoft Internet Explorer Browser további funkciókat tartalmaz a cím helyének kiválasztásához. Az Align paraméter lehetővé teszi a bal, a középső és a megfelelő értékeket a vízszintes igazításhoz, valamint a fent leírt értékek mellett. Ne feledje, hogy ez az egyik ritka eset, amikor az igazítás széles körben elterjedt paramétere vízszintes beállításhoz és függőleges lehet. Például a rekord align \u003d jobbra biztosítja a cím elrendezését a jobb oldali és az asztalra helyezve. Ha Align \u003d alsó, akkor ugyanaz, mint a fenti példában, a cím az asztal alatt található. Azonban a kettős használat az igazítási paraméter egy címében elfogadhatatlan. Ezért a függőleges illesztés speciális paramétere is bevezetésre kerül - Valign, amely a nyomatékértékeket vagy az alját veszi. Például a cím, amely a táblázat alján helyezkedik el, balra, a leírásnak a következő űrlapja van:

A cím, amely az alján található, a bal oldali igazítással

A Microsoft Internet Explorer cím szerinti táblázat a következőképpen jelenik meg (4.5. Ábra). Ha ezt a példát Netscape-ban tekintjük meg, akkor a cím alapértelmezés szerint helyezkedik el, azaz az asztalnál és a közepén vízszintes irányban.

Ábra. 4.5. Vízszintes igazítás táblázat táblázat böngésző Microsoft Internet Explorer

Vízszintes igazítási képesség A táblázat fejlécje a HTML specifikáció kiterjesztése, amelyet a Netscape Navigator böngésző nem támogat, ezért csak szélsőséges szükségletűek.

Tag paraméterek

A táblázatok létrehozásakor alkalmazott főcímke a címke

. Számos paraméterrel használható, amelyek mindegyike megengedhető. A megengedett paraméterek sorozata a böngészőtől függ. A címke HTML specifikációja szerint A következő paraméterek használhatók: határ, cellspacing, cellpadding, szélesség, igazítás. A Netscape Imicrosoft Internet Explorer böngészők a következő öt paraméter mellett engedélyezettek a magasság és a bgcolor paraméterek használatához. Különálló böngészők lehetővé teszik más paraméterek megadását is. Tekintsük a gyakran használt címke paramétereinek kinevezését .

Határparaméter

A határparaméter kezeli az egyes cellák körüli keret képét, amely valójában a vonalrácsvonalakat és az egész asztal körül adja meg. Az alapértelmezett keretek nincsenek rajzolva, és a képernyőn a felhasználó csak pontosan meg fogja látni az asztali sejtek szövegét. Számos olyan helyzet van, ahol a keret nélküli táblázatok használata teljesen indokolt, például a táblázatok segítségével végrehajtott multinkount listákhoz, vagy a rajzok és szöveg pontos kölcsönös helyzetének beállítása. Azonban a legtöbb esetben a táblázatok hagyományos használatához a sejtje hasznos a rácsvonalak egymástól elkülönítve, ami megkönnyíti a táblázatban szereplő információk észlelését és megértését.

A keret táblázathoz való hozzáadásához engedélyeznie kell a kódot

A határparaméter, amelynek numerikus értéke lehet.

Például,

vagy .

A paraméter numerikus értéke meghatározza a keret vastagságát a teljes asztal körül húzódó pixelekben, de ez nem befolyásolja az egyes sejtek körüli keretek vastagságát. Numerikus érték hiányában általában megegyezik a minimális értékkel (1), bár különböző böngészők esetén a keretkijelző stílus különbözhet. Hiányzik az egész asztal körüli keretének független ellenőrzésének lehetőségét, és a sejtek körüli képkockák hiányoznak.

A 10 képpontos vastagságú táblázat egy példáját mutatja be. 4.6.

Ábra. 4.6.Táblázat keretvastagsággal 10 pixel

A HTML 3.0 specifikáció nem tartalmazta a határparaméter értékét. Ez csak a HTML 3.2-ben történik. Tehát különösen a Microsoft Internet Explorer korai verziói nem engedélyezték a numerikus érték beállítását.

Ne feledje, hogy a határparaméter hiányában a keretek nem húzódnak, de az alatta vannak (ez csak a Netscape-ra vonatkozik). A táblázat teljes mérete a határparaméter hiányában vagy jelenlétében nem változik (a kivétel a feladat határának esete \u003d 0). Így a két szomszédos sejt közötti minimális távolság ezen esetekben megegyezik a keret vastagságának kettősségével, azaz két képponttal. Keresse meg a sejteket a lehető legközelebb egymáshoz. Lehetőség van a Border \u003d 0 feladatra, ami egy keret hiányát jelenti. Egyes böngészők nem támogathatják a határparaméter numerikus értékének feladatát, majd a nulla értéket figyelmen kívül hagyják, és a táblázatot a keretekkel fogják rajzolni.

Adunk néhány példát:

Mind a három fent említett Netscape böngésző másképp jelenik meg. Ne feledje, hogy itt van egy meglehetősen egyedi eset, ha nem tudsz beszélni az alapértelmezett értékről. A harmadik példa, amelyben a határparaméter kihagyott, eltér a példától, ahol ez a paraméter jelen van. A Microsoft Internet Explorer esetében a második és a harmadik példa azonosak, ezért ehhez a böngésző esetében a határparaméter alapértelmezett értéke nulla.

Cellspacing paraméter

A paraméter felvételi formája: cellspacing \u003d NUM, ahol NUM a paraméter numerikus értéke olyan pixelekben, amelyeket nem lehet elhagyni. A NUM érték határozza meg a szomszédos sejtek közötti távolságot (pontosabban a sejtek közötti sejtek között) vízszintesen és függőlegesen. Alapértelmezés szerint az érték kettővel történik. Ne feledje, hogy hagyományosan közzétételi rendszerek a táblák szomszédos sejtjei közös határa van. HTML táblákban az alapértelmezett hely a köztük marad, amely jól látható a fenti ábrán (4.6. Ábra). A CellSpacing \u003d 0 kerete a szomszédos sejtekből, a táblázat egyenletes táblázata kerül létrehozásra és létrehozásra (4.7. Ábra).

Ábra. 4.7.Táblázat Cellspacing \u003d 0

Cellpadding

A paraméterfelvételi űrlap hasonló a Cellspacinghez. A NUM érték meghatározza a szopás (francia bekezdés) méretét a sejtkeret és a sejt belsejében lévő adatok között. Alapértelmezés szerint az érték egyvel egyenlő. A cellpadding paraméter nullára történő beállítása arra a tényre vezethet, hogy a sejtszöveg egyes részei megérinthetik a keretét, ami nem nagyon esztétikus.

Ábrán. 4.8 A táblázat példáját mutatja a cellpadding értékével \u003d 10.

Ábra. 4.8.Táblázat cellpadding \u003d 10

A cellpadding és a cellspacing paraméterek nagyon hasonlítanak egymáshoz. A keretek nélküli táblázathoz az egyik vagy másik paraméter ugyanazon az eredményhez vezet. Mindkét paraméter egyidejűleg és függőlegesen befolyásolja a megfelelő francia bekezdéseket. Sajnos, a vízszintes és a függőleges visszavonulások külön szabályozása, például a képek (paraméterek hspace és vspace címke) ), nem biztosított.

Mindhárom paraméter - határ, a cellpadding és a cellspacing egymástól függetlenül jár el, ha bármelyikük elhagyásra kerül, akkor az alapértelmezett értéket elvégezzük. Különösen, ha az összes felsorolt \u200b\u200bparaméterek elhagyása, a szomszédos sejtek adatai közötti minimális távolság 6 pixel (a Netscape esetében). Ez az érték két pixelből áll a cellpacing, az egyik pixel a cellpadding és egy pixel az egyes sejtek. A legtöbb kompakt táblát a következő leírás feladatával kapja meg:

Csak ebben a változatban találhatók egymáshoz közel. Példa egy asztal használatára, amelynek minden sejtje azonos méretű rajzokat tartalmaz, amelyeket egymás mellett kell elhelyezni.

Szélesség és magasságparaméterek

Amikor megjelenik az asztalok, szélességüket és magasságukat automatikusan kiszámítja a böngésző, és számos tényezőtől függ: a táblázatban megadott teljes dokumentum leírásában megadott paraméterértékek, az egyes sorok és sejtek, a sejtek tartalma , valamint a dokumentumok egy másik böngészőben történő megtekintése során megadott paramétereket, például a betűtípus típusát és méretét, a megtekintési ablak méretét stb. Figyelembe véve ezeket a tényezőket, a kísérletet a legkényelmesebb módon kell benyújtani - az asztal elhelyezése, hogy az elhelyezés és a megtekintés ablaka. A nagyméretű dokumentumok általános megtekintési rendszere, mint általában a vertikális dokumentum tartalmának lineáris görgetésébe és a különböző táblázatok, képek, stb. Által értelmezett szöveg olvasása. Ez vonatkozik mind a HTML-dokumentumokra, mind a bármilyen szövegszerkesztő. A legtöbb szövegszerkesztő (például a Microsoft Word) és a HTML böngészők automatikusan formázza a szöveget úgy, hogy (ha lehetséges) úgy, hogy a karakterlánc hossza ne lépje túl a megtekintési ablak szélességét. Ezzel elkerülhető, hogy szükség van a dokumentum vízszintes görgére. Hasonló műveleteket készítenek böngészők asztalokkal - ha lehetséges, formázzuk őket oly módon, hogy a táblázat szélessége ne haladja meg a megtekintési ablak szélességét. Megállapítható, hogy az asztalok szélessége fontosabb, az elsődleges paraméter, amelynek számítása elsősorban a magassághoz képest történik.

A legtöbb esetben a táblázat mérete dinamikus definíciója esztétikailag arányos képet ad a megtekintési ablak valódi nézetének hatékony használatával. Azonban erőteljesen meg kell határozni az asztal szélességét vagy magasságát. Ebből a célból szélességi paramétereket használnak (asztali szélesség) és magasság (asztali magasság) címke

. Felvételi formanyomtatvány: szélesség \u003d Num vagy Width \u003d Num%, ahol Num a teljes asztal szélességének numerikus értéke, vagy a teljes ablakméret százalékában. Ne feledje, hogy megengedhető, hogy értékeket, nagy 100% -ot állíthatunk be, bár nehéz elképzelni azt az esetet, amikor szükséges. Példa:

.

Hasonló paraméterek állíthatók be az egyes sejtekhez. Ne feledje, hogy a paraméter konkrét értékének beállítása, például a szélesség \u003d 200 nem jelenti azt, hogy a táblázat minden esetben megadja a megadott szélességet, de csak az ajánlott szélességet határozza meg, amely lehet, ha lehetséges. Magyarázd el a példákon. Tegyük fel, hogy van egy asztal, amely ebben a körülmények között alapértelmezés szerint szélessége kisebb, mint a megadott. Ebben az esetben a böngésző növeli az asztal szélességét a táblázat összes oszlopának arányos bővítésével. Ha a megtekintés ablak szűkül, az asztal szélessége nem változik, és szükség lehet vízszintes görgetésre. Ha az alapértelmezett táblázat szélessége nagyobb, mint a megadottnál, akkor a böngésző megpróbálja csökkenteni a szélességét, először is csökkenti az egyes oszlopok szélességét, amelyekre a megadott szélesség nagyobb, másrészt a szöveg elválasztása különálló sejtekben több sor növeli az asztal magasságát. Ezek a műveletek nem biztosítják a kívánt táblázatot, majd a minimális szélességet kapják. Ugyanazok a műveletek készülnek olyan táblázatok esetében, amelyek nem adják meg a méreteket, amikor a megtekintés ablak szűkült.

A különböző böngészők specifikus táblázatkonfigurációs algoritmusai kissé eltérhetnek.

Paraméter igazítása

Ez a paraméter címke

Megadja a nézetablakban lévő táblázat vízszintes helyét. Érvényes értékek - balra (balra) és jobbra (jobbra igazítás). Alapértelmezés szerint a táblázat a bal szélen áll. Ne feledje, hogy a megengedett értékek között nincs tipikus érték az igazítási paraméter-központ számára. A HTML nyelv egyes forrásaiban a központ (középen) ebben az esetben megengedett. Ez megfelel a HTML specifikációnak, de a gyakorlatban és a Netscape Navigatorban, és a Microsoft Internet Explorer csak két értéket valósít meg. Az a tény, hogy az igazítás paraméter jelenléte a címkén Nemcsak határozza meg az asztal helyét, hanem lehetővé teszi, hogy az asztal körül áramolhassa az asztal körül az ellenkező oldalról, hasonlóan a képek egyszerűsítéséhez. Az asztal körüli áramlást mindkét oldalon szöveggel semmilyen esetben nem tervezett. A pontosabb áramlási menedzsmentnek címkét kell használnia
a tiszta paraméterrel, valamint az elvégzéssel történik . Ha az Align paraméter elhagyása, a táblázat jobb és / vagy bal oldalán található hely mindig üres lesz a szélességétől függetlenül. Ha a táblázat nem igényel szövegáramlást, akkor elérheti a helyét a megtekintési ablakban. Ehhez például egy táblázat leírást készíthet a címkék párjában. és.

Adunk példát egy táblázatra folyó szöveggel, amelynek kijelzője az 1. ábrán látható. 4.9.

felnőtt

st. Petersburg lakossága

Abram Sándor Alexei Albert. Anatoly András Arkady Boris. Vadim. Szerető Valérium Bazsalikom Győztes Vitaly Vladimir Vladislav. Vyacheslav Fenády Georgy. Hermann Kegyetlen Dmitriy

Evgeny Efim Ivan. Igor Il ya Joseph Konstantin egy oroszlán Leonid Michael Nikolai Oleg Pavel Péter Regény Sperma Sergey Stanislav Edward Yuri. Yakov

Meghatározott 43 A leggyakoribb nevek a minta 92% -át fedik le.

Ábra. 4.9. Táblázat keretek nélküli szöveggel

Ez a dokumentum tartalmaz egy táblázatot nélküli keretet align \u003d left igazítás paraméter, amely lehetővé teszi, hogy a szöveg az alábbi táblázat szerint a jobb oldalon. A táblázat csak egy vonalból áll, amely két cellát tartalmaz. Minden sejt tartalmaz egy nem mért listát.

. A lista kimeneti táblázat használata a lista egyik módja több oszlopban, amely szintén illusztrálja ezt a példát. Az asztal jobb oldalán található szöveg nem illik mindent, és az asztal után folytatódik. Próbálja meg ezt a példát, hogy csökkentse a böngésző megtekintési ablakának szélességét, és valamikor az összes szöveg az asztal alján lesz. Emlékezzünk vissza, hogy a szöveg áramlásának kényszerített megszakítása az asztal mentén (például, ha a későbbi szöveg nem logikusan kapcsolódik az asztalhoz, és az alatta kell lennie) a kóddal kell használni
A CLEAR paraméterkészlet segítségével. Ehhez a példához rögzíteni kell
vagy
. Bizonyos böngészők lehetővé teszik, hogy a világos paraméter értelme nélkül rögzítse, de ez nem ajánlott. Ugyanazt a feladatot, állítsa be a többsoros fordítást
A világos paraméter nélkül (amint azt a példában elvégzünk, mielőtt a szöveget több vonalra váltani) vagy az új bekezdés kezdetének több kódja

Érvénytelen döntés.

Enyhén más példát adunk egy hasonló oldal létrehozásához, amelynek kijelzője az 1. ábrán látható. 4.10.

A legtöbb gyakori ember neve

szentpétervár felnőtt lakossága

Abram Sándor Alexei Albert. Anatoly András Arkady Boris. Vadim. Szerető Valérium Bazsalikom Győztes Vitaly Vladimir Vladislav. Vyacheslav Fenády Georgy. Hermann Kegyetlen Dmitriy

Evgeny Efim Ivan. Igor Onyha Andokif Konstantin egy oroszlán Leonid Michael Hikolay Oleg Pavel Péter Regény Sperma Sergey Stanislav Edward Yuri. Yakov

Ezeket az adatokat a reprezentatív minta analízise alapján kapták meg, amely a 18 év feletti, a Szentpéterváron élő, mintegy 5000 embert tartalmazó információkat tartalmazott. A leggyakrabban tapasztalt 43 a minta 92% -a. Az egyes nevek előfordulási gyakorisága nem haladja meg a 0,3% -ot



Ábra. 4.10. Táblázat, három oszlopot tartalmazó keretek nélkül

Az előző példával ellentétben nincs olyan szöveg, amely az asztal körül áramlik. Az egész dokumentum egy asztalból áll, amely három sejtet tartalmazó fejlécet tartalmaz egy sorban. Az első két sejt teljesen megismétli az előző példát. A harmadik cellában van egy szöveg, amely megjegyzi az első két sejt tartalmát. Nincs szükség arra, hogy kényszerített szövegtörést állítson be, az előző esetben leírtak szerint. A táblázathoz kapcsolódó teljes szövegnek a harmadik cellán belül kell elhelyezkednie, és a következő szöveget - az egész asztal leírása után. Mindkét példa, amikor a teljes képernyőn megjelenik, ugyanúgy nézzen ki, kivéve a címet, amely az első esetben a kétoszlopos lista közepén található, a második pedig mindhárom asztal közepén található oszlopok. Azonban az utolsó példában a megtekintési terület csökkenése, a szöveg egyetlen része sem válthat az alábbi táblázatba, ezáltal megzavarja a szerkezetét.

Adatformázás az asztalon belül

Az asztalon belüli különálló sejtek független formázási területnek tekinthetők. Minden olyan szabály, amely a szöveges kijelző kezelésére irányul, használható szöveg formázásához a sejt belsejében. A sejt belsejében megengedett, hogy szinte minden olyan HTML elemet használjon, amely a dokumentum testében jelenik meg , beleértve a szöveg helyét kezelő címkéket -

,
,

---

, Headlock kódok -

előtt

, szimbólum formázási címkék<В>, , , , , , , Tegivestages hipertext linkek<А> és így tovább. Azonnal hangsúlyozzuk, hogy a különálló sejten meghatározott címkék hatóköre csak a végső címke jelenlététől függetlenül korlátozódik. Például, ha a szöveg színét a sejt belsejében határozzák meg , még ha nincs befejezési kód Vagy rendezzen több cellával vagy egy táblázat sorával, a következő sejtszöveg tükröződik az alapértelmezett szín.

Az asztali sejtek adatátvitelére a következő paraméterek vannak megadva.

A sejtek tartalmának igazításának tartalma igazodik és valut. Használható kódokban , és . A vízszintes igazítás paraméterének igazítása bal, jobb és középérték (alapértelmezett balra) és központja ). Valign Függőleges Alignment Paraméter Torus értékek (a felső szélén), az alsó (alsó szélén), a középső (középen), az alapvonal (az alapvonal alapján). Alapértelmezett - középső. Az alapvonal összehangolása biztosítja az egyes sejtek külön vonalának szöveges kötését egyetlen sorba. Állítsa be a szintezési paramétereket a kódszintre Meghatározza a vonal minden sejtjeinek összehangolását, míg a karakterlánc minden egyes sejtsejtjeit, azok paramétereit, amelyek újradefiniálják a megadott paramétereket .

Adjunk egy olyan táblát, amelyben az első oszlop sejtjeiben lévő adatok jobbra, a második oszlopra - a középpontba és a harmadik balra (alapértelmezett érték):

Cell 1.	Csalás 2.	Cell 3.
Yachika 4.	Cell 5.	Cell 6.

A példa böngésző megjelenítését az 1. ábrán mutatjuk be. 4.11.




Ábra. 4.11.Adatok összehangolása az asztaliejtekben

A MostRap paraméter letiltja azt a képességet, hogy automatikusan megosztja a cella szövegét a karakterlánchoz. Használható kódokban , és . Ennek a paraméternek indokolatlan alkalmazását el kell kerülni, mivel jelentősen csökkentheti a dinamikus változások lehetőségét a táblázatokban, és rontja az észlelésüket. A legtöbb esetben elég ahhoz, hogy alkalmazzák a Nowrap-ot az egyes sejtekre, amelyek valóban megkövetelik a szó átvitelének tilalmát egy új vonalra. A szóátvitel csak a szavak (szóközök) közötti elválasztókon történik, és egyes esetekben, hogy tiltsa le a szöveg szakadását külön helyeken, helyszíni szimbólum helyett, állítsa be a nemtörő űrkódot. Példákként vezethet olyan esetekben, amikor a rés nem ajánlott - a numerikus érték és az érték mérési egységei között; A vezetéknév és a kezdőbetűk között. Tehát a szöveg 650 km vagy Yeltsin B.n. Javasoljuk, hogy írjon formában650 km és Yeltsin B.n.

Szélesség és magasságparaméterek használhatók a kódokban és . A szintaxisuk hasonló a címkéhez szükséges paraméterek szintaxisához

. Értékük meghatározza a sejt szélességét vagy magasságát, amelyhez ezeket a paramétereket rögzítik. Az értékek pixelben vagy az egész asztal százalékában állhatnak be. A Microsoft Internet Explorer engedélyezi a szélesség értékét csak pixelben. Mivel az asztal a sorokból és oszlopokból álló csatlakoztatott szerkezet, a sejtek szélessége befolyásolja az egész oszlop szélességét, amelyben a sejt található, és a magasságfeladat befolyásolja az egész vonalat. Ha a szélesség értéke csak egy cellában van megadva, akkor ez az érték az egész oszlop szélessége lesz. Ha több ilyen jelzés van, akkor a maximális érték van kiválasztva. Ugyanazok a tulajdonságok jellemzőek a vonalakra.

A komplex táblák esetében az igényt úgy jellemezzük, hogy több szomszédos sejtet vízszintesen vagy függőlegesen kombinálunk. Ezt a funkciót a Colspan (Coliimn Spanning) és a Rowpan (Sor Spanning) kódokban hajtja végre

A beállítások e csoport egyedi oszlopaira vannak állítva. Ugyanakkor a címkén Szükség esetén az igazítási paraméterek meghatározhatók, amelyek értékei a csoport összes oszlopára kerülnek. A címkén megadott paraméterek értékei , újradefiniálja az értékeket a címkéből . Ne feledje, hogy a címkén Ebben a példában az előzővel ellentétben nincs span paraméter. Itt értelmetlen, mivel a csoport elemeinek számát a következő címke határozza meg Címkék . Ezért a Paraméter SPAN-címke bármely meghatározott értéke Felülbírálódik.

Ábrán. 4.17 A fenti kód végrehajtásának eredménye, valamint az ilyen táblázat szabályainak megjelenítésének lehetősége \u003d a címkék csoportjai

vagy

. Felvételi űrlap: Colspan \u003d Num, ahol NUM egy numerikus érték, amely meghatározza, hogy hány oszlopot kell kiüríteni az aktuális sejthez vízszintesen. A ROWPAN paraméter alkalmazása hasonló, csak itt határozza meg az aktuális függőleges cellát rögzítő karakterláncok számát. Alapértelmezés szerint az egyik értéke megegyezik ezekre a paraméterekre. Mindkét paraméter értékeinek megengedett egyidejű beállítása egy cellára. Ezeknek a paramétereknek az értékeinek helyes beállítása nem lehet nagyon egyszerű feladat, különösen mivel a legtöbb HTML szerkesztő vizuálisan elkészíthető a HTML-kódok későbbi generációjával, csak a legegyszerűbb táblázatokkal. Ábrán. 4.12 Megmutatja a következő HTML-kóddal kapott táblázat megjelenítését: Cella két vonalat rögzít Cell, addiktív két oszlop Cell 3. Cell 4. Cell 5. Cell 6. Cell 7. Ábra. 4.12. Táblázat, melyeket több sorot vagy oszlopot szaporítanak A sejtcsúszás paraméterek értékeinek figyelmen kívül hagyása kölcsönös átfedéshez és konfliktusokhoz vezethet, amelyekben az eredmény kiszámíthatatlan. A kiterjesztett sejtek jellemző használata számos szomszédos oszlop vagy vonalak megosztott fejléce. Adunk példát a HTML-kódra (amelynek kijelzője a 4.13. Ábrán látható), amelyben a kiterjesztett sejtek helytelenek. Cell 1. Cell 2. Cell 3. (Gyakori Ha három vonalak) Yachika 4. Cell 5. Cell 6. Cell 7 (közös két oszlopon) Ábra. 4.13.A kiterjesztett sejtek helytelen definíciójának eredménye (szövegbevezetés) A BGColor paraméter beállítja a teljes asztal színét, külön vonalakat vagy sejteket. Találkozhat a címkékben , , Nincs információ, vagy egy vagy több olyan szóköz, amelyet nem értelmeznek adatokként. A láthatatlan adatokat tartalmazó sejtek például kódot vagy sorfordítási kódot tartalmazhatnak , vagy bármely olyan szöveg, amelynek színe egybeesik a sejt háttér színével. Ha az adatokat tartalmazó sejtek (még akkor is, ha láthatatlanok) jelennek meg az összes böngésző ugyanolyan, akkor az üres cellák másképp jelennek meg. A Netscape böngésző nem üres cella, azaz az a hely, ahol ez a cella található, az oldal színes hátterével festjük, és nem a sejt háttér színét, ellentétben az adatokat tartalmazó sejtekkel. Az üres cellák körül ne rajzoljon egy keretet. Az üres cellával ellátott asztal egy példáját mutatjuk be. 4.15. Ábra. 4.15. Az üres asztali cella különböző különböző böngészőkben jelenik meg A Microsoft Internet Explorer és az ezek és más sejtek a sejtek hátterének színét jelenítik meg. Az ilyen böngésző, mint az NSCA Mosaic biztosítja a felhasználót, hogy meghatározza az üres asztaliejtek kibocsátásának jellegét a megfelelő opciók kiválasztásával. Az ilyen funkciók ismerete lehetővé teszi, hogy olyan táblázatokat fejlesszen ki, amelyek megfelelő módon jelennek meg, függetlenül a felhasználó által kiválasztott böngészőtől. Bizonyos esetekben elegendő olyan sejtek létrehozása, amelyek az egyetlen üres kódot tartalmazó egyetlen kód helyett tartalmaznak. Adatok összehangolása a táblázat oszlopaiban Jellemző probléma A táblák létrehozásakor az egyes sorok vagy oszlopok illesztési paramétereinek beállítása. Az aktuális vonal összes sejtjeinek tartalmának igazítása, elegendő a szükséges paraméterek beállításához a kódban . Azonban gyakrabban kell ugyanolyan összehangolást biztosítani egy oszlop valamennyi eleméhez, mivel a legtöbb esetben homogén adatok vannak az oszlopban. A HTML korábbi verzióiban javasolták a Colspec (oszlop specifikáció) paraméter használatára, amelyet a címkében beállítottak és . Ezt a funkciót a HTML specifikáció nem tartalmazza, azonban a Netscape és a Microsoft Internet Explorer támogatott. A felvételi űrlap megegyezik a címkével Nevezetesen: BGColor \u003d érték, ahol az RGB formátumban lévő színtartalom vagy annak neve értékként van beállítva. Példa: vagy . Beágyazott asztalok A táblázatok külön táblái szinte bármilyen nyelvi címkét és adatot tartalmazhatnak a szakaszban Dokumentum. Az asztali sejtek belsejében egy másik asztal teljesen elhelyezhető. Az ilyen táblákat beágyazották. Az építésük szabályai nem különböznek az asztalok megépítésétől, és nincs szükség külön leírásra. Csak azt vegye figyelembe, hogy nem minden böngésző, amely támogatja a táblázatokat, pontosan tükrözi a komplex táblákat, több fészkelési szinttel, így használatuk óvatosan kell eljárnia. Adunk egy példát egy olyan asztalra, amely egy fészket használ. Leningrad régió városai H - a város lakossága (eH., 1992) P - Távolság a St. Petersburgtól (km) Városok alárendelt Szentpétervárra Város H. P. Azta 13.6 50 Kallpino. 144.6 26 Kronstadt 45.2 48 Lomonosov 42.0 40 Kikövezett 25.4 30 Petrodvorets 83.8 29 Tollas 95.1 24 Sestroretsk 34.9 35 Minden város alárendelt adminisztráció Szentpétervár, van egyenes gopodkay televíziós számok. A regionális benyújtás városai Város H. P. Boksitogorsk 21.6 Align \u003d Jobb\u003e 245 Labda 50.3 Align \u003d Jobb\u003e 122 Bcew 32.9 24 Vyborg 80.9 130 Vysotsk 1.0 Align \u003d Jobb\u003e 159 Gatchina 80.9 46 Ivangorod. 11.9 Align \u003d Jobb\u003e 147 Kamennogorsk 5.9 157 Kingisepp 51.5 Align \u003d Jobb\u003e 138 Kirishi. 53.8 Align \u003d Jobb\u003e 115 Kirovsk 23.8 55 Lodeynoye mező 27.3 Align \u003d Jobb\u003e 244 Lyga 41.8 139 (Asztali folytatás) Város H. P. Lyuban 4.7 85 Új ladoga 11.2 Align \u003d Jobb\u003e 141 Otradnoye 22. 9 Align \u003d Jobb\u003e 40 Pikalevo 25.1 Align \u003d Jobb\u003e 246 Popping 23.1 285 Primorsk 6.7 137 Priozersk 20.5 Align \u003d Jobb\u003e 145 Svetogorsk 15.8 Align \u003d Jobb\u003e 201 Agyagpala 42.6 Align \u003d Jobb\u003e 192 Ananászültetvény 57.6 81 Tikhvin 72.0 Align \u003d Jobb\u003e 200 Tosno 33.8 53 W bárány 12.5 64 Ábra. 4.14.Példa a beágyazott táblákra A példa megjelenítésének eredményét az 1. ábrán mutatjuk be. 4.14. Első pillantásra úgy tűnik, hogy a példában nincs fészkelőasztal. Tény, hogy a teljes dokumentum olyan táblázat, amely nem rendelkezik keretrendszerrel, és egy fejlécből és csak egy 5 cellát tartalmazó karakterláncból áll. Az ilyen táblázat szervezése az egyetlen célt szolgálja - az oldal adatai helyét. Az első cellában van egy másik asztal, amelynek címe van, és három oszlopból áll, amely után a szöveg közepén kiegyenlített. A harmadik és az ötödik sejtek tartalmaznak egyedi táblákat is. A második és a negyedik sejtek üresek, nem tartalmaznak semmilyen adatot, és az egyetlen szélességi paraméter, amely meghatározza a szélességét. Kinevezése az első és a harmadik, valamint a harmadik és az ötödik sejtek között, amelyekben a táblázatok találhatók. Ez az egyik lehetséges lehetőség az ilyen francia bekezdés feladata. Egy másik lehetőség a cellspacing paraméter használata, amely meghatározza a sejtek közötti távolságot, de ez a paraméter egyidejűleg vízszintesen állítja be a bemélyedést, és függőlegesen, amely jelenleg nem szükséges. Ezenkívül egy üres sejttel előre meghatározott szélességgel, amikor a megtekintési terület szűkült, ellentétben a cellspacing paraméter (valamint a cellpadding) által megadott helyre. Próbálja meg ezt a példát, hogy csökkentse a megtekintési terület szélességét a böngészőben, vagy ami az eredményhez vezet, növeli a szöveg megjelenítésének méretét. Az asztalok közötti távolság nullára csökken, így lehetőséget ad arra, hogy a lehető legrövidebb időn belül megtekinthesse az összes információt, de a további változás nem vezet a táblázat vaddisznóhoz, és lehetővé teszi a vízszintes görgetés lehetőségét. Egy hasonló rendszer, akkor szervezheti meg az információk elhelyezését, amely nemcsak táblákból, hanem képeket, szövegfragmenseket stb. Az épületasztalok jellemzői Ez a rész az egyes böngészők bizonyos lehetőségét tárgyalja, valamint az asztali és megjelenítő táblázatok külön finomságait tárgyalja. Az üres cellák megjelenítése táblákban Az asztalok bemutatásának egyik jellemzője a különböző böngészők által az üres sejtek megjelenítése. A nyelv leírása szerint minden böngészőnek ki kell egészítenie az üres cellákkal rendelkező vonalakat, ha a számuk kisebb, mint a vonalak többi részében. Ezenkívül bárhol az asztalon olyan sejtek lehetnek, amelyek nem tartalmaznak adatokat. A láthatatlan adatokat tartalmazó üres sejtek és sejtek közötti különbség van. Üres cellákban egy pár címkékben és és meghatározta az egyes táblázatok oszlopának összehangolását és szélességét. Például az adatok táblázatos adatainak három oszlopához definiált Colspec \u003d "L40 R50 C80" beállítása a sejtekben: az első oszlophoz - balra, a második - jobbra és a harmadik központra, valamint a Minden oszlop szélessége. Mivel a HTML nyelvet fejlesztették ki, megtagadták ezt a paramétert, és most már nem szerepel a nyelvi specifikációban, és a legtöbb böngésző nem támogatja. Ennek eredményeképpen, hogy megoldja az ilyen feladatot a Netscape Navigator-ban, nincsenek speciális források, és az egyetlen lehetőség az alapértelmezett igazítással vagy az egyes cellák megfelelő értékeinek feladata marad, ahol szükséges. A Microsoft Internet Explorer speciális címkéket biztosít - és . Ezeket a címkéket azonnal el kell helyezni a leíráshoz. A címke első megjelenése előtt . Tag paraméterek és Lehet, hogy meghatározza a szomszédos hangszórók számát, amelyekhez a paraméterek és az igazítás értékeit alkalmazzák, amely meghatározza az adatok horizontális összehangolását a megfelelő oszlop (vagy oszlopok) összes sejtjében. Az Align paraméter megengedett értékei balra, jobbra és központra vannak szükség. A span paraméterhez az alapértelmezett érték egy. Címke Ezenkívül lehetővé teszi az érték paraméterének beállítását, amely meghatározza az adatok függőleges összehangolását a sejtekben. A Valign paraméter értékei középső, felső és alsó. A címkék közötti különbség és Ez az, hogy az első közülük az oszlopok adatkezelési paramétereinek beállítása mellett számos oszlop feltételes kombinációját végzi a csoporthoz. Az ilyen társulás hatása az alábbiakban leírt szabályok paraméter használatakor nyilvánul meg. Alapértelmezés szerint minden oszlopnak egy csoportnak tekinthető. Címke Csak a csoport külön oszlopokban történő összehangolásának meghatározására kell használni. Adunk egy példát. Szükség legyen 6 oszlopot tartalmazó táblázat kiépítésére, és az első három adatokat jobbra kell igazítani, és a következő három - középen. A feladat megoldásához meg kell írni a HTML-kódot: (A táblázat adatai) A kód megjelenítésének eredményét az 1. ábrán mutatjuk be. 4.16. Ábra. 4.16. Táblázat különböző paraméterekkel a sejtek csoportjaihoz való igazításhoz Egy másik példa. Legyen az előző táblázatban az első két oszlopot jobbra kell igazítani, és a harmadik - középen, és mindhárom hangszórót össze kell kapcsolni a csoportba. Ezt követően három oszlopot is össze kell kapcsolni egy csoportba, és az első csoporthoz hasonlóan illeszkedik. A feladat megoldásához meg kell írni a HTML-kódot: (A táblázat adatai) Ebben a példában a címke után

Amelyből a csoporton belüli egyesítés jelentése látható.

Tanács

Mivel a címke

és Korlátozott a hat Microsoft Internet Explorer böngésző, akkor óvatosan kell használnia. A címkék használatának kényelme nyilvánvaló, de a gyakorlatban a legtöbb asztal az egyes táblázatos cellák megfelelő igazítási paraméterével épül fel, amelyre szükség van, ami jelentősen növeli a táblázat forráskódjának körét, de a képességet biztosítja megtekinteni bármely böngészőben.




Ábra. 4.17. Táblázat csoportosított oszlopokkal

Adókeret színe

Néhány további paraméter csak a Microsoft Internet Explorer számára, hogy kiválassza az asztalok színét - BorderColor, BorderColorlight és Border Colordark. Ezek a paraméterek címkékben állíthatók be

, . E paraméterek értéke, a szín vagy annak hexadecimális értékének neve használható. A BorderColor paraméter meghatározza az asztali keretrendszer összes elemének színét, míg a másik két paraméter állítja be az egyes komponensek színét, felülbírálja a határértéket. A szegélycolorlight paraméterfoltok a meghatározott színben és a teljes asztal felső szélén, és ennek megfelelően az egyes sejtek jobb és alsó szélei. A második paraméter BorderColordark az ellentétes élek színeit határozza meg. Ezeknek a paramétereknek köszönhetően a táblázat némileg felemelkedik az oldal felületén vagy mélyreható felületén. Mindez a kiválasztott színkombinációtól függ.

jegyzet

A Netscape 4.x böngésző is támogatja a BorderColor paramétert.

Feladat háttérmintája az asztalhoz

A Microsoft Internet Explorer böngészője (valamint a Netscape 4.x böngésző) lehetővé teszi a háttérparaméter használatát, amely meghatározza az asztal háttérmintáját, mivel az egész HTML-dokumentumot elvégezheti. Ez a paraméter címkékben lehet beállítani

,	és

, , w.

A Microsoft Internet Explorer Browser lehetővé teszi, hogy számos új címkét használjon a rajzszerkezet strukturálásához és a rajzkeret és a hálóvonal rugalmas vezérléséhez.

Címkék

, és A táblázat leírása struktúrája szigorúbban meghatározva, kiemelve a táblázat fejlécét, a táblázat fő tartalmát és az utolsó karakterláncot. Ezek a címkék csak a címkék párjában található táblázatok leírásában jelennek meg

és	. Címkék strukturálási táblázat

és.

Címkék és Az asztal felső és alsó láblécének leírására használják. Ezek a címkék nem fordulhatnak elő az asztalnál, mint egyszer. A végső címke kihagyható számukra. A címkeadatok használata kényelmes, ha olyan nagy asztalokat hoz létre, amelyek egy oldalon túlmutatnak.

Címke a táblázat leírásában többször is előfordulhat, és a végső címke használata szükséges. Ez a címke logikai adatcsoportot, valamint a címkét végez A szomszédos oszlopok csoportosítása.

Új címkék használata esetén rugalmasabban ellenőrizheti az asztali hálózat kereteit és vonalait.

A rajzkeret szabályozása az asztal körül a keretcímke paramétere által végzett

, És az asztali hálózat sorai a szabály paraméter. Például csak függőleges vonalakat költhet a hangszórók között, és a teljes táblázat körüli keret helyett vízszintes vonalakat ad az asztal felett és alatt.

A keretparaméter a következő értékeket veheti igénybe:

• Doboz vagy határ. - A keret mind a négy oldalról van húzva
• Felett. - csak a tetején
• Lent. - csak az alulról
• Hsides. - felhívja az alsó és felső oldalt
• Vsides - A bal és a jobb oldalra van húzva
• LHS. - csak a bal oldalon
• Rhs. - csak a jobb oldalon
• Üres. - Külső keret nélküli tábla

A szabályok paramétere szabályozza az asztali hálózat belső vonalak rajzát, és a következő értékeket is megteheti:

• Minden. - Minden belső vonalat rajzolnak
• Csoportok. - Csak a csoportok elválasztó vonalakat húztak
• Sorok - vonalak, elválasztó karakterláncok
• Cols. - vonalakat vonzanak az oszlopok elválasztására
• Egyik sem - A belső vonalak nem húzódnak

Példa:

.

jegyzet

Az asztal és a keretek asztali vonalainak rajzolása csak akkor történik, ha van egy határcímke paraméter

. A paraméter hiányában vagy a rácsvonal nulla értéke, és a keret hiányzik a keret és a szabályok paramétereinek bármely értékeihez.

Adunk példát egy teljes HTML kódra, amely táblázatot hoz létre a leírt funkciók használatával:

Példa a rugalmas vonalakra
hálóasztal

Oszlop fejléc 1.	Oszlopfejléc 2.	Oszlop fejléc 3.
Adat	Adat	Adat
Adat	Adat	Adat
Adat	Adat	Adat
Adat	Adat	Adat
Adat	Adat	Adat
Adat	Adat	Adat
Eredmény	Eredmény	Eredmény




Ábra. 4.18.Rugalmas rajzvezetékek Mesh Tables Browser Microsoft Internet Explorer

Ebben a példában a böngésző megjelenése az 1. ábrán látható. 4.18, az egyik lehetséges lehetőség a rácsvonalak és a keretek körüli keret szabályozására az asztal körül. Az asztal körül 5 képpontos vastagságú vázlatot (Border \u003d S) csak a felső és alsó oldalról (keret \u003d hsides). Az asztal belsejében rácsvonalakat rajzol az adatcsoportok elválasztására (szabályok \u003d csoportok). Az adatcsoportok elsősorban a három címke jelenléte , mindegyike bejelenti az asztal külön oszlopát csoport. Másodszor, címkék , és<тгоот> Szintén törölje az asztaladatokat csoportokba, amely meghatározza a belső vízszintes vonalak rajzát.

Táblázat oszlopszámok beállítása

A Microsoft Internet Explorer Browser (valamint a Netscape 4.x böngésző) engedélyezi a címkét

A COLS paraméter, amelynek értéke meghatározza az asztali oszlopok számát. Felvétel Ez a paraméter lehetővé teszi, hogy felgyorsítsa a táblázatrendezési eljárás felgyorsítását a böngészőben való megjelenítéskor, mivel lehetséges az oszlopok számának meghatározása, amíg a táblázat leírása kód letöltése nem kerül letöltésre. Jelenleg a paraméter felvétele nem befolyásolja a dokumentum betöltésének előrehaladását.

A táblák függőleges kiegyenlítése

A címke utolsó paramétere

Felügyelőség csak a Microsoft Internet Explorer, VALIGN, amely meghatározza a függőleges igazítás a táblázat képest a szöveget. Működése hasonló a képekhez hasonló paraméterhez.

jegyzet

Ne feledje, hogy az ugyanazon paraméter használata jelentősen eltérhet a tervezett célokra, mind a különböző címkék lehetséges értékeiben, még egy böngészőre és a nyelvi specifikáción belül is. Ezért lehetetlen összeállítani a konszolidált táblázatot különböző paraméterek alkalmazásával a használatuk kontextusán kívül. Például az illeszkedési paramétert csak táblázatokban használják három különböző változatban:

• a címkén

Az Align paraméter a bal vagy jobb értékeket kaphatja, és azt jelenti, hogy a táblázat helyét, a bal vagy jobb szélre nyomva tartva;

a címkén

,

A paraméter a nyomatékot vagy az alsó értékeket jelenti, és az asztal fejlécének elrendezését jelenti az asztalon vagy annak alatt;

tagovhoz

és

Az Align paraméter elfogadja a bal, jobb vagy középértékeket, és azt jelenti, hogy a vízszintes asztal megfelelő sejtjeinek (vagy sejtjeinek) tartalmát igazítja. Alternatíva a táblázatos ábrázoláshoz A táblázatok támogatása a webböngészők széles körben közös tulajdonává vált, hogy gyakorlatilag ne legyen oka annak, hogy elkerüljék. Mindazonáltal az alternatív adatmegjelenítés lehetséges lehetőségeit tekintjük, amelyet a táblázatok helyett használhatunk, vagy hozzáadhatjuk hozzájuk. Néhány más módszer, amely nem használja a táblázatok fogalmát: A szimulált szöveg használata. Ezt a módszert hagyományosan használták a HTML nyelv korábbi verzióiban, amikor az asztali támogatás még nem létezett. Használata, és eddig nem vesztett relevanciát, mivel ezeket a szövegeket minden böngésző megfelelően megjeleníti, beleértve a pusztán szöveget is. Táblázatot tartalmazó kép használata. A táblázatot bármely szövegszerkesztővel hozhatja létre, vagy akár a webböngésző is megjelenítheti, majd a grafikus formátumok egyikében képként menthető. Ez nem a legjobb megoldás, mivel az asztali kijelző dinamikus beállításainak teljes rugalmassága elveszett. Ezenkívül szükség van egy további fájl tárolására, amelynek mérete, amelynek nagysága általában sokkal nagyobb lesz, mint a HTML táblázatot leíró szöveg méretét. Lehetséges alkalmazási terület - szigorúan meghatározott méretű táblázatok, amelyeknél a külső tényezőktől (betűtípusok, böngésző üzemmódok stb.) Képes függése érvénytelen. A táblák helyett a listák használata. A legegyszerűbb esetekben a táblázatok szervezése helyett meglehetősen lehetséges a HTML nyelven elérhető listák egyik típusához. Asztal előkészítése A HTML táblázatok előkészítéséhez bármely szerkesztő használható, amelyek nagy része a vizuális megteremtési táblák számára van. Adunk példát az asztal előkészítésére a Hotdog professzionális szerkesztőben. A táblázat létrehozásához elegendő az asztalok kiválasztása a Beszúrás menüből, majd adja ki az ábrán látható párbeszédpanel. 4.19. A táblázat létrehozása az ablak megfelelő mezőinek kitöltésével áll. A táblázatban lévő sorok és oszlopok számának meghatározása után folytathatja az egyes asztaliejtek közvetlen kitöltését, amely ugyanabban a párbeszédpanelen jelenik meg. Az Előnézet párbeszédpanel, amely lehetővé teszi a kapott táblázat beépített böngészőjének megtekintését (4.20 ábra). Ábra. 4.19. Párbeszédpanel a táblázatok létrehozásához Ábra. 4.20. A beépített böngésző által mutatott táblázat Miután az adatkészítés befejeződött a táblázathoz, kattintson az OK gombra. Ezután a generált táblázat leírási kód kerül beillesztésre a szerkeszthető HTML dokumentumba. Például az 1. ábrán látható. 4.19. A következő kódot generálják: (a kimaradt kód része) 3Allo asztal CTLBE 1. 2. oszlop. CTOS 3. 4. oszlop. 1 2 3 4 Hasonlóképpen, ez a feladat megoldódik a Netscape Communicator Netscape zeneszerző komponense használatakor. Ábrán. 4.21 Megjeleníti a párbeszédpanelt, amelyben meg kell tölteni a szükséges mezőket. További címke paraméterek beírása Az extra HTML gomb biztosítja. A párbeszédpanel mezők kitöltése után nyomja meg az Apply gombot, majd az asztaliejtek kitöltésének képességét (4.22. Ábra). Ábra. 4.21. Párbeszédpanel a Netscape zeneszerző táblázat beállításainak beállításához Ábra. 4.22. A bemeneti kurzor kezdeti helyzetét az üres asztalon Van egy testtábla. A test sorokból és oszlopokból áll. Az asztal tele van. Minden címke Új karakterláncot hoz létre. Ezután beágyazott Oszlopok jönnek létre. Sok oszlopot hozhat létre. Ebben az esetben figyelemmel kell kísérnie az oszlopok számát az egyes sorokban. Például, ha az első sorban 5 oszlop van, akkor a következő sorokban 5 oszlopnak kell lennie. Ellenkező esetben a tábla vitorlázik. A sejtek kombinációját lehet kombinálni. Hogyan készítsünk egy asztalt a HTML-ben Adunk egy példát, HTML kódot: Mintaasztal 1. oszlop. 2. oszlop. Figyeljen a cellára . A COLSPAN speciális attribútumot használjuk a vízszintes sejtek kombinálásához. Numerikus értéke az egyesített oszlopok számát jelzi. Az attribútum analógja is van: címke (Asztali fejléc), ahol a Colspan regisztrálnia kell. Az eredmény ugyanaz lesz. De gyakran használja a szokásos TD-t. Most vegye figyelembe részletesen az összes tag attribútumot . Attribútumok és címkék tulajdonságai A nyitó címke Különböző attribútumokat írhat le. 1. Align \u003d "Paraméter" tulajdonság - Beállítja a táblázat igazítását. A következő értékeket veheti igénybe: A szétszerelt példában igazítottuk az asztalt az Align \u003d "Center" közepén. Ez az attribútum nem csak az asztalra, hanem az asztali táblázatokra is alkalmazható. . Így különböző sejtekben az igazítás más lesz. például , , , vagy a Cols - vonal az oszlopok között jelenik meg semelyik - az összes határ rejtett sorok - a határ a címkén létrehozott táblázat sorai között van húzva 12. Szélesség \u003d "Szám" tulajdonság - Beállítja az asztal szélességét: vagy pixelben vagy százalékban. 13. osztály ingatlan \u003d "osztálynév" - Megadhatja az osztály nevét, amelyhez a táblázat tartozik. 14. Style Property \u003d "Styles" - A stílusok egyedileg beállíthatók minden táblázathoz. Most itt az ideje, hogy merítse magát az asztalra, és vegye figyelembe az asztaliejtek attribútumait. Ezeknek az attribútumoknak a felfedezési címkén kell írniuk és Ugyanezek a paraméterek állnak rendelkezésre, mint a hierarchikusan alkalmazzák az összeset vagy húrok ... ... ... 2. Az ingatlan háttér \u003d "URL" - Beállítja a háttér rajzot. Az URL helyett a háttérkép címét meg kell írni. Példa Mintaasztal 1. oszlop. 2. oszlop. Következő oldalra konvertálva: A vizsgált példában háttérképünk az IMG mappában található (amely ugyanabban a könyvtárban van, mint a HTML oldal), és a kép Fon.gif. Kérjük, vegye figyelembe, hogy a címkén hozzáadtuk a stílus \u003d "Szín: fehér;" . Mivel a háttér szinte fekete, így a szöveg nem egyesíti a háttérrel, fehér szöveget készítettünk. 3. Tulajdon BGColor \u003d "Color" - Beállítja az asztal színét. Színként kiválaszthatja az egész palettát (lásd a kódokat és a címeket HTML színeket) 4. Border \u003d "szám" tulajdonság - Beállítja az asztali keret vastagságát. A korábbi példákban a Border \u003d "1" -re rámutattunk, ami a keret vastagságát jelenti - 1 pixel. 5. BorderColor \u003d "Color" tulajdonság - Beállítja a keret színét. Ha a Border \u003d "0", a keretrendszer nem és a keret színe nem lesz értelme. 6. CELLPADDING tulajdonság \u003d "szám" - A keretből származó bemélyedés a sejtek tartalmához képest. 7. Cellspacing tulajdonság \u003d "szám" - A pixeleken lévő sejtek közötti távolság. 8. A Cols \u003d "szám" az oszlopok száma. Ha nem adja meg, akkor a böngésző maga is meghatározza az oszlopok számát. Az egyetlen különbség az, hogy ennek a paraméternek a specifikációja valószínűleg felgyorsítja az asztal letöltését. 9. Tulajdonframe \u003d "Paraméter" - Hogyan jelenítsük meg a határokat az asztal körül. A következő értékeket veheti igénybe: void - Ne húzza határokat határ - határ körül fent - az asztal felső szélén alul - az asztal alján található határ hsides - Csak vízszintes határok hozzáadása (a táblázat felső és alsó része) vsides - csak függőleges határokat rajzoljon (balra és jobbra a táblázatból) rhs - csak az asztal jobb oldalán határ lHS - csak az asztal bal oldalán határ 10. Magasság \u003d "szám" tulajdonság - Beállítja az asztal magasságát: vagy pixelben vagy százalékban. 11. Az ingatlan szabályok \u003d "paraméter" - hol a sejtek közötti határok megjelenítéséhez. A következő értékeket veheti igénybe: minden vonal minden egyes cellás asztal körül húzódik csoportok - A vonal a címkék által létrehozott csoportok között jelenik meg. . Attribútumok és tulajdonságok 1. Az ingatlan Align \u003d "Paraméter" - beállítja egy külön táblázatos cella összehangolását. A következő értékeket veheti igénybe: bal - szintezés a bal szélen központ-központi igazítás jobb - igazítás a jobb szélen 2. A Háttér \u003d "URL" tulajdonság - Beállítja a sejt háttérképét. Az URL helyett a háttérkép címét meg kell írni. 3. BGColor \u003d "Color" tulajdonság - Beállítja a sejtek színét. 4. BorderColor \u003d "Color" tulajdonság - Beállítja a sejtkeret színét. 5. Char \u003d "Letter" tulajdonság - Beállítja azokat a levelet, ahonnan szükség van az igazításra. Az igazítás attribútumértéket karban kell telepíteni. 6. A COLSPAN \u003d "szám" tulajdonság - beállítja a kombinált vízszintes sejtek számát. 7. Magasság \u003d "Szám" tulajdonság - Beállítja az asztal magasságát: vagy pixelben vagy százalékban%. 8. Szélesség \u003d "Szám" tulajdonság - Beállítja az asztal szélességét: vagy pixelben vagy százalékban%. 9. A ROWSPAN \u003d "szám" tulajdonság - Beállítja a függőleges cellák számát. 10. Tulajdon Valign \u003d "Paraméter" - A sejt tartalmát függőlegesen igazítsa. top - Illessze a cella tartalmát a vonal felső szélén közép-igazítás középen alsó - illesztés az alsó szélen alapvonal - kiindulási igazítás 1. megjegyzés. A címkén . Paraméterek egy címkéhez ezen belül Hogyan készítsük el a sejtek határait az asztalnál nem ragasztott Abban az esetben, használja Border (határ sejtek) és nulla francia a sejtek között, mégis ragasztó, és kiderül, mely egy két határral. Annak érdekében, hogy elkerülje, regisztrálnia kell a Stílusok táblázatban Border-Collapse: Collapse: ... Kedves olvasó, most már sokkal többet tanultál a HTML asztali címkéről. Most azt tanácsolom, hogy menjen a következő leckére. A COLSPAN attribútumok használatával számos szomszédos oszlopcellát vagy húrot kombinálhat egy nagy cellába. ColSpan Tev attribútum és . A címkék közötti szöveg , nem örököli ezt a stílust, mivel a címke sem címke sem . A vízszintes szövegbeállítás egy adott táblázat oszlopban a stílus megadásával módosítható szöveg igazítás. Pseudoclassa számára tD: nth-child (n) ahol n az oszlop száma. Ez a módszer azonban nem fog működni, ha egy attribútum jelen van az asztal táblái között colspan.. Példa , Lehetővé teszi, hogy több oszlopban lévő sejteket összevonja ugyanabban a sorban. ROWSPAN attribútum - sejtek több sorból egy oszlopon belül. Az ilyen attribútumokban megadott szám azt jelzi, hogy az általa olvasztott sejtek számát jelzi. Mivel Az egyesülési műveletek végrehajtásakor nagyon könnyű összezavarni, azt javaslom, hogy az asztal előzetes vázlata a papíron. Példa: és A legegyszerűbb módja annak, hogy megértsük, hogyan lehet használni a sorok és oszlopok csoportosítását a Sudoku asztal példáján. A COL címke minden oszlopra külön beállítja a paramétereket. Nem számít, hogyan kell írni a forráskódban: vagy Példa HTML kód: 1111 22222 33333 44444 55555 66666 77777 88888 99999 Kijelző a böngészőben: 1111 22222 33333 44444 55555 66666 77777 88888 99999 A HTML oldaltábla megjelenésének javítása A CellSpacing attribútum lehetővé teszi a tiszta tér csíkjának méretét a táblázatból kívülről. Alapértelmezés szerint a böngésző megosztja a sáv táblázatos celláit 2 pixelben. A Cellpadding attribútum a sejten belüli tiszta térszalagok méretét állítja be, amely elválasztja a tartalmát külső határokból. Alapértelmezés szerint ez az érték 1 pixel. Ahhoz, hogy a grafikus képek elhelyezett szomszédos táblázatcellákhoz, úgy nézett ki, mint egy egész, meg kell állítani cellspacing attribútumok cellpadding értéke nulla. HTML oldaltábla határai megjelenítése Ha a határcímke attribútumának értéke A nullától eltérően a böngésző egy táblát köt a keretbe, és megkülönbözteti az asztal szomszédos sorait és oszlopait. A keret attribútumok használatával a szabályok meghatározhatják, hogy a táblázat keretezettjeinek melyik részét kell mutatni. A keret attribútumát a táblázat külső körvonalai fragmenseinek meghatározására használják. Szabályok attribútuma - jelzi a belső elválasztó vonalakat. Az alábbiakban ezek az attribútumok megengedett értékei. Frame Value Void Eredmény Eredmény Minden vonal fölötti vonal a fenti táblázat alatti vonal alatt vonal alatt RHS táblázat vonal jobbra az LHS vonal bal oldali asztali vonal felett és a táblázat alatt Vsides vonalak balra és jobbra az asztali határon Minden vonal jelen van (alapértelmezett) A csoportok közötti sorok között nincsenek Cols vonalak az oszlopok és a sorok közötti csoportok közötti csoportok közötti sorok között, és az összes vonal jelen van (alapértelmezés szerint) Példa: HTML kód: 111 111 111 111 111 111 Kijelző a böngészőben: 111 111 111 111 111 111 Word transzfer a HTML oldalsejtekben Alapértelmezés szerint a böngésző a szöveges szavak automatikus átadását teszi lehetővé az asztali cellába. A Nowrap attribútum erőteljesen letiltja a szó átviteli funkcióját az asztalon, és megjeleníti a szöveget egy sorba. Ezért ezt az attribútumot javasoljuk, hogy a rövid szöveget tartalmazó táblázatos cellák tekintetében alkalmazzák, mert Ellenkező esetben túlmutat a böngészőablakon. Azt kell mondani, hogy ez az attribútum nem befolyásolja a címkék által formázott sejtszöveget , . Beágyazott html oldaltáblák A táblák csatolása Az egyik a másikra a weboldal megjelenésének nagyon gyakori alkalmazása. Először is, meg kell építeni egy főbb táblát, majd a sejtekben leányvállalatokat. A táblázat meghatározása, nem szabad elfelejteni, hogy leírja a leírásukat, amely a Slash szimbólumot tartalmazó záró címkéket tartalmazza, mert Az egyetlen ilyen leíró kihagyása drasztikusan torzítja az asztalt. Szintén nem, visszaélhet, mert Ebben az esetben a böngésző oldalterhelése jelentősen lelassul. A befektetett táblázatok formázása az általános szabályok szerint történik, amely valójában vonzóvá teszi az oldalt. Példa: . A záró címke kötelező. Figyelem: Mindezen címkék használata nélkül az asztal nem lehetséges. Most próbáljuk meg használni az elméletet, és hozzon létre egy táblázatot a gyakorlatban. A feladat: Hozzon létre egy táblázatot egy sorból, ahol három oszlop lesz. HTML kód: 111 111 01 01 01 01 111 111 111 Kijelző a böngészőben: 111 111 01 01 01 01 111 111 111 09.11.2015 Üdv mindenkinek! Továbbra is tanulmányozzuk a HTML alapjait. Ebben a leckében elmondom és megmutatom a példákat, hogyan készítsünk egy asztalt a HTML-ben. És fontolja meg, hogyan állíthatja be az asztaliejtek színét, hogyan kell a tábla kiemelését, megtanulhatja, hogyan lehet az asztal határát, stb. A HTML táblákat gyakran használják a HTML-ben, hogy felsoroljanak néhány információt. Korábban a táblázatokat a weboldalak kereteinek létrehozására használták: ... de ez már a múltban van, hiszen ma hatékonyabb módszerek vannak a webhely kereteinek létrehozására. Gyakran használok egy asztalt a blogomon vagy a webhelyen, például, mint például. Azt hiszem, kitaláltad, mit kell tanulni egy asztal létrehozásához. Milyen főcímkék állnak egy asztalból? ○ címke asztal Ez a fő tartály egy asztal létrehozásához, amelyen belül más táblázatelemek vannak, például oszlopok és sorok. A záró címke kötelező. ○ címke T.R. Belső konténer …… helyezett sorok: Az oszlopok címke segítségével jönnek létre sorozat -1 / oszlop 1 2. oszlop. 3. oszlop. A feladat: Hozzon létre egy táblázatot három sorból és három oszlopból. sorozat -1 / oszlop 1 2. oszlop. 3. oszlop. sorozat -2 / oszlop 1 2. oszlop. 3. oszlop. sor -3 / oszlop 1 2. oszlop. 3. oszlop. Addig, amíg mindannyian világos? Ki nem értette, emelje fel a kezét! Igen, megértettem mindent, akkor tovább megyünk. Most fontolja meg az asztal tulajdonságait. * Attribútumok ○ Asztali határok a HTML-ben Látható tábla a címkéhez alkalmazott tulajdonság "határ.» . Ha az attribútum értéke « határ.» "0", a határok nem lesznek láthatóak, ha nem regisztrálják a címkét tulajdonság Határ , A táblázat határa nem lesz látható is. sorozat -1 / oszlop 1 2. oszlop. 3. oszlop. Eredmény: Próbálja meg megváltoztatni az értéket az attribútumban Határ a "10" . ○ Hogyan lehet kombinálni a sejteket az asztalon A cellák egyesítése a táblázatban az attribútumok használatához "Colspan" és "rowspan" a címkéhez < tD.> . colspan - a sejtek vízszintesen kombinálva; sorpan - függőleges sejtek szövetsége. Az értékek jelzik, hogy a sejteknek mennyit kell egyesíteniük. 1. sor 1. oszlop 2. sorozat 1. szakasz 2. sorozat 2. szakasz Eredmény: 1. sor 1. oszlop 1. sor 2. szakasz 2. sorozat 1. szakasz Eredmény: Bonyolultabb példa: sorozat -1 / oszlop 1 2. oszlop. 3. oszlop. sorozat -2 / oszlop 1 2. oszlop. 3. oszlop. 4. oszlop. Eredmény: ○ Hogyan növelheti az asztal tábláinak közötti távolságot A szöveg és a sejt határának közötti távolság növelése érdekében írjon egy attribútumot "Cellpadding" Megjelölni A "Cellpadding" attribútum értékeiben jelölje meg a megkülönböztetés távollétét 1. sor 1. oszlop 2. oszlop. Eredmény: A táblázatban lévő sejtek közötti távolsághoz használja a távolságot, használja az attribútumot "CellSpacing" Megjelölni Az attribútum értékeiben "CellSpacing" Adja meg a sejtek közötti távolságot 1. sor 1. oszlop 2. oszlop. Eredmény: ○ Hogyan készítsünk HTML asztal hátterét Hogy a HTML asztal hátterét használja a címkéhez és ilyen attribútumok: BGColor - az egész asztal vagy minden cella háttere külön. A színt kód vagy szó állítja be. Háttér-telefon az asztalon tele van egy mintával. sorozat -1 / oszlop 1 2. oszlop. 3. oszlop. sorozat -2 / oszlop 1 2. oszlop. 3. oszlop. 4. oszlop. Eredmény: ○ Hogyan kell beilleszteni egy képet a HTML táblában Kép beillesztése a HTML táblázatban, a címke között Beilleszti a címkét . 1. sor 1 cella 1 cell 2. Eredmény: Az értékek pixelben (px) vagy százalékban vannak beállítva (%) ○ Igazítsa a tartalmat a HTML táblázatban A HTML táblázat tartalmának igazítása, a címkével tulajdonság "Igazítsa" és "Valign" : Igazítsa. - Vízszintes tartalom igazítása az asztalnál. Értékek: bal. - nyomja meg a tartalmat balra (alapértelmezett); központ – telepítse a központba; jobb - nyomja meg a tartalmat jobbra Valig. - a tartalom függőleges összehangolása az asztalban. Értékek: top. – nyomja meg a tartalmat a tetejére; alsó – nyomja meg az alsó tartalmat; középső – Állítsa be a tartalmat középen szöveg cell alapértelmezés szerint a tartalom vízszintesen igazodik a jobb szélén, függőlegesen nyomja meg az aljához a tartalom vízszintesen igazodik a bal szélén, függőlegesen - nyomja meg a tetejét a tartalom vízszintesen igazodik a központban, függőlegesen nyomja meg a közepét Eredmény: ○ Hogyan igazítsa a HTML táblát a központban Ahhoz, hogy igazítsa az asztalt a központban, meg kell ragadnia az asztali címkét : Asztalkód sorozat -1 / oszlop 1 2. oszlop. 3. oszlop. További és fő címkék az asztalhoz A weboldal táblázata Név 1. Név 2. 1 2 Eredmény: Így kész asztalokkal. Most létrehozhat egy bonyolultságot. Biztosítsa ezt a leckét. Próbálj meg magadat létrehozni. Várakozás a következő leckében. Feliratkozás a blogom frissítésére. Előző poszt Következő hozzászólás Táblázat kerettel Név Vezetéknév Larisa Isaeva Dmitriy Kolesnikov EREDMÉNY: Táblázat keretek nélkül Táblázat kerettel Attribútumok tagov és Merge sejtek esetében Példa görények súly a méret hímek 1,2 - 2,5 kg akár 70 cm-ig nőstények 0,7 - 1,0 kg legfeljebb 40 cm-ig EREDMÉNY: görények súly a méret hímek 1,2 - 2,5 kg akár 70 cm-ig nőstények 0,7 - 1,0 kg legfeljebb 40 cm-ig A HTML5 szabvány szerint az összes korábban használt asztali attribútumok, például határ., cellspacing., cellpadding. et al. már nem támogatott, és az érvényesítő használatuk a kód hibáit veszi figyelembe. A táblák készítéséhez a CSS-stílusokat kell használnia, amellyel az összes elavult asztali attribútumot helyettesítheti. Például egy attribútum helyett cellspacing. Az asztaliejtek közötti távolság megváltoztatásához az ingatlant használják. határválasztás., és igazítsa a tartalmat a táblázat sejtjeiben - tulajdonságok szöveg igazítás. és függőleges.. CSS-stílusok asztalokhoz Címkék csoportosító karakterlánc HTML táblázat A komplex táblák létrehozásához használhatja a címkéket: Példa Sörfogyasztás TELJES NÉV. lithrov TELJES 250 Ivanov Ivan Ivanovich 133 Petrov Petrovich 117 EREDMÉNY: Címkék csoportosítása oszlopok HTML táblák Címke attribútum sárga piros EREDMÉNY: Ne próbálja meg beállítani a stílust szöveg igazítás. Tagovhoz ... nem leszármazott sem címke Név Ár, dörzsölje.) Szolárium / perc fizetés (4 perc) 15 50 perc szolárium (14 rubel / min, 1 hónap) 700 100 perc szolárium (13 rubel / perc, 2 hónap) 1300 200 perc szolárium (12 rubel / min, 3 hónap) 2400 EREDMÉNY: Ez a módszer azonban nem fog működni, ha egy attribútum jelen van az asztal táblái között colspan.. Nem találta választ a kérdésedre? Nézd meg ide A globális attribútumok attribútumok formák HTML5 Bevezetés a JSON-ba, mi a JSON TXT fájl Rendszeres kifejezések (regexp objektum) Forma Ellenőrizze a rendszeres JavaScript kifejezések példáit