Wiki bemutató webes technológiákról
A HTML táblázatok az egyik legfontosabb elem és a legformálisabb formátumú képek és szöveg formázása. Természetesen vannak alternatív utak is, például rétegek, de nehézkes, kemény és kényelmetlen. Az a tény, hogy minden brodilka a rétegeket saját módján látja, és a rétegek kevésbé tisztességes megjelenítéséhez hosszú és unalmas forgatókönyvet kell írni, és ez nem csodaszer. Bár a táblázatok, bár bizonyos árnyalatokban, gyakran eltérnek egymástól, de az eltérés minimális.
Tehát a legegyszerűbb táblázat kódja 2x2 cellás:
a táblázat kezdete:
szélesség - szélesség (200 pixel van)
határ - a táblázat határának / szegélyének vastagsága (1 pichel van)
cellspasing - a sejtek közötti távolság,
A cellák elcsúszása a cellák határain belül eltolódik.
a kód többi része:
- a táblázat vége
Itt van itt egy tabletta:
egy szegmens hozzáadása a kóddal:
egy szegmens hozzáadása a kóddal:
a harmadik sort két rúddal kapjuk.
A sejtek száma eltérő módon helyezhető el - például:
a táblák ilyen konstrukciójának különbségét a rowspan = "2" paraméter megjelenésekor kiemelik,
Az a szám, amely megfelel az "aljzatok" számának, azaz. szó szerint, hány vonal olvad össze ebben a cellában:
Ha balról jobbra szimmetrikus táblázatban olvassuk, akkor ugyanaz történik, de miért van egy cella a kód 3-as számával a 2 előtt? Ez egyszerű - csak kód megfejtése „cella 1”, „3 cella, amely két alsztringek” cella 2, a második sorban, de fizikailag cella 3 tartozik az első sorban, mert a HTML olvasni sorról sorra - balról jobbra;.! 0 )
És mi történik, ha másik cellát helyezsz 3 után? Például 3b?
Igen, igen - a cellában is elegendő a rowspan = "2" írása.
És mi van akkor, ha a jobb oszlopban három cellára van szükségünk?
Olvassa el a kódot: Cell 1 (normál)> 3 cella (három összeolvadt sorból áll)> 3b sejt (szintén normál); itt kezdődik a második sor. A 2-es cellával kezdődik, amelyet "két sorból álló cellaként jelöltünk meg. vertikálisan egyesített sejtek ", és a 3c és 3d sejtek teljesen normális sejtek. A táblázatban szereplő vonal megértésének egyszerűsítése érdekében a példákat különböző hangok jelzik, azaz minden hang egy stringnek felel meg. Ez egy kicsit nehéz megérteni egy csapásra, de ez nagyon fontos -, hogy megértsék a sorozatot az olvasás és az elv építése, így erőfeszítéseket tesznek, és próbálja 0) a mély megértés a folyamat attól függ, hogy képesek a az összes előnyét a táblázatok helyett 10-15% többsége által használt.
Ha vízszintes vonalú celláink vannak, akkor a colspan címkét használjuk a rowspan címke helyett. természetesen a cellában, amely több területet foglal el:
Emlékezzen arra is, hogy a vonal nyitott címkéjébe beillesztett paraméterek (
Vegyük fontolóra, hogy a táblázatok mérete hogyan van beállítva:
Az egész asztal szélességét egy egész számmal egészítjük ki. 100% lehet (azaz a rendelkezésre álló hely szélétől a szélig) és tiszta szélességű képpontokban (például - 200):
A kódban ez így van így:
Alapértelmezés szerint * (azaz ha a százalékjel (%) nincs a szélesség után a számjegy után), akkor az idézőjelekben megadott számot pixelként kell kezelni. A fő különbség az, hogy ha a méret és a merev, pixel, hogy a szűkülő ablak asztal „pihent” élek a tag, amelynek van ágyazva, és nem adja meg neki a „szűk”, ha a szélessége meghatározott relatív, azaz, a rendelkezésre álló szélesség százalékában.
A szélességet úgy állítjuk be, hogy beilleszti az asztalra a paraméterindítót
width = "szélesség száma (százalékban lehet)"
akkor is megadhatja a függőleges méret -
height = "width number (csak pixelben!)"
Ne feledje, hogy a kúpos asztal függőlegesen van feszítve. És ezt használni kell. Ne próbálja meg igazítani a szöveget egy keményen rögzített asztalra - ez a lamerizmus. A táblázatban többféle tartalmi igazítás létezik a táblák éleihez képest:
minden egyes cellában megadják a benne alkalmazott igazítás típusát, de ezen kívül a paraméter is igazolható. Ez az igazítás a szélesség mindkét széle. A legtöbb oldalon, és meglepő módon, még azokon is, amiket látszólag profi csapatok csinálnak, olyan lamerizmus van, mint a jobb szélen történő igazítás hiánya:
Ezért ajánlom mindenkinek, hogy ne felejtse el ezt a fontos és szükséges címkét. Végül is, és az oldal sokkal szebb lesz, egyenes oszlopokkal bélelve, és nem valami olyannak, mint egy félig eltűnt fogú comb: 0)
Tehát az igazítási címkéket. Hogyan kell megfelelően előírni őket, és mire vonatkoznak? Emlékeztetünk a címkék örökség * elvére, amelyet a bevezetésben tárgyaltunk.
Ha a kívánt tulajdonságot hozzárendelheti bármelyik részhez vagy az egész táblahoz, akkor képzelje el, hogyan befolyásolja a táblázatban szereplő információkat:
A táblák segítségével megvalósíthatja a legösszetettebb tervet, majd szinte bármit is elhelyezhet. Íme egy példa egy tipikus webhelyszervezésre:
Vannak struktúrák és bonyolultabbak:
A fő asztal két függőleges osztóval rendelkezik, több beágyazott tábla van, az ábrán fekete határokkal vannak jelölve. Nézd meg a szerkezet egészét - ez függőleges területekre oszlik, amelyeken a blokkok táblái - a bal oldali rész, a központi rész és az oldal jobb oldala - lebegnek.
Miért ilyen nehézségek? Nagyon egyszerű - ha a következő formában készítesz:
Mint látható a példából, a design nem működik egyetlen táblázattal - végül is, ha az egyik cellat torzítja az egész terv: 0 (
Ezért kell több asztali blokkot használni egy nagy táblában. Ráadásul ez további lehetőségeket nyit meg a teljes gazdaság kijelöléséhez.
Például, van egy asztal sarok egy menüvel. A széltől le kell vonni egy milliméter millimétert, hogy a betűk ne érjenek a képernyő széléhez. Hogyan kell ezt csinálni? Sok mód van.
Például igazítjuk a fő táblázatot a jobb oldali igazításhoz, és a táblázatban, amelyet ott elhelyeztünk, helyezzük el a bal oldali igazítást. Íme, amit kapunk:
De (pontosabban!) A szöveg észlelésének javítása érdekében először azt ajánljuk, hogy használja a szegélyeket a címlapon (cellpadding tag) a fő táblában, hogy elegáns mezőkkel rendelkezzen. Hogy az asztal nem rontotta el a kereteket, azt javaslom, hogy a fő asztal "láthatatlan" legyen a címkehatáron keresztül ("Border = zero" jelölés és az asztal kerete, hogy nem lesz látható). Ne felejtse el használni a címkét # 147; igazolja # 148 ;, hogy annak érdekében, hogy ne tegye be a szöveget közvetlenül, akkor lépjen be egy adott sejt -
A paramétereket egész számként vagy egész számként, azaz% -ként adják meg. = "100%" - igazítsa a szélességet a falról a falra.
szórakoztató, igen? Most tisztázzuk a használt címkék értelmét:
bgcolor = "000000" hat számjegyű kódja - a hátteret a cellába vagy a táblába állítja - attól függően, hogy hol helyezkedik el ez a paraméter.
bordercolor = "# FFFFFF" - határszín
Nos, a cellapadozással és a cellapaddal kapcsolatos manipulációkkal kapcsolatban ne felejtsd el, méretezd méretedet.
A táblák segítségével még rajzolhat - például lekerekített sarkokat. Így néz ki egy nagymértékben kibővített verzió:
Ez a módszer sokkal gazdaságosabb, mint a képek helyett - végül is kevesebb HTML kódot, mint a legkisebb képen. Azonban van egy árnyalat - a webhelyről letöltött összes kép el van tárolva a számítógépben, és ha például több tucat ilyen kép van, akkor ez nem jelenti azt, hogy ugyanazt a képet tízszer fogják betölteni. Éppen ellenkezőleg, egyszer betöltődik, és minden megfelelő helyre kerül. A táblázattal ez sokkal nehezebb megvalósítani, különösen, ha a tárhely nem rendelkezik sem SSI-vel, sem PHP-vel. Tehát általában a legtöbb esetben könnyebb még mindig az 5-10 képpontos oldalakkal rendelkező képeket használni.
Igen, egy másik kicsi, de hasznos dolog - pl. Meg kell adnunk a szöveget egy sorban, és úgy, hogy a táblázat magának a vonalnak a szélességéhez igazodik. De gyakran, ha a tábla nem rendelkezik mérettel, vagy kisebb a vonalnál, akkor ugyanaz a sor kerül át a második sorra. Az ilyen átvitel megakadályozásához be kell illesztenie a "nowrap" szót a cellacímkébe. Nem kell megadnia semmilyen paramétert, csak szóközzel jelölje ki mindkét oldalt. Az ilyen cella vonala mindig egyenes lesz. Ne felejtsük el, hogy csak akkor fog megjelenni, ha az ablakot keskenyebbre kívánja nyomni. Azt tanácsolom, hogy ellenőrizze, hogyan fog kinézni és emlékezni fog erre az árnyalatra.