Táblázatok létrehozása a html - asztal háttere - frame táblázat - cellákat egyesíteni

Weboldalak létrehozásakor gyakran szükséges, hogy bizonyos tartalom az oldalon a táblázatok formájában. Előfordul, hogy a tábla létrehozásához használt oldal szerkezetét. Ez a megközelítés nem teljesen igaz, mert a tábla nem volt eredetileg a pozicionáló oldalelemek. Erre a célra, akkor a legjobb, ha a CSS. De bizonyos esetekben, asztalok elengedhetetlen, és alkalmas a tájékoztatás.

Létrehozására táblázatok HTML tag reagál

és a záró tag
. De akkor valószínűleg már tudja, hogy a tábla áll a sorok és sejteket. Ezért annak érdekében, hogy hozzon létre egy táblázatot, szükségünk van még két tag: ez tag amely felelős létrehozása vonalak, és a címke készítéséért felelős sejteket.

Látni, hogyan működik ez a gyakorlatban, hozzon létre egy táblázatot, amely két sorban és négy sejteket. asztalunkhoz kód a következő lesz:

Annak érdekében, hogy mi történik, hozzon létre egy html oldalt a kód alatt található.

Meg kell a következő:

Mint látható a táblázatban, még mindig nem néz ki, mint egy asztal. Mindez azért, mert a tag

és Van egy attribútumok számát, hogy meg kell adnia, hogy a tábla nem volt keret, háttér, méret, és így tovább. d.

Mi először azt a tulajdonságok, melyek velejárói címkék

. Látni, hogyan tábla nem fogja megváltoztatni, felveheti ezeket az attribútumokat címkék
és frissíti az oldal, hogy hogyan fog kinézni a táblázatban böngészőt. Az egyszerűség kedvéért nem fogom idézni a teljes oldal kódja, csak a kódexéről a címke t. e. az a tény, hogy mi fog változni.

És ezért a címke

Ez a következő tulajdonságokkal rendelkezik:

határ - meghatározza a szélessége a táblázat keret a pixelek írható:

.

bordercolor - szegélyszínét az asztalra, ez a tulajdonság nem minden böngésző támogatja, így nem lehet látni a megadott keret színe:

Megkérdeztük a határ szélessége 2 pixel, a kék, a táblázat a következő alakú:

szélesség - meghatározza a szélessége a táblázat pixelben vagy százalékban:

magasság - a magassága a táblázat pixelben vagy százalékban:

Táblázat szélessége 250 képpont, magassága 150 képpont, a táblázat a következőképpen néz ki:

igazítsa - a nyomvonal a táblázatban;

align = left - az asztal balra van igazítva;

align = right - a táblázat lesz igazítva a jobb szélét:

A táblázat érkezik a következő:

háttér - segítségével ezt az attribútumot, akkor adjon meg egy képet, hogy a háttérben az asztalra.

Példaként tartani egy kis képet, hogy lássuk a zárójelben () a mappát, ahol található az oldalon egy asztal, és a címke

add background = "fon.gif" az összes kódot:

Táblázat a következő alakú:

sellpadding - jellemző egy balra, jobbra, az alsó és felső padding a sejt belsejébe. Például, ha a tag

add sellpadding = 10, a szöveget írt a sejteken belül, hogy a behúzás.

cellspacing - állítja közötti távolságot táblázatcellákat.

Ha megnézzük a táblázatot, látni fogja, hogy határai között a sejtek van egy kis tér, ez a sejt közötti tér, ez az alapértelmezett. Annak érdekében, hogy tisztítsa meg elég címkézni

regisztrálja cellspacing = 0. Minden kód:

Ennek eredményeként a sejtek kapaszkodott egymással, és a szöveg a sejteken belül van francia:

hspace - meghatározza a hossza az asztalra, hogy a bal és a jobb oldalon, a pixel, meg van írva, mint: hspace = 20

nowrap - letiltja sortörés a cellában felvett csak nowrap

Az utolsó két attribútumokat arra használjuk, nagyon ritkán, így a minta kódot nem jelenítjük meg azokat.

Most tekintsük a tag attribútumok

, egy részük ugyanaz, mint a kulcsszó attribútumok

szélesség - a szélessége a cella pixelben vagy százalékban.

magassága - a magassága a sejt képpontokban vagy százalékban.

Például, definiáljuk a szélessége az első cella az első sorban a 30% - szélesség = 30%. és a magassága az első cella a második sor a 100px. A kód így néz ki:

A táblázat a következő alakú:

Közlemény elegendő, hogy meghatározza egy cella magassága és szélessége, és az összes sejt egy sorban vagy oszlopban lesz az azonos méretű. Ezért, ha azt szeretnénk kérni, mint például bizonyos magasságban sejtek elegendő megadni ezt az opciót, egyetlen sejt és az összes többi sejt a sorban ugyanaz lesz.

igazítsa - igazítsa a tartalmát a sejtek, jelentése a következő:

align = „lef” - a cella tartalmát marad indokolt;

align = „right” - a tartalom lesz igazítva a megfelelő;

align = „center” - a tartalom lesz igazítva a sejt közepébe.

Add ezeket a tulajdonságokat és értékeket a kódot, és illessze a tartalma 1 - jén a bal szélén a cella (balra igazított tartalmát az alapértelmezett, de bizonyos esetekben ez az attribútum szükséges), a tartalmát a 2 - edik cella jobbra igazítás és 4. a közepén.

bgcolor - ezzel a tulajdonság, akkor adja meg a színét a cellában.

háttér - beállítja a kép, mint egy sejt háttérben.

Ezekkel attribútumok, már találkoztunk, figyelembe véve az attribútumok egy tag

. Ezek ugyanúgy működnek, csak ebben az esetben határozza meg a háttérben a cellában. Például, mi határozza meg a háttér színét a 2. sárga cellában, és meghatározza a következő kép (), mint háttér 4. cellában.

Ahhoz, hogy ez a kód hozzá a szükséges tulajdonságokkal sejtjeink bgcolor = „# FFFF00” a 2. cella és a háttér = „fon.jpg” a 4-edik cellában. Ennek eredményeképpen a táblázat a következőképpen néz ki:

Mint látható, annak ellenére, hogy arra kértük a háttérben a tábla maga, ha meg a háttérben táblázatcellákhoz, akkor lesz látható, csak a háttérben, hogy van beállítva a sejtek számára.

bordercolor - állítja a határ színe a cellában.

C ez az attribútum csak most találkoztunk, figyelembe véve az attribútumok egy tag

. Emlékeztetem Önöket, hogy ez nem működik minden böngészőben. Felhívjuk figyelmét, hogy a tag
A tulajdonság nem lett átnyúló keret a sejtben. Mi határozza meg a keret színét: 2 - piros az első cella a második cella hozzá egy attribútum bordercolor = „# FF0000”

Van egy másik tulajdonság, aminek célja, hogy összehangolja a tartalom sejtek:

valign - összehangolja a tartalmát a sejtek függőlegesen.

Ez a következő értékeket:

valign = „top” - összehangolása a tartalom a felső széle a sejt;

valign = „alulról” - a nyomvonal a tartalmát az alsó széle a sejt;

valign = „középső” - a nyomvonal a sejt közepébe;

valign = „alapvonal” - összehangolását cella tartalmának a kiindulási értékhez képest.

Add ezek a tulajdonságok minden a mi 4 helyszínen.

A táblázat a következő alakú:

Az utolsó dolog, amit figyelembe kell vennie ezt az útmutatót, egyesülete, asztal sejteket. Több cella egyesítéséhez egy sorban, van egy tulajdonság colspan = „” ahol idézte fel kell tüntetni a sejtek száma az egyesíteni kívánt.

Egyesítéséhez sejtek függőlegesen t. E. A oszlop, akkor az attribútum rowspan = „” ahol idézte fel kell tüntetni a sejtek száma az egyesíteni kívánt.

Ha látni, hogyan is működik ez, hozzon létre egy új táblát tartalmaz három sorban három rekeszes. A kódex ezt a táblázatot a következő:

Most egyesíti az 1. és 2. cellát abban a sorban, és a 3., 6. és 7. cellát abban a sorban. asztalunkhoz kód a következő lesz:

Megjegyezzük, hogy a tag a cella, amely kombinált, nem kerülnek rögzítésre. A táblázat a következő lesz:

Ezek voltak az utolsó cella tulajdonságait. Mint látható az attribútumokat címkék

és
beállítva. Ez lehetővé teszi, hogy helyezze a táblázatban a különböző tartalmak, elhelyezése, és így ki, ha szükséges.

Feladat. Hozzon létre egy oldalt a minta. 2. függelék tartalmazza.

Kapcsolódó cikkek