A HTML-táblázatok annyira funkcionálisak, hogy teljes webhelyek elrendezésére használhatjuk őket (olvasás). Most arról fogunk beszélni, hogy egyszerű HTML-táblázatokat illesztünk be egy weboldalba, csak a jelölést elemezzük, de nem érintjük a tervezést, mert jobb a táblázatokat CSS-stílusokkal díszíteni.

Táblázatcímkék és attribútumok

Íme a táblázatok létrehozásához szükséges alapvető elemek:

• - egy tartály, amelyben az asztal található (ugyanaz, mint
  a megjelölt ill
  számozott listák esetén).
  1. határ- a keretek vastagságát meghatározó attribútum. Inkább a border CSS tulajdonságot érdemes használni.
  .

  Másodszor, előfordulhat, hogy ez a kód bizonyos esetekben nem a várt módon működik. Amikor egy gombra kattint Beküldés az űrlapot nem lehet benyújtani.

  Pontosan ezzel a helyzettel találkoztam munkám során. Az űrlapot egy vonalon belül helyezte el

  . Minden működött - nagyszerű. Érvényes, nem érvényes, nem értettem. De a lényeg az, hogy benne ezt a táblázatot a keresési eredmények ajax technológiával jelentek meg, vagyis a teljes oldal újratöltése nélkül. Az adatok beírásra kerülnek a keresősávba, és a talált eredmények megjelennek a táblázatban, miközben csak a táblázat tartalma frissül. Tehát amikor egy ajax kérés után betöltötték a táblát, akkor nyomtatványokat beküldeni, ilyen helytelenül beágyazva egy táblázatba, leállt.

  Az űrlap táblázatba helyezéséhez a következő módszert javaslom.

  Deklarálja az űrlapot a táblázat előtt, és mindenképpen adjon meg neki valamilyen azonosítót (az én példámban id=”myform”). Helyezze a bemenetet a táblázatban oda, ahol tervezte, de Minden bemenethez hozzá kell adni a form=”myform” attribútumot., amelynek értéke jelzi, hogy ez az elem melyik formához tartozik.

  Példánkban a kód így fog változni:

  megadja a táblázat aláírását. Nem kell tárolót használnia, de ha mégis úgy dönt, hogy címet ad a táblázatnak, akkor közvetlenül a címke után helyezze el , a cellákon és sorokon kívül.

  - párosított címke, amely egy táblázatsort tartalmaz (vízszintesen azonos szinten elhelyezkedő cellák).

  , annyi cella lesz benne: egy címke - egy cella.

  lehetővé teszi az oszlopok csoportosítását, gyorsan és a kód eltömődése nélkül, hozzárendelheti őket Általános jellemzők. Egy tároló segítségével elválaszthatja egymástól a táblázat logikai részeit. A címke után helyezték el

  , ha nincs ott, akkor utána .

  ugyanarra a célra használják, mint . tartalmazhat , de nem fordítva.

  span- attribútum, amely megadja azoknak az oszlopoknak a számát, amelyekre a tárolótulajdonságok vonatkoznak

  .

  , És - konténerek, amelyek lehetővé teszik a táblázat felosztását a felső (címek), a fő (törzs) és az alsó (végső) részekre. Egy HTML-táblázatban ezeknek a címkéknek a sorrendje megegyezik a tárolók sorrendjével , És

  Weboldal készítő eszközök

  Célja	Eszköz
Jelzés	HTML	XHTML
Dekoráció	CSS
Fejlesztés	PHP	Piton

  A böngészőben a dokumentum így fog kinézni:

  Nézzük meg, hogy mely kódsorok miért felelősek.

  • - nyitotta ki az asztalt, megadva neki a keretek vastagságát.
    - címezték.
    - nyitotta ki a vonalat.
    - létrehozott egy cellát fejléc kialakítással.
    - létrehozott egy második fejléccellát a sorban. A colspan paraméter azt jelezte, hogy ennek a cellának két vízszintesen kell átnyúlnia.
    - zárta a sort. A fennmaradó sorokat ugyanígy hoztuk létre.
    - hozzáadott egy második sort a táblázathoz normál, nem pedig fejléccel. A következő sorokat és cellákat hasonlóan illesztjük be.

    Weboldal készítő eszközök

    Célja	Eszköz
  Jelzés	HTML	XHTML

    - csukta be az asztalt.

  Jó napot

  Néha olyan helyzet adódik, amikor egy html űrlapot kell elhelyeznie egy html táblázatban.

  Például van egy táblázat néhány adattal, és ennek a táblázatnak az első sorába szeretnénk bemeneteket elhelyezni az új információk beviteléhez és hozzáadásához.

  Valószínűleg az első kód, amit erről ír, ez lesz:

  - egy táblafejlécet létrehozó címke. Külsőleg tartalma eltér a többi cella tartalmától – általában a belső szövegtől	A böngésző félkövérrel kiemeli, és középre helyezi.	- egy tároló, amellyel egy egyszerű cellát hozunk létre. Hány ilyen címkét fog tartalmazni egy sor (tag

  < tr > < form method = "post" action = "" > < td > < input type = "text" name = "first_name" / > < / td > < td > < input type = "text" name = "second_name" / > < / td > < td > < input type = "submit" name = "add" / > < / td > < / form > < / tr >

  Ez a rossz lehetőség!

  Először is, ez a kód nem érvényes. Az űrlap nem lehet közvetlen gyermek asztal, tbodyÉs tr . Igaz, elhelyezhető egy külön táblázatcellában, vagyis a címkék között

  < form method = "post" id = "myform" > < / form > < table > < tr > < td > < input type = "text" name = "first_name" form = "myform" > < / td > < td > / > < / td > < / tr > < / table >

  Ez a lehetőség az űrlapelemek táblázaton belüli elhelyezésére érvényes, és ami a legfontosabb, minden helyzetben működnie kell.

  Esetemben ajax kérés után sikerült az űrlap beküldése! Neked is hasonlót kívánok!

  Mellesleg ilyennel még nem találkoztam forma attribútum. Bár elég régóta foglalkozom webprogramozással. Ilyen feladatok nyilván nem jöttek be. De ügyeljen arra, hogy mennyit biztosítanak és veszik figyelembe a fejlesztési nyelvek. Valószínűleg bármelyik problémát megoldhatja, és bármilyen helyzetből kiutat találhat.

  A hibák gyors felismerését és kijavítását kívánom!

  A HTML táblázatcímkék eredetileg táblázatos adatok sorait és oszlopait ábrázolták. A tervezők azonban megtanulták használni őket a weboldalak elrendezésének manipulálására: szövegoszlopok létrehozására, az elemek közötti térköz beállítására és a szöveg megjelenésének olyan megváltoztatására, amelyre más HTML formázási címkék nem képesek.

  A HTML-táblázatok mindig téglalap alakúak, és sorokból állnak, amelyek viszont cellákból állnak. A létrehozandó tábla összetevőit leíró összes nyelvi konstrukció a címkék között található

  És.

  A táblázat soronként kitöltve; egy pár címke egy karakterlánc jelölésére szolgál .... Egy sor cellákból áll, amelyek bármelyik címkével vannak megadva ..., ha ezek a cellák oszlopfejléceket vagy címkéket tartalmaznak .... A címsorok félkövér betűtípussal jelennek meg, és a cella közepén helyezkednek el. Az adatok normál betűtípussal és a cella bal oldalához igazítva vannak. A címkék a teljes táblázat címének beállítására szolgálnak És.

  Példa

  Táblázat címe

  1. címsor2. címsor

  1. cella2. cella

  3. cella4. cella

  

  Az adatok jelenléte a cellákban nem szükséges. Kétféleképpen hozhat létre üres cellát: ne töltse meg semmivel a tartályt ( ), vagy helyezzen el benne egy nem törő szóköz karaktert, amelyet egy speciális karaktersorozat határoz meg -- (azaz hozzon létre egy cellát, mint pl. ).

  Nincs szükség külön üres cellák létrehozására, ha azt tervezi, hogy a sor összes többi cellája nem lesz kitöltve. A címke óta új sor kezdetét jelzi, a böngésző automatikusan hozzáadja az üres cellákat.

  Alapvető címkeattribútumok

  Alapvető címkeattribútumok hozzárendelése

  és az általuk felvehető értékeket a táblázat tartalmazza.

  Tulajdonság	Célja
  	Meghatározza a táblázat szegélyének szélességét (pixelben), például BORDER=1; a nulla érték azt jelenti, hogy nincs keret
  	Meghatározza a teljes táblázat szélességét képpontokban vagy a böngészőablak szélességének százalékában
  	Meghatározza a teljes táblázat magasságát képpontokban vagy a böngészőablak magasságának százalékában
  	Beállítja a táblázat vízszintes igazítását a böngészőablakban; bal, közép és jobb értékeket tartalmaz (alapértelmezett bal)
  	Szabad teret ad a cellán belüli adatok és annak határai közé; alapértelmezett értéke 2
  	Szabad helyet ad a cellák között a teljes táblázaton belül; alapértelmezett értéke 2
  	Meghatározott szélességű (pixelben) szabad területet ad meg a táblázat bal és jobb oldalán
  	Adott magasságú (pixelben) szabad területet ad meg a táblázat felett és alatt
  BGCOLOR=szín	Beállítja a teljes táblázat háttérszínét
  	Azt jelzi háttérkép táblázathoz, ahol az URL a forráscím (a képfájl neve)

  Példa Változtassuk meg az előző példában létrehozott dokumentum tartalmát úgy, hogy hozzáadjuk a BORDER és ALIGN attribútumokat a címkéhez

  :

  Most a táblázat cellái bekeretezve lesznek, és a táblázat a böngészőablak közepéhez igazodik.

  

  09.11.2015

  
  

  Sziasztok!
  Folytassuk a HTML alapjainak tanulását. Ebben a leckében elmondom és példákat mutatok be hogyan készítsünk táblázatot HTML-ben. Azt is megnézzük, hogyan állíthatja be a táblázat celláinak színét, hogyan állíthatja középre a táblázatot, hogyan készíthet táblázatszegélyt stb.
  A HTML-táblázatokat gyakran használják a HTML-ben bizonyos információk felsorolására. Korábban táblázatokat használtak a weboldalak keretrendszerének létrehozásához:

  

  ...de ez már a múlté, hiszen ma már több van hatékony módszerek drótvázak létrehozása egy webhelyhez a . Gyakran használok táblázatot a blogomon vagy a webhelyemen, például, mint a .

  Azt hiszem, megérti, miért kell megtanulnia táblázat létrehozását.

  Milyen fő címkékből áll a táblázat?

  ○ címke ASZTAL
  Ez a fő konténer egy táblázat létrehozásához, amely egyéb táblázatelemeket, például oszlopokat és sorokat tartalmaz.
  A záró címke kötelező.

  ○ címke TR

  A tartály belsejében

  …… sorok kerülnek elhelyezésre:

  Az oszlopok egy címke segítségével jönnek létre .
  A záró címke kötelező.

  Figyelem: Lehetetlen táblázatot létrehozni ezen címkék használata nélkül.

  Most próbáljuk meg használni az elméletet, és készítsünk táblázatot a gyakorlatban.

  Gyakorlat: hozzon létre egy egysoros, három oszlopos táblázatot.

  -1. sor / 1. oszlop

  2. oszlop

  3. oszlop

  Gyakorlat: hozzon létre egy három sorból és három oszlopból álló táblázatot.

  -1. sor / 1. oszlop	2. oszlop	3. oszlop
  -2. sor / 1. oszlop	2. oszlop	3. oszlop
  -3. sor / 1. oszlop	2. oszlop	3. oszlop

  Eddig minden világos számodra? Aki nem érti, emelje fel a kezét! Igen, mindannyian megértjük, úgyhogy menjünk tovább.

  Most nézzük meg a táblázat attribútumait.

  *Tulajdonságok

  ○ Táblázat szegélyek HTML-ben

  A táblázat láthatóvá tételéhez lépjen a címkére

  vonatkozik tulajdonság "határ» .
  

  Ha az attribútum értéke « határ» „0”, a szegély nem lesz látható, hacsak nem adjuk hozzá a címkéhez

  tulajdonság "határ", a táblázat kerete sem lesz látható.

  -1. sor / 1. oszlop

  2. oszlop

  3. oszlop

  Eredmény:

  Próbálja megváltoztatni az attribútum értékét "határ" tovább "10" .

  ○Hogyan lehet cellákat egyesíteni egy táblázatban

  A táblázat celláinak kombinálásához használjon attribútumokat "colspan"és "rowspan" a címkéhez < td> .

  • colspan - a sejtek vízszintes összevonása;
  • sorhossz - a cellák függőleges egyesítése.

  Az értékekben adja meg, hogy hány cellát szeretne egyesíteni.

  1. sor 1. oszlop
  2. sor 1. oszlop	2. sor 2. oszlop

  Eredmény:

  1. sor 1. oszlop	1. sor 2. oszlop
  	2. sor 1. oszlop

  Eredmény:

  Bonyolultabb példa:

  -1. sor / 1. oszlop	2. oszlop			3. oszlop
  -2. sor / 1. oszlop	2. oszlop	3. oszlop	4. oszlop

  Eredmény:

  ○ Hogyan lehet növelni a távolságot a táblázat cellái között

  A szöveg és a cellaszegély közötti távolság növeléséhez adja hozzá az attribútumot "cella kitöltése" megjelölni

  A „cellpadding” attribútum értékeiben adja meg a behúzás távolságát

  1. sor 1. oszlop

  2. oszlop

  Eredmény:

  A táblázat cellái közötti távolság növeléséhez használja az attribútumot "cellatávolság" megjelölni

  Az attribútumértékekben "cellatávolság" adja meg a cellák közötti távolságot

  1. sor 1. oszlop

  2. oszlop

  Eredmény:

  ○ Hogyan készítsünk HTML-táblázat hátterét

  HTML-tábla hátterének létrehozásához használja a to tag-et

  És

  a következő attribútumok: BGCOLOR – háttérszín a teljes táblázathoz vagy minden egyes cellához külön-külön. A színt kód vagy szó határozza meg. HÁTTÉR – a táblázat hátterét egy kép tölti ki. -1. sor / 1. oszlop 2. oszlop 3. oszlop -2. sor / 1. oszlop 2. oszlop 3. oszlop 4. oszlop Eredmény: ○ Hogyan lehet képet beszúrni egy HTML-táblázatba Kép beszúrása HTML-táblázatba, a címke közé

  címkét helyez el .

  1. sor 1. cella

  2. cella

  Eredmény:

  Az értékek pixelben (px) vagy százalékban (%) vannak megadva

  ○ Tartalom igazítása HTML-táblázatban

  A HTML-táblázat tartalmának igazításához használja a címkézést tulajdonság "igazítsa"És "valign" :

  IGAZÍTSA– a tartalom vízszintes igazítása a táblázatban.
  Értékek:

  • bal - tolja a tartalmat a bal oldalra (alapértelmezett);
  • központ – telepítse a központba;
  • jobb - tolja a tartalmat a jobb oldalra

  VALIGN– a tartalom függőleges igazítása a táblázatban.
  Értékek:

  • tetejére – nyomja a tartalmat a tetejére;
  • alsó – nyomja le a tartalmat az aljára;
  • középső – középre állítsa be a tartalmat
  szöveg

  alapértelmezett cella	Igazítsa a tartalmat vízszintesen a jobb szélhez, függőlegesen - nyomja le az aljára
  Igazítsa a tartalmat vízszintesen a bal szélhez, függőlegesen - nyomja felfelé	Igazítsa a tartalmat vízszintesen középen, függőlegesen - nyomja meg őket középen

  Eredmény:

  ○ Hogyan lehet középre helyezni egy HTML-táblát

  A táblázat középre helyezéséhez címkével kell körbekötnie a táblázatot

  :
  Táblázat kódja

  -1. sor / 1. oszlop

  2. oszlop

  3. oszlop

  További és fő címkék a táblázathoz

  Táblázat a weboldalhoz

  1. cím	2. cím
  1	2

  Eredmény:

  Most végeztünk az asztalokkal. Mostantól saját maga is létrehozhat bármilyen bonyolultságú táblázatot. Rögzítse ezt a leckét. Próbáljon meg bármilyen táblázatot létrehozni saját maga.
  Várom, hogy találkozzunk a következő leckében. Iratkozz fel a blogom frissítéseire.

  Előző poszt
  Következő bejegyzés
  

  4. fejezet

  Táblázatok HTML-ben

  A HTML egyik legerősebb és legszélesebb körben használt funkciója a táblázatok. Az adatok táblázatos bemutatásának fogalma nem szorul további magyarázatra. BAN BEN HTML táblázatok nemcsak hagyományosan adatmegjelenítési módszerként, hanem weblapok formázására is használják. Mutassunk példákat valós dokumentumokra, amelyekben a táblázatos ábrázolás kényelmes módja a dokumentum felépítésének. ábrán. A 4.1. ábra egy tipikus példát mutat a táblázatok használatára a sorokra és oszlopokra bontott numerikus adatok bemutatására. ábrán. 4.2 A táblázat használata csak a dokumentum formázását és az oldalelemek egymáshoz viszonyított helyzetének meghatározását szolgálja. Egy ilyen dokumentum megtekintésekor nem egyértelmű, hogy egy táblázatot használnak a felépítéséhez, mivel a cellái körüli keretek nincsenek megrajzolva.

  Első verzió HTML nyelv nem biztosított speciális eszközöket a táblázatok megjelenítéséhez, mivel elsősorban egyszerű szöveg írására szolgált. A HTML dokumentumok alkalmazási területeinek fejlődésével sürgetővé vált az adatok bemutatásának feladata, amelyet jellemzően sorok és oszlopok jelentenek. Az oszlopsoros adatokat tartalmazó dokumentumok létrehozása kezdetben előre formázott szöveggel történt, melyen belül a szükséges igazítást a szükséges számú szóköz beiktatásával biztosítottuk. Emlékezzünk vissza, hogy a szöveg egy pár címke belsejében

  ÉS

  monospace betűtípussal jelenik meg, és minden szóköz és tabulátor jelentős. Az ilyen szövegek igazítása manuálisan történt, ami jelentősen lelassította a dokumentumok létrehozását. A táblázatos adatmegjelenítés támogatása de facto szabvánnyá vált, mivel kezdetben az összes vezető böngészőben implementálták, és csak hosszú idő elteltével került bele a HTML 3.2 specifikációba.

  A táblázatok készítésére szolgáló speciális eszközök azonban nem zárják ki az előre formázott szöveg használatának lehetőségét. A táblázatok használata nem korlátozódik a sorokból és oszlopokból álló adatokra. Az egyik alkalmazás a különféle adatok elrendezésének megszervezésére szolgál egy oldalon, amely lehet egyszerű szövegből, képekből, egyéb táblázatokból stb. Ebben a fejezetben a táblázatok létrehozásának szabályait és azok felhasználási példáit ismertetjük.

  

  Rizs . 4.1. Tipikus HTML táblázat példa

  
  

  Rizs . 4.2. Példa egy szegély nélküli táblázatra

  Egyszerű HTML táblák készítése

  Először nézzük meg a címkék minimális készletét és paramétereit, amelyek szükségesek és elegendőek az egyszerű táblázatok létrehozásához, majd térjünk át a részletes leírásukra.

  A táblázatok leírását a dokumentum részben kell elhelyezni . Egy dokumentum tetszőleges számú táblát tartalmazhat, és a táblák egymásba ágyazása megengedett. Minden táblázatnak a címkével kell kezdődnie

  és a címkével fejezzük be. Ezen a címkepáron belül található a táblázat tartalmának leírása. Bármely táblázat egy vagy több sorból áll, amelyek mindegyike az egyes cellák adatait tartalmazza.

  Minden sor a címkével kezdődik (Táblázat sor), és a címkével végződik. Egy sorban egy cellát egy pár címke keretez És(Táblázat adatok) ill És(Táblázat fejléce). Címke általában táblázat fejléccelláihoz használják, és - adatcellákhoz. A használatbeli különbség csak az alapértelmezés szerint a cellák tartalmának megjelenítésére használt betűtípus, valamint az adatok cellán belüli elhelyezkedése. A típusú cellák tartalma félkövér betűtípussal jelenik meg, és középen helyezkedik el (ALIGN=CENTER, VALIGN=MIDDLE). Címke által meghatározott cellák alapértelmezés szerint az adatokat függőleges irányban balra (ALIGN=LEFT) és középre (VALIGN=MIDDLE) igazítva jeleníti meg.

  Címkék És nem jelenhet meg a táblázat sorleírásán kívül . Kitöltési kódok, És elhagyható. Ebben az esetben a sor vagy cella leírásának vége a következő sor vagy cella eleje, illetve a táblázat vége. Vége táblázatcímke nem hagyható ki.

  A táblázat sorainak számát a nyitó címkék száma határozza meg , az oszlopok száma pedig maximális szám vagy az összes sor között. Előfordulhat, hogy egyes cellák nem tartalmaznak adatokat; ezeket a cellákat egy sorban következő címkepár írja le - , . Ha egy vagy több sor végén található cella nem tartalmaz adatot, akkor azok leírása elhagyható, és a böngésző automatikusan hozzáadja a szükséges számú üres cellát. Ebből következik, hogy nem megengedett olyan táblázatok felépítése, amelyekben különböző sorokban különböző számú, azonos méretű oszlop található.

  A táblázatnak lehet fejléce, amely néhány címkéből áll És. A táblázat fejlécének leírását a címkéken belül kell elhelyezni

  És bárhol, de bármelyik címke leírási területén kívül , vagy . A HTML nyelvi specifikáció szerint a fejléc leírásának helye szigorúbban szabályozott: közvetlenül a címke után kell lennie. és egészen az elsőig . Javasoljuk, hogy tartsa be ezt a szabályt.

  Alapértelmezés szerint a táblázat címének szövege fölötte helyezkedik el (ALIGN=TOP) és vízszintesen középre igazítva.

  A felsorolt ​​címkéknek lehetnek paraméterei, amelyek száma és értéke eltérő. A legegyszerűbb esetben azonban a címkéket paraméterek nélkül használják, amelyek alapértelmezett értékeket vesznek fel.

  Ez az információ elégséges elemi táblák készítéséhez. Mutassunk példát egy egyszerű, két sorból és két oszlopból álló táblázatra, amelynek megjelenítése a 2. ábrán látható. 4.3.

  1. cella 1. sor	2. cella 1. sor
  1. cella 2. sor	2. cella 2. sor

  
  

  Rizs. 4.Z. Példa egy egyszerű táblázatra

  Táblázatok bemutatása egy oldalon

  Nézzük meg a táblázatokat leíró címkékben használható különféle paraméterek célját.

  Táblázat címe

  Táblázat fejléc címke egyetlen érvényes ALIGN paraméterrel rendelkezik, amely a TOP (fejléc a táblázat felett) vagy a BOTTOM (fejléc a táblázat alatt) értékeket veszi fel. Az ALIGN paraméter elhagyható, ami az ALIGN=TOP értéknek felel meg. Vízszintes irányban a táblázat fejléce mindig a táblázat közepén található. Előfordulhat, hogy a táblázatnak nincs fejléce. A legtöbb esetben egyszerű szöveget használnak a táblázat címeként, amit a HTML specifikáció szabályoz, de valójában a címkék között És elfogadható a szakaszban használt HTML elemek írása . Íme egy példa a táblázat fejlécére:

  A címsor a táblázat alján található

  Ha ezt a fejlécleírást hozzáadjuk a fenti példához, akkor a táblázat az ábrán látható módon jelenik meg. 4.4.

  
  

  Rizs. 4.4. Táblázat fejléccel

  Microsoft böngésző internet böngésző biztosítja további jellemzők a fejléc pozíciójának kiválasztásához. Az ALIGN paraméter elfogadja a LEFT, CENTER és RIGHT értékeket vízszintes igazításhoz, a fent leírt értékekkel együtt. Vegye figyelembe, hogy ez azon ritka esetek egyike, amikor a széles körben használt ALIGN paraméter vízszintes és függőleges igazításra is használható. Például az ALIGN=RIGHT kiírása biztosítja, hogy a fejléc a jobb oldalra és az asztal fölé kerüljön. Ha ALIGN=BOTTOM írunk, akkor a fenti példához hasonlóan a fejléc a táblázat alatt lesz. Az ALIGN paraméter kétszeri használata ugyanabban a fejlécben azonban nem megengedett. Ezért a függőleges igazításhoz egy speciális paramétert is bevezettek - VALIGN, amely a TOP vagy BOTTOM értékeket veszi fel. Például egy balra igazított táblázat alján található fejléc esetében a leírás így néz ki:

  A címsor alul, balra igazítva

  A Microsoft Internet Explorerben a fejléc leírását tartalmazó táblázat a következőképpen jelenik meg (4.5. ábra). Ha ezt a példát a Netscape-ben tekintjük meg, akkor a fejléc alapértelmezés szerint a táblázat fölé, vízszintes irányban középre kerül.

  
  

  Rizs. 4.5. Vízszintes táblázatfejléc-igazítás a Microsoft Internet Explorerben

  A táblázatfejléc vízszintes igazítási képességei a HTML-specifikáció kiterjesztése, és a Netscape Navigator nem támogatja őket, ezért csak akkor szabad használni, ha feltétlenül szükséges.

  Címkebeállítások

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

  . Számos paraméterrel használható, amelyek mindegyike elhagyható. Készlet elfogadható paraméterek böngészőtől függ. A címkében szereplő HTML specifikáció szerint A következő paraméterek használhatók: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. A NetScape és a Microsoft Internet Explorer böngészők lehetővé teszik, hogy a fent felsorolt ​​öt paraméteren kívül még HEIGHT paraméterekés BGCOLOR. Egyes böngészők más beállítások megadását is lehetővé teszik. Nézzük meg a gyakran használt címkeparaméterek célját .

  BORDER paraméter

  A BORDER paraméter szabályozza a szegély megjelenését az egyes cellák körül, amelyek lényegében a táblázat rácsvonalai, és az egész táblázat körül. Alapértelmezés szerint a keretek nem rajzolódnak ki, és a felhasználó csak a táblázat celláinak egyenletesen elosztott szövegét fogja látni a képernyőn. Sok olyan helyzet adódik, amikor a keret nélküli táblázatok használata igencsak indokolt, például a táblázatokkal megvalósított többoszlopos listáknál, vagy a képek és szövegek pontos egymáshoz viszonyított helyzetének megadásakor. A legtöbb esetben azonban a hagyományos táblahasználatnál hasznos, ha celláit rácsvonalakkal választják el egymástól, ami megkönnyíti a táblázatban foglalt információk észlelését és megértését.

  Ha kereteket szeretne hozzáadni a táblázathoz, be kell írnia a kódot

  BORDER paraméter, amely számértékkel is rendelkezhet.

  Például,

  vagy .

  A paraméter számértéke határozza meg a szegély vastagságát pixelben, amely a teljes táblázat köré rajzolódik, de ez az érték nem befolyásolja az egyes cellák körüli szegélyek vastagságát. Ha nincs számérték, azt általában a minimális értéknek (1) tekintik, bár a szegélyek megjelenítési stílusa böngészőnként eltérő lehet. Nem lehet önállóan vezérelni a teljes táblázat körüli keret és a cellák körüli szegélyek megjelenítését.

  ábrán látható egy példa egy 10 pixel vastag kerettel rendelkező táblázatra. 4.6.

  
  

  Rizs. 4.6. Táblázat 10 pixeles szegéllyel

  A HTML 3.0 specifikáció nem tartalmazott értéket a BORDER paraméterhez. Ez csak a HTML 3.2-ben érhető el. Tehát különösen a korai Microsoft verziók Az Internet Explorer nem engedélyezte a numerikus érték beállítását.

  Vegye figyelembe, hogy ha nincs paraméter BORDER keretek nem rajzolódnak ki, de hely marad nekik (ez csak a Netscape-re vonatkozik). A tábla teljes mérete nem változik a BORDER paraméter hiányában vagy jelenléte esetén (kivétel az, ha BORDER=0 van megadva). És így, minimális távolság két szomszédos cella között ezekben az esetekben a keret vastagságának kétszerese, azaz két pixel lesz. Lehetőség van a cellák egymáshoz lehető legközelebbi elhelyezésére a BORDER=0 beállításával, ami azt jelenti, hogy nincsenek keretek. Előfordulhat, hogy egyes böngészők nem támogatják a BORDER paraméter numerikus értékre állítását, ebben az esetben a nulla értéket figyelmen kívül hagyja, és a táblázat szegélyekkel lesz megrajzolva.

  Íme néhány példa:

  A Netscape böngésző mindhárom fenti példát eltérően fogja megjeleníteni. Vegye figyelembe, hogy ez egy meglehetősen egyedi eset, amikor nem beszélhetünk alapértelmezett értékről. A harmadik példa, amelyben a BORDER paraméter ki van hagyva, eltér minden olyan 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 azonos, ezért az adott böngésző esetében a BORDER paraméter alapértelmezett értéke nulla.

  CELLSPACING paraméter

  Paraméterírási forma: CELLSPACING=num, ahol a szám a paraméter számértéke pixelben, amely nem hagyható ki. A num érték meghatározza a szomszédos cellák (pontosabban cellakeretek) közötti távolságot vízszintesen és függőlegesen egyaránt. Az alapértelmezett érték kettőre van állítva. Vegye figyelembe, hogy hagyományosan a közzétételi rendszerekben a szomszédos táblázatcelláknak közös határa van. A HTML táblákban alapértelmezés szerint hely marad közöttük, amint az a fenti ábrán is jól látható (4.6. ábra). Ha a CELLSPACING=0 értéket állítja be, a szomszédos cellák keretei egyesülnek, és egyetlen táblázatrács benyomását keltik (4.7. ábra).

  
  

  Rizs. 4.7. Táblázat CELLSPACING=0 értékkel

  CELLPADDING paraméter

  A paraméter rögzítésének formája hasonló a CELLSPACING-hez. A num érték határozza meg a cella kerete és a cellán belüli adatok közötti szabad hely (margó) mennyiségét. Alapértelmezés szerint az érték egy. A CELLPADDING nullára állítása azt okozhatja, hogy a cella szövegének egy része megérinti a cella határát, ami nem túl esztétikus.

  ábrán. A 4.8. ábra egy példatáblázatot mutat be CELLPADDING=10 értékkel.

  
  

  Rizs. 4.8. CELLPADDING=10 értékű táblázat

  A CELLPADDING és CELLSPACING paraméterek hatása nagyon hasonló egymáshoz. Egy szegély nélküli tábla esetén az egyik vagy másik paraméter megváltoztatása ugyanarra az eredményre vezet. Mindkét paraméter egyszerre érinti a megfelelő behúzásokat vízszintesen és függőlegesen. Sajnos a vízszintes és függőleges behúzások külön vezérlése, például a képek behúzásainál (a címke HSPACE és VSPACE paraméterei ), nem biztosított.

  Mindhárom paraméter - BORDER, CELLPADDING és CELLSPACING egymástól függetlenül működik, ha bármelyiket kihagyjuk, akkor az alapértelmezett értéket veszi fel. Ha az összes felsorolt ​​paramétert kihagyjuk, akkor a szomszédos cellák adatai közötti minimális távolság 6 pixel lesz (Netscape esetén). Ez az érték két képpont összege a CELLSPACING, egy pixel a CELLPADDING és egy pixel az egyes cellák szegélye. A legkompaktabb táblázatot a következő leírás megadásával kapjuk meg:

  Csak ebben a verzióban a cellák egymáshoz közel helyezkednek el. Példa erre egy olyan táblázat, amelynek minden cellája azonos méretű képeket tartalmaz, amelyeket egymás mellé kell helyezni.

  WIDTH és HEIGHT paraméterek

  Táblázatok megjelenítésekor a szélességet és magasságot a böngésző automatikusan kiszámítja, és számos tényezőtől függ: a teljes dokumentum leírásában megadott paraméterek értékei, ez a táblázat, egyes sorai és cellái, a cellák tartalma , valamint a dokumentum egy adott böngészőben történő megtekintésekor megadott paraméterek, például a betűtípus és -méretek, a megtekintő ablakok mérete stb. Megjelenítéskor a táblázatok méretét a rendszer automatikusan kiszámítja, figyelembe véve ezeket a tényezőket, és megpróbálja mutassa be az asztalt a legkényelmesebb formában - úgy rendezze el az asztalt, hogy illeszkedjen a nézőablakhoz. Általános séma A nagyméretű dokumentumok megtekintése általában a dokumentum tartalmának lineáris függőleges görgetéséből, valamint különféle táblázatokkal, képekkel stb. tarkított szöveg olvasásával jár. Ez vonatkozik mind a HTML-dokumentumokra, mind a bármilyen szövegszerkesztőben létrehozott normál dokumentumokra. A legtöbb mindkettő szövegszerkesztő (pl. Microsoft Word), a HTML böngészők pedig automatikusan úgy formázzák a szöveget (ha lehetséges), hogy a sorok hossza ne haladja meg a megtekintő ablak szélességét. Ezzel elkerülhető, hogy vízszintesen görgessen a dokumentumban. A böngészők hasonló műveleteket hajtanak végre a táblázatokkal – ha lehetséges, formázza azokat úgy, hogy a táblázat szélessége ne haladja meg a megtekintő ablak szélességét. Megállapíthatjuk, hogy a táblázatok szélessége fontosabb, elsődleges paraméter, amelynek kiszámítása a magassághoz képest először történik meg.

  A legtöbb esetben a dinamikus táblázatméretezés esztétikailag arányos képet eredményez, amely hatékonyan használja ki a tényleges nézetablak területét. Szükséges lehet azonban az asztal szélességének vagy magasságának megadása. Erre a célra a címke WIDTH (táblaszélesség) és HEIGHT (tábla magassága) paramétereit használjuk

  . Jelölési forma: WIDTH=num vagy WIDTH=num%, ahol a szám a teljes táblázat szélességének számértéke pixelben vagy a teljes ablakméret százalékában. Vegye figyelembe, hogy elfogadható 100%-nál nagyobb értékek beállítása, bár nehéz elképzelni olyan esetet, amikor erre szükség lenne. Példa:
  .

  Hasonló paraméterek állíthatók be az egyes cellákhoz. Megjegyzendő, hogy egy adott paraméterérték megadása, például WIDTH=200, nem jelenti azt, hogy a táblázat minden esetben a megadott szélességű lesz, hanem csak az ajánlott szélességet határozza meg, amelyet lehetőség szerint megtartunk. Magyarázzuk meg ezt példákkal. Legyen egy táblázat, amely ilyen feltételek mellett alapértelmezés szerint kisebb lenne, mint a megadott. Ebben az esetben a böngésző a táblázat szélességét a kívánt méretre növeli a táblázat összes oszlopának arányos kibontásával. Ha szűkíti a nézetablakot, a táblázat szélessége nem változik, és előfordulhat, hogy vízszintesen kell görgetnie a megtekintéséhez. Ha az alapértelmezett táblázat szélessége nagyobb, mint a megadott, akkor a böngésző megpróbálja csökkenteni a szélességét egyrészt az egyes oszlopok szélességének csökkentésével, amelyeknél a megadott szélesség nagyobb a szükségesnél, másodsorban pedig a szöveg felosztásával. az egyes cellákat több sorba, a táblázat magasságának növelésével. Előfordulhat, hogy ezek a műveletek nem biztosítják a szükséges táblázatméretet, ebben az esetben a lehető legkisebb szélesség lesz. Ugyanezek a műveletek a nézetablak szűkítésekor a nem meghatározott méretekkel rendelkező táblázatoknál is megtörténik.

  A táblázatok beállítására szolgáló algoritmusok a különböző böngészőkhöz kissé eltérhetnek.

  ALIGN paraméter

  Ez a címkeparaméter

  meghatározza a táblázat vízszintes helyzetét a nézeti területen. Az érvényes értékek a LEFT (balra igazítás) és RIGHT (jobbra igazítás). Alapértelmezés szerint a táblázatok balra vannak igazítva. Vegye figyelembe, hogy az érvényes értékek között nincs tipikus érték az igazítási paraméternek - CENTER. Egyes HTML-irodalom a CENTER-t ebben az esetben elfogadhatóként sorolja fel. Ez összhangban van a HTML specifikációval, de a gyakorlatban a Netscape Navigator és a Microsoft Internet Explorer is csak két értéket valósít meg. Az a tény, hogy az ALIGN paraméter jelenléte a címkében nemcsak a táblázat helyét határozza meg, hanem lehetővé teszi a szövegek körbefűzését az asztal ellentétes oldaláról, hasonlóan a képek köré. Nincs lehetőség arra, hogy a szöveg mindkét oldalon körbefusson az asztalon. A csomagolás pontosabb ellenőrzéséhez használja a címkét
  a CLEAR paraméterrel ugyanúgy, mint a esetén . Ha az ALIGN kimarad, a táblázat jobb és/vagy bal oldalán lévő szóköz mindig üres lesz, függetlenül a szélességétől. Ha a táblázathoz nem szükséges szöveget körbefűzni, akkor gondoskodhat arról, hogy a nézetablak közepén legyen. Ehhez például elhelyezheti a teljes táblázat leírását egy pár címke belsejében És.

  Nézzünk egy példát egy táblázatra tördelő szöveggel, amelynek megjelenítése a 2. ábrán látható. 4.9.

  felnőtt

  Szentpétervár lakossága

  Abrám Sándor Alekszej Albert Anatolij Andrey Arkagyij Boris Vadim Szerető Valerij Bazsalikom Győztes Vitalij Vlagyimir Vladislav Vjacseszlav Gennagyij Georgiy Hermann Gregory Dmitrij

  Eugene Efim Ivan Igor Ilja József Konstantin egy oroszlán Leonyid Michael Nikolai Oleg Pál Péter Regény Semyon Szergej Stanislav Edward Yuri Jakov

  
  
  
  
  
  
  

  
  A feltüntetett 43 leggyakrabban előforduló név a minta 92%-át fedi le.
  

  

  Rizs. 4.9. Szegély nélküli táblázat csomagoló szöveggel

  Ez a dokumentum egy szegély nélküli táblázatból áll, ALIGN=LEFT igazítási beállítással, amely lehetővé teszi, hogy a táblázatot követő szöveg megjelenjen tőle jobbra. A táblázat csak egy sorból áll, amely két cellát tartalmaz. Minden cella egy rendezetlen lista egy részét tartalmazza

  . Táblázat használata a lista megjelenítéséhez az egyik módja annak, hogy a listát több oszlopra kényszerítse, amint ezt ez a példa is szemlélteti. Lehet, hogy a táblázat jobb oldalán található szöveg nem fér el oda, de a táblázat után folytatódik. Próbálja meg ezzel a példával csökkenteni a böngészőablak szélességét, és egy ponton az összes szöveg megjelenik a táblázat alján. Emlékeztessünk arra, hogy a szöveg áramlásának erőszakos megszakításához a táblázatban (például ha a következő szöveg logikailag nem kapcsolódik a táblázathoz, és alatta kell lennie), használja a kódot.
  a CLEAR paraméterkészlettel. Ehhez a példához írnod ​​kell
  vagy
  . Egyes böngészők lehetővé teszik a CLEAR paraméter érték nélküli írását, de ez nem ajánlott. Ugyanazon feladat végrehajtásához több soremelést kell megadni
  a CLEAR paraméter nélkül (ahogyan a szöveg előtti példában is megtörténik, hogy több sorral lefelé toljon) vagy több kód nélkül az új bekezdés kezdetéhez

  Rossz döntés.

  Nézzünk egy kicsit más példát egy ilyen oldal létrehozására, amelynek megjelenítését a ábra mutatja. 4.10.

  A leggyakoribb férfinevek

  Szentpétervár felnőtt lakossága

  Abrám Sándor Alekszej Albert Anatolij Andrey Arkagyij Boris Vadim Szerető Valerij Bazsalikom Győztes Vitalij Vlagyimir Vladislav Vjacseszlav Gennagyij Georgiy Hermann Gregory Dmitrij

  Eugene Efim Ivan Igor Ilja József Konstantin egy oroszlán Leonyid Michael Nikolai Oleg Pál Péter Regény Semyon Szergej Stanislav Edward Yuri Jakov

  A bemutatott adatok a Szentpéterváron élő 5000 18 éven felüli férfiról szóló információkat tartalmazó reprezentatív minta elemzése alapján készültek. Ez a 43 leggyakrabban előforduló név a minta 92%-át fedi le. A többi név előfordulási gyakorisága nem haladja meg a 0,3%-ot

  

  Rizs. 4.10. Három oszlopot tartalmazó, szegély nélküli táblázat

  Az előző példától eltérően a táblázat körül nincs szöveg. A teljes dokumentum egy táblázatból áll, amelynek fejléce három cellát tartalmaz egy sorban. Az első két cella teljesen megismétli az előző példát. A harmadik cella olyan szöveget tartalmaz, amely az első két cella tartalmát kommentálja. Itt nem kell erőltetni a szöveglezárást, ahogy azt az előző esetben leírtuk. A táblázathoz kapcsolódó összes szövegnek a harmadik cellában kell lennie, a következő szövegnek pedig a teljes táblázat leírásának vége után kell lennie. Mindkét példa teljes képernyőn nézve teljesen azonosnak tűnik, kivéve a fejlécet, amely az első esetben egy kétoszlopos lista közepén, a második esetben pedig mindhárom oszlop közepén található. az asztal. Ha azonban az utolsó példában a nézetablakot lecsökkentjük, a szöveg egyetlen része sem kerülhet a táblázat alá, ami megtöri annak szerkezetét.

  Adatok formázása táblázaton belül

  A táblázat minden egyes cellája független formázási területként kezelhető. A szöveg megjelenítését szabályozó összes szabály felhasználható a cellán belüli szöveg formázására. Egy cellán belül szinte minden olyan HTML-elem használata elfogadható, amely a dokumentum törzsében megjelenhet , beleértve a szöveg elhelyezését szabályozó címkéket -

  ,
  ,

  ---

  , fejléckódok - innen

  előtt

  , karakterformázó címkék -<В>, , , , , , , címkék grafikus képek beillesztése , hiperszöveges hivatkozások<А>stb. Azonnal hangsúlyozzuk, hogy a külön cellán belül megadott címkék hatóköre ennek a cellának a határaira korlátozódik, függetlenül attól, hogy van-e zárócímke. Például, ha egy szöveg színe van meghatározva egy cellán belül - , akkor lezáró kód hiányában is vagy több cellába vagy táblázatsorba helyezve a következő cella szövege az alapértelmezett színben fog megjelenni.

  A táblázatcellákon belüli adatok formázásához a következő lehetőségek állnak rendelkezésre.

  A cellatartalom igazítási beállításai: ALIGN és VALIGN. Kódokban használható , És . Az ALIGN vízszintes igazítási paraméter a LEFT, RIGHT és CENTER értékeket veheti fel (az alapértelmezés a LEFT és KÖZÉP a ). A VALIGN függőleges igazítási paraméter a következő értékeket veheti fel: TOP (felső él), BOTTOM (alsó él), MIDDLE (középen), BASELINE (alapvonal). Az alapértelmezés a MIDDLE. Az alapvonal-igazítás biztosítja, hogy az összes cellában egy sor szövege egyetlen sorhoz legyen rögzítve. Igazítási opciók beállítása kódszinten egy adott sor összes cellájánál meghatározza az igazítást, míg a sor minden egyes cellájához saját paraméterek határozhatók meg, amelyek felülírják a pontban megadott paraméterek hatását. .

  Íme egy példa egy táblázatra, amelyben az első oszlop celláiban lévő adatok jobbra, a második oszlop középre, a harmadik pedig balra igazítva (alapértelmezett):

  1. cella	2. cella	3. cella
  4. cella	5. cella	6. cella

  Ennek a példának a böngészőképernyője az ábrán látható. 4.11.

  
  

  Rizs. 4.11. Adatok igazítása táblázatcellákban

  A NOWRAP beállítás letiltja a cella szövegének automatikus sorokra osztását. Kódokban használható , És . Ennek a paraméternek a szükségtelen használatát kerülni kell, mert jelentősen csökkentheti a táblák dinamikus átméretezésének lehetőségét, és ronthatja olvashatóságukat. A legtöbb esetben elegendő a NOWRAP használata az egyes cellákhoz, amelyek valóban megkövetelik a szótörlés tilalmát. A tördelést csak a szavak közötti elválasztók (szóközök) végzik, és bizonyos esetekben, hogy bizonyos helyeken ne törjenek szöveget, a szóköz helyett a nem törő szóközt (NonBreaking Space) kell beállítani. A példák közé tartoznak azok az esetek, amikor nem ajánlott hézagot hagyni - egy számérték és egy adott érték mértékegységei között; a vezetéknév és a kezdőbetűk között. Tehát a szöveg 650 km vagy Jelcin B.N. Ajánlott az űrlapba írni 650 km és Jelcin B.N.

  A WIDTH és HEIGHT paraméterek használhatók a kódokban És . Szintaxisuk hasonló a címke ezen paramétereinek szintaxisához

  . Értékük határozza meg annak a cellának a szélességét vagy magasságát, amelyhez ezek a paraméterek rögzítve vannak. Az értékek pixelben vagy a teljes táblázat méretének százalékában adhatók meg. A Microsoft Internet Explorer csak a WIDTH képpontban történő megadását teszi lehetővé. Mivel a táblázat sorokból és oszlopokból álló koherens struktúra, bármely cella szélességének beállítása a teljes oszlop szélességét befolyásolja, amelyben a cella található, a magasság beállítása pedig a teljes sort. Ha egy oszlop szélessége csak egy cellában van megadva, akkor ez az érték lesz a teljes oszlop szélessége. Ha több ilyen jelzés van, akkor a maximális érték kerül kiválasztásra. Ugyanezek a tulajdonságok vonatkoznak a karakterláncokra is.

  Az összetett táblázatokat az jellemzi, hogy több szomszédos cellát vízszintesen vagy függőlegesen kell egyesíteni. Ez a funkció a kódokban megadott COLSPAN (COLiimn SPANning) és ROWSPAN (ROW SPANning) paraméterekkel valósul meg.

  a csoport egyes oszlopainak beállításai vannak megadva. Ugyanakkor a címkében Szükség esetén megadhatók az illesztési paraméterek, amelyek értéke egy adott csoport összes oszlopára vonatkozik. A címkében megadott paraméterértékek , felülírja a címke értékeit . Vegye figyelembe, hogy a címkében ebben a példában az előzővel ellentétben nincs SPAN paraméter. Itt értelmetlen a használata, mivel a csoport elemeinek számát a címkét követők határozzák meg címkéket . Ezért a SPAN címke paraméter bármely adott értéke felül lesz írva.

  ábrán. A 4.17. ábra mutatja a fenti kód megvalósításának eredményét, valamint egy ilyen táblázat megjelenítési lehetőséget a címkében a RULES=GROUPS bejegyzéssel

  vagy

  . Jelölési forma: COLSPAN=szám, ahol a szám egy numerikus érték, amely meghatározza, hogy az aktuális cellát hány oszlopra kell kibontani vízszintesen. A ROWSPAN paraméter használata hasonló, csak itt adja meg a sorok számát, amennyit az aktuális cellának függőlegesen kell átnyúlnia. Alapértelmezés szerint ezek a paraméterek egyre vannak állítva. Megengedett mindkét paraméter értékének egyidejű beállítása egy cellához. Ezeknek a paramétereknek az értékeinek helyes beállítása nem túl egyszerű feladat, különösen azért, mert a legtöbb HTML-szerkesztő lehetővé teszi, hogy vizuálisan csak egyszerű táblázatokat készítsen a HTML-kódok későbbi generálásával. ábrán. A 4.12. ábra a következő HTML-kódból nyert táblázat-megjelenítési példát mutat be: Két soron átívelő cella Két oszlopot átívelő cella 3. cella 4. cella 5. cella 6. cella 7. cella Rizs. 4.12. Több sort vagy oszlopot átívelő cellákat tartalmazó táblázat A cellák csúszóparamétereinek értékeinek figyelmetlen beállítása kölcsönös átfedéshez és konfliktusokhoz vezethet, amelyekben az eredmény megjósolhatatlan. A kiterjesztett cellák tipikus használata több szomszédos oszlop vagy sor közös fejléce. Itt van egy példa a HTML kódra (amelynek megjelenítése a 4.13. ábrán látható), amelyben a kiterjesztett cellák helytelenül vannak kialakítva. 1. cella 2. cella 3. cella (gyakori Ha három vonalak) 4. cella 5. cella 6. cella 7. cella (két oszlopra szétosztva) Rizs. 4.13. A kiterjesztett cellák helytelen meghatározásának eredménye (szövegfedvény) A BGCOLOR paraméter a teljes táblázat, az egyes sorok vagy cellák háttérszínét adja meg. Megjelenhet a címkékben , , nem tartalmaz információt, vagy egy vagy több olyan helyet, amelyet nem kezelünk adatként. A láthatatlan adatokat tartalmazó cellák például kódot vagy soremelési kódot tartalmazhatnak , vagy bármely olyan szöveg, amelynek színe megegyezik a cella háttérszínével. Míg az adatokat tartalmazó cellákat (még akkor is, ha láthatatlanok) minden böngésző ugyanúgy jeleníti meg, az üres cellákat másképp jeleníti meg. A Netscape böngésző nem jelenít meg üres cellát, vagyis azt a helyet, ahol ez a cella található, az oldal háttérszíne fogja kitölteni, és nem a cella háttérszíne, ellentétben az adatokat tartalmazó cellákkal. Nincs határvonal az üres cellák köré. ábrán látható egy példa egy üres cellát tartalmazó táblázatra. 4.15. Rizs. 4.15. Az üres táblázatcellák eltérően jelennek meg a különböző böngészőkben A Microsoft Internet Explorer mindkét cellát a cellák háttérszínével jeleníti meg. Egy böngésző, például az NSCA Mosaic lehetőséget biztosít a felhasználónak, hogy a megfelelő opciók kiválasztásával meghatározza az üres táblázatcellák megjelenítésének jellegét. Az ilyen funkciók ismerete lehetővé teszi olyan táblázatok kidolgozását, amelyek megfelelően jelennek meg, függetlenül a felhasználó által választott böngészőtől. Bizonyos esetekben elegendő egyetlen kódot tartalmazó cellákat létrehozni néhány üres cella helyett. Adatok igazítása a táblázat oszlopaiban A táblázatok létrehozásakor gyakori probléma az igazítási paraméterek beállítása az egyes sorokhoz vagy oszlopokhoz. Az aktuális sor összes cellájának igazításához csak állítsa be a szükséges paramétereket a kódban . Gyakrabban azonban szükséges ugyanazt az igazítást biztosítani ugyanannak az oszlopnak az összes eleméhez, mivel az esetek többségében az oszlop homogén adatokat tartalmaz. A HTML korai verzióiban erre a COLSPEC (COLumn SPECification) paraméter használatát javasolták, amelyet a címkében adtunk meg. És . Ezt a funkciót a HTML specifikáció nem biztosítja, de a Netscape és a Microsoft Internet Explorer is támogatja. A nevezési lap ugyanaz, mint a címkénél , nevezetesen: BGCOLOR=érték, ahol az érték a szín tartalma RGB formátumban vagy annak neve. Példa: vagy . Beágyazott asztalok Az egyes táblázatcellák gyakorlatilag bármilyen, a szakaszban engedélyezett nyelvi címkét és adatot tartalmazhatnak dokumentum. Különösen egy másik táblázat helyezhető el teljesen egy táblázatcellán belül. Az ilyen táblákat beágyazottnak nevezzük. Felépítésükre vonatkozó szabályok nem térnek el a táblázatok felépítésétől, és nem igényelnek külön leírást. Csak azt jegyezzük meg, hogy nem minden böngésző, amely támogatja a táblázatokat, megfelelően jelenít meg összetett táblázatokat többszintű beágyazással, ezért használatuk körültekintést igényel. Adjunk példát egy táblára, amely egy szintű beágyazást használ. A leningrádi régió városai H - város lakossága (ezer lakos, 1992) P - távolság Szentpétervártól (km) Szentpétervárnak alárendelt városok Város H P Zelenogorszk 13.6 50 Kolpino 144.6 26 Kronstadt 45.2 48 Lomonoszov 42.0 40 Pavlovszk 25.4 30 Petrodvorets 83.8 29 Puskin 95.1 24 Sesztroreck 34.9 35 Minden város alá tartozik adminisztráció Szentpétervár, van közvetlen város telefonszámok. Területi alárendeltségű városok Város H P Boksitogorszk 21.6 IGAZÍTÁS=JOBBRA>245 Bolkhov 50.3 IGAZÍTÁS=JOBBRA>122 Bsevolozhsk 32.9 24 Vyborg 80.9 130 Viszock 1.0 IGAZÍTÁS=JOBBRA>159 Gatchina 80.9 46 Ivangorod 11.9 IGAZÍTÁS=JOBBRA>147 Kamennogorszk 5.9 157 Kingisepp 51.5 IGAZÍTÁS=JOBBRA>138 Kirishi 53.8 IGAZÍTÁS=JOBBRA>115 Kirovsk 23.8 55 Lodeynoye Pole 27.3 IGAZÍTÁS=JOBBRA>244 Lyga 41.8 139 (A táblázat folytatása) Város H P Lyuban 4.7 85 Novaja Ladoga 11.2 IGAZÍTÁS=JOBBRA>141 Otradnoe 22. 9 IGAZÍTÁS=JOBBRA>40 Pikalevo 25.1 IGAZÍTÁS=JOBBRA>246 Podporozhye 23.1 285 Primorszk 6.7 137 Priozersk 20.5 IGAZÍTÁS=JOBBRA>145 Szvetogorszk 15.8 IGAZÍTÁS=JOBBRA>201 Palák 42.6 IGAZÍTÁS=JOBBRA>192 Ananászültetvény 57.6 81 Tikhvin 72.0 IGAZÍTÁS=JOBBRA>200 Tosno 33.8 53 S Lisselburg 12.5 64 Rizs. 4.14. Példa beágyazott táblákra A példa megjelenítési eredménye az ábrán látható. 4.14. Első pillantásra úgy tűnik, hogy a példában nincs táblázatok egymásba ágyazása. Valójában az egész dokumentum egy táblázat, amelynek nincsenek szegélyei, és egy fejlécből és egy öt cellát tartalmazó sorból áll. Egy ilyen táblázat szervezése kizárólag az adatok rendszerezését szolgálja az oldalon. Az első cellában egy másik táblázat található, amelynek saját címe van, és három oszlopból áll, amit középre igazított szöveg követ. A harmadik és ötödik cella külön táblázatot is tartalmaz. A második és a negyedik cella üres, nem tartalmaz adatokat, és egyetlen WIDTH paraméterrel rendelkezik, amely meghatározza a szélességét. Céljuk az első és harmadik, valamint a harmadik és ötödik cella közötti behúzás beállítása, amelyben a táblázatok találhatók. Ez az egyik lehetséges lehetőség egy ilyen behúzás beállítására. Egy másik lehetőség a CELLSPACING paraméter használata, amely meghatározza a cellák közötti távolságot, azonban ez a paraméter vízszintes és függőleges kitöltést is megad, amelyre jelenleg nincs szükség. Ezenkívül egy adott szélességű üres cella zsugorodik a nézetablak szűkítésekor, ellentétben a CELLSPACING paraméterben (valamint a CELLPADDING) megadott térközzel. Ezzel a példával próbálja meg csökkenteni a böngészőben a megtekintési terület szélességét, vagy – ami ugyanazt az eredményt fogja elérni – növelje a betűméretet, amelyben a szöveg megjelenik. A táblázatok közötti távolság nullára csökken, ami lehetővé teszi az összes információ egyidejű megjelenítését a lehető leghosszabb ideig, azonban a további változtatások nem vezetnek a táblázat károsodásához, hanem lehetővé teszik a vízszintes görgetést. Hasonló sémával megszervezheti a nem csak táblázatokból álló információk elhelyezését, hanem képeket, szövegrészleteket stb. Az asztalok felépítésének jellemzői Ez a rész az egyes böngészők néhány speciális képességét, valamint a táblázatok összeállításának és megjelenítésének néhány finomságát tárgyalja. Üres cellák megjelenítése a táblázatokban A táblázat megjelenítésének egyik jellemzője a különböző böngészőkben az üres cellák megjelenítése. A nyelvi leírás szerint minden böngészőnek üres cellákkal kell kitöltenie a sorokat, ha valamelyik sorban a szám kisebbre van állítva, mint más sorokban. Ezenkívül a táblázatban bárhol lehetnek olyan cellák, amelyek nem tartalmaznak adatokat. Különbség van az üres cellák és a láthatatlan adatokat tartalmazó cellák között. Üres cellákban egy pár címke belsejében És és meghatározta az egyes táblázatoszlopok igazítását és szélességét. Például a colspec="L40 R50 C80" feladat meghatározta a táblázat három oszlopának celláiban lévő adatok igazítását: az első oszlopban - BALRA, a másodikban - JOBBRA és a harmadikban - CENTER, valamint a minden oszlop szélessége. A HTML fejlődésével ezt a lehetőséget elhagyták, és jelenleg nem része a nyelvi specifikációnak, és a legtöbb böngésző nem támogatja. Ennek eredményeként a Netscape Navigator nem rendelkezik speciális eszközökkel a probléma megoldására, és az egyetlen lehetőség az alapértelmezett igazítás használata, vagy a megfelelő értékek beállítása minden cellában, ahol szükséges. A Microsoft Internet Explorer speciális címkéket biztosít - És . Ezeket a címkéket közvetlenül a leírás után kell elhelyezni a címke első megjelenése előtt . Címke paraméterei És lehet SPAN, amely meghatározza a paraméterértékek által érintett szomszédos oszlopok számát, és az ALIGN, amely meghatározza az adatok vízszintes igazítását a megfelelő oszlop (vagy oszlopok) összes cellájában. Az ALIGN érvényes értékei: LEFT, RIGHT és CENTER. A SPAN paraméter alapértelmezett értéke egy. Címke emellett lehetővé teszi a VALIGN paraméter beállítását, amely meghatározza a cellákban lévő adatok függőleges igazítását. A VALIGN érvényes értékei: MIDDLE, TOP és BOTTOM. A címkék közötti különbség És az, hogy az első az oszlopok adatigazítási paramétereinek beállításán túl több oszlop feltételes egyesítését is végrehajtja egy csoportba. Ennek a kombinációnak a hatása a RULES paraméter használatakor látható, amelyet alább ismertetünk. Alapértelmezés szerint a táblázat összes oszlopa egy csoportnak számít. Címke csak a csoport egyes oszlopaiban lévő adatok igazításának meghatározására használható. Mondjunk egy példát. Tegyük fel, hogy létre kell hoznia egy 6 oszlopot tartalmazó táblázatot, és az első háromban lévő adatokat jobbra kell igazítani, a következő három pedig középen. A probléma megoldásához írja be a következő HTML-kódrészletet: (adatok a táblázathoz) A kód megjelenítésének eredménye az ábrán látható. 4.16. Rizs. 4.16. Táblázat különböző adatigazítási lehetőségekkel cellacsoportokban Egy másik példa. Tegyük fel, hogy az előző táblázatban az első két oszlopot jobbra, a harmadikat pedig középre kell igazítani, és mindhárom oszlopot egy csoportba kell egyesíteni. A következő három oszlopot szintén csoportosítani kell, és az első csoporthoz hasonló igazítással kell rendelkezni. A probléma megoldásához írja be a következő HTML-kódrészletet: (adatok a táblázathoz) Ebben a példában a címke után

  , amelyből egyértelmű a csoportokba vonás értelme.

  Tanács

  A címkék hatálya óta

  És csak egyetlen böngészőre, a Microsoft Internet Explorerre korlátozódik, óvatosan használja őket. Ezeknek a címkéknek a használatának kényelme nyilvánvaló, de a gyakorlatban a legtöbb tábla a megfelelő ALIGN igazítási paraméterrel épül fel minden táblacellához, ahol szükség van rá, ami jelentősen megnöveli a tábla forráskódjának méretét, de biztosítja a megtekintését bármilyen böngészőt.

  
  

  Rizs. 4.17. Táblázat csoportosított oszlopokkal

  A táblázat szegélyének színének beállítása

  Számos további, a Microsoft Internet Explorerben egyedülálló lehetőség lehetővé teszi a táblázatszegélyek színének kiválasztását – BORDERCOLOR, BORDERCOLORLIGHT és BORDERCOLORDARK. Ezeket a paramétereket címkékben lehet megadni

  , . Ezen paraméterek értéke lehet a szín neve vagy hexadecimális értéke. A BORDERCOLOR paraméter az összes táblaszegély elem színét adja meg, a másik két paraméter pedig az egyes összetevők szegélyeinek színét, felülírva a BORDERCOLOR értéket. A BORDERCOLORLIGHT paraméter a teljes táblázat bal és felső szélét, illetve ennek megfelelően minden cella jobb és alsó szélét a megadott színre festi. A második BORDERCOLORDARK paraméter a szemközti élek színét adja meg. Ezen paraméterek kombinációja miatt a táblázat kissé megemelkedett az oldal felülete felett, vagy bemélyedve jelenik meg. Minden a választott színkombinációtól függ.

  jegyzet

  A Netscape böngésző 4.x verziója is támogatja a BORDERCOLOR beállítást.

  Állítson be háttérképet egy táblázathoz

  A Microsoft Internet Explorer (valamint a Netscape 4.x verziója) lehetővé teszi a BACKGROUND paraméter használatát, amely ugyanúgy egy táblázat háttérképét adja meg, mint egy teljes HTML-dokumentumhoz. Ez a paraméter a címkékben állítható be

  ,	És

  , , w

  A Microsoft Internet Explorer böngésző lehetővé teszi számos új címke használatát a táblázatok strukturálásához, valamint a keretek és rácsvonalak rajzolásának rugalmas vezérléséhez.

  Címkék

  , És a táblázat leírásának felépítését szigorúbban állítsa be, kiemelve a táblázat fejléccelláit, a táblázat főbb tartalmát és az összegző sort. Ezek a címkék csak a táblázatleírásokban jelenhetnek meg egy címkepáron belül

  És	. Táblázat strukturáló címkék

  És.

  Címkék És táblázat fejlécének és láblécének leírására szolgálnak. Ezek a címkék legfeljebb egyszer jelenhetnek meg a táblázatban. Ezek végcímkéje elhagyható. Ezeknek a címkéknek a használata kényelmes, ha nagy, egy oldalon túlnyúló táblázatokat hoz létre.

  Címke többször is megjelenhet a táblázat leírásában, amihez zárócímke használata szükséges. Ez a címke ugyanúgy logikai csoportosítást végez az adatokban, mint a , amely a szomszédos oszlopok csoportosítását végzi el.

  Az új címkék használatával rugalmasabban szabályozhatja a táblázat szegélyeit és rácsvonalait.

  Az asztal körüli keretek rajzolását a FRAME címke paraméter vezérli

  , és táblázat rácsvonalai - a RULES paraméterrel. Például lehetővé válik, hogy csak függőleges vonalakat rajzoljon az oszlopok közé, és a teljes táblázat körüli keret helyett vízszintes vonalakat adjon a táblázat tetején és alján.

  A FRAME paraméter a következő értékeket veheti fel:

  • BOX vagy BORDER - a keret mind a négy oldalára megrajzolódik
  • FELETT - csak a felső oldalról
  • LENT - csak az alsó oldalról
  • HSIDES - az alsó és a felső oldal le van rajzolva
  • VSIDES - a bal és a jobb oldal megrajzolódik
  • LHS - csak a bal oldalon
  • R.H.S. - csak a jobb oldalon
  • ÜRES - asztal külső keretek nélkül

  A RULES paraméter vezérli a belső táblázat rácsvonalainak rajzolását, és a következő értékeket veheti fel:

  • MINDEN - minden belső vonal megrajzolódik
  • CSOPORTOK - csak a csoportokat elválasztó vonalak rajzolódnak ki
  • SOROK - vonalakat húzunk, amelyek elválasztják a vonalakat
  • COLS - az oszlopokat elválasztó vonalak húzódnak
  • EGYIK SEM - belső vonalakat nem húznak

  Példa:

  .

  jegyzet

  A táblázat rácsvonalai és keretei csak akkor jelennek meg, ha a BORDER címke paraméter jelen van

  . Ha ez a paraméter hiányzik, vagy értéke nulla, a rácsvonalak és keretek hiányoznak a FRAME és RULES paraméterek bármely értékénél.

  Íme egy példa a teljes HTML-kódra, amely táblázatot hoz létre a leírt képességek használatával:

  Példa a rugalmas vonalvezetésre
  rácstábla

  1. oszlop címsora	2. oszlopfejléc	3. oszlop fejléce
  Adat	Adat	Adat
  Adat	Adat	Adat
  Adat	Adat	Adat
  Adat	Adat	Adat
  Adat	Adat	Adat
  Adat	Adat	Adat
  A lényeg	A lényeg	A lényeg

  
  

  Rizs. 4.18. Táblázatrácsvonalak rugalmas rajzolása a Microsoft Internet Explorer böngészővel

  Ebben a példában, amelynek a böngésző általi megjelenítése az ábrán látható. A 4.18. ábra mutatja az egyik lehetséges opciót az asztal körüli rácsvonalak és szegélyek vezérlésére. Egy 5 pixel vastag keret (BORDER=S) csak a felső és az alsó oldalra kerül az asztal köré (FRAME=HSIDES). A táblázaton belül rácsvonalak vannak rajzolva az adatcsoportok elkülönítésére (SZABÁLYOK=CSOPORTOK). Az adatcsoportokat először is három címke jelenléte határozza meg , amelyek mindegyike egyetlen táblázatoszlopot deklarál csoport. Másodszor, címkék , És<тгоот>Csoportokra is bontják a táblázat adatait, ami meghatározza a belső vízszintes vonalak rajzolását.

  A táblázat oszlopai számának beállítása

  A Microsoft Internet Explorer böngésző (valamint a Netscape böngésző 4.x verziója) lehetővé teszi a címkében történő megadást

  COLS paraméter, amelynek értéke határozza meg a táblázat oszlopainak számát. Ennek a paraméternek a beírása lehetővé teszi a táblaelrendezési eljárás felgyorsítását böngészőben való megjelenítéskor, mivel lehetővé válik az oszlopok számának meghatározása a táblázatleíró kód betöltése előtt. Jelenleg ennek az opciónak az engedélyezése semmilyen módon nem befolyásolja a dokumentumbetöltés folyamatát.

  A táblázatok függőleges igazítása

  Utolsó címke paraméter

  A Microsoft Internet Explorerben egyedülálló VALIGN, amely meghatározza a táblázat függőleges igazítását a szöveghez képest. Hatása hasonló a képekhez hasonló paraméterhez.

  jegyzet

  Vegye figyelembe, hogy ugyanazon paraméter használata jelentősen eltérhet mind a cél, mind a különböző címkék lehetséges értékei tekintetében, még ugyanazon böngésző esetén és a nyelvi specifikáción belül is. Ezért lehetetlen összeállítani Pivot tábla a különféle paraméterek alkalmazási kontextuson kívüli használatáról. Például az ALIGN paraméter csak a táblázatokban három különböző módon használható:

  • címkéhez

  az ALIGN paraméter BAL vagy JOBB értéket vehet fel, és a táblázat bal vagy jobb széléhez nyomott helyét jelenti;

  címkéhez

  ,

  az ALIGN paraméter a TOP vagy BOTTOM értékeket veszi fel, és a táblázat fejlécének helyét jelenti a táblázat felett vagy alatt;

  címkékért

  És

  az ALIGN paraméter a LEFT, RIGHT vagy CENTER értékeket veszi fel, és a megfelelő táblázatcella (vagy cellák) tartalmának vízszintes igazítását jelenti. A táblázat nézet alternatívája A táblatámogatás a webböngészők elterjedt funkciója lett, így nem sok okunk van elkerülni a használatát. Ennek ellenére megfontoljuk a táblázatok helyett vagy azok kiegészítéseként használható alternatív adatmegjelenítési lehetőségeket. Néhány egyéb módszer, amely nem használja a táblázat fogalmát: Használjon előre formázott szöveget. Ezt a módszert hagyományosan alkalmazzák korábbi verziók HTML nyelv, amikor még nem volt táblatámogatás. Használata a mai napig nem veszítette el relevanciáját, mivel az ilyen szövegeket minden böngésző helyesen jeleníti meg, beleértve a tisztán szövegeseket is. Táblázatot tartalmazó kép használata. A táblázatot bárki elkészítheti szöveg szerkesztő vagy akár egy webböngésző is megjeleníti, majd képként menti az egyikben grafikus formátumok. Ez nem a legjobb megoldás, mivel elveszíti a táblázatok megjelenítésének dinamikus konfigurálásának rugalmasságát. Ezen kívül tárolásra is szükség van további fájl képpel, amelynek mérete általában lényegesen nagyobb lesz, mint a HTML-táblázatot leíró szöveg mérete. Egy lehetséges alkalmazási terület a szigorúan meghatározott méretű táblázatok, amelyeknél elfogadhatatlan a megjelenítés bármilyen külső tényezőtől (betűtípusok, böngésző üzemmódok stb.) való függése. Listák használata táblázatok helyett. A legegyszerűbb esetekben a táblázatok rendezése helyett a HTML nyelven elérhető listatípusok valamelyikével is meg lehet boldogulni. Táblázatok elkészítése Bármely szerkesztő használható HTML-táblázatok készítésére, amelyek többsége rendelkezik táblázatok vizuális létrehozására szolgáló eszközökkel. Nézzünk egy példát egy táblázat elkészítésére a HotDog Professional szerkesztőben. Táblázat létrehozásához egyszerűen válassza ki a Táblázatok elemet a Beszúrás menüből, majd a képen látható párbeszédpanel jelenik meg. 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 táblázatcellák közvetlen kitöltését, amelyek ugyanabban a párbeszédablakban jelennek meg. A párbeszédpanelen található egy Előnézet gomb, amelyre kattintva megtekintheti a kapott táblázatot a beépített böngésző segítségével (4.20. ábra). Rizs. 4.19. Párbeszédpanel táblázatok létrehozásához Rizs. 4.20. A táblázat a beépített böngésző segítségével látható A táblázat adatainak előkészítése után kattintson az OK gombra. Ezután a generált táblázatleíró kód bekerül a szerkesztett HTML dokumentumba. ábrán látható példához. 4.19, a következő kód jön létre: (a kód egy része kimaradt) 3 táblázat fejléc 1. oszlop 2. oszlop 3. oszlop 4. oszlop 1 2 3 4 Ezt a feladatot a Netscape Communicator program Netscape Composer komponensének használatakor is hasonló módon oldjuk meg. ábrán. A 4.21. ábra egy párbeszédpanelt mutat, amelyben ki kell töltenie a szükséges mezőket. Belépni további paraméterek címke Van egy Extra HTML gomb. A párbeszédablak mezőinek kitöltése után kattintson az Alkalmaz gombra, majd lehetőséget kap a táblázat celláinak kitöltésére (4.22. ábra). Rizs. 4.21. Párbeszédpanel a Netscape Composer táblázat beállításaihoz Rizs. 4.22. A beviteli kurzor kezdeti pozíciója egy üres táblázatban Programok Biztonság hírek Érdekes Tanácsot hírek Vélemények Csatlakozz hozzánk! Már több mint 6000-en iratkoztak fel. Szerezd meg a legújabb cikkeket. IRATKOZZ FEL