Melyik címke határoz meg egy táblázatsort. Címke attribútumok és tulajdonságok

Népszerűvé vált, elsősorban a webdesignerek alkalmazták a módszert táblázatos elrendezésés nagyon jó eredményeket értek el.

Címkék, amelyeket táblázat készítésére használnak html-ben

asztal- kötelező címke, amely nyitja és zárja az asztalt
felirat- opcionális címke, amely a táblázat címét jelöli
th- opcionális címke, melynek nyitó és záró címkéjébe belefér az oszlop neve. Általában vastagon szedve
tr- kötelező címke, amelyről a vonalat nyitják és zárják
td- egy kötelező címke, amely egy cella sorban történő nyitását és zárását jelöli

Egyszerű táblázatkód példa

html táblázat

A táblázat neve
1. oszlop	Stobets 2
Szöveg az első cellában	Szöveg a második cellában

Megjelenik a böngésző

Táblázatok hozzárendelése html-ben

Az asztalokról szóló lecke nagyon fontos! A táblázatoknak köszönhetően nemcsak szöveget, hanem képeket, hivatkozásokat és még sok mást is elrendezhet. Az asztal teríthető háttér(vagy színe), behúzás, szélesség, határÉs egyéb opciók amitől gyönyörű lesz kinézet. Táblázat – Az első lépés a megértéshez web design! Korábban sok webhely teljesen táblázatként volt kirakva, vagyis minden, amit a felhasználó látott (oldalsó menü, felső menü, tartalom), egy nagy táblázat celláinak tartalma volt.
Ennek jegyében térjünk át azokra az attribútumokra, amelyek gyönyörűvé teszik az asztalt...

A html táblák tulajdonságai és paraméterei: padding, szélesség, háttérszín, szegély (keret)

Nál nél táblázat címke a következő attribútumokkal rendelkezik:

szélesség- asztal szélessége. lehet pixelben vagy a képernyő szélességének %-ában.
bgcolor- táblázatcellák háttérszíne
háttér- mintával kitölti az asztal hátterét
határ- keret és szegélyek a táblázatban. A vastagság pixelben van megadva
cella kitöltése- kitöltés pixelben a cella tartalma és a belső szegélye között
Mint korábban, az attribútum értéke idézőjelbe van írva.

Tekintsük ezen attribútumok használatát egy példán. Ehhez hozzon létre egy táblázatot (de már a ritkán használt felirat és th címkék nélkül) és állítsa be az attribútum paramétert határ (határ), szélesség (tábla, sor vagy cella szélessége)És bgcolor (cella színe)

html táblázat

Ennek eredményeként a következő táblázat jelenik meg a böngészőben

keret- az asztal körüli keretet jelölő attribútum. A következő értékek vannak:

Üres – nincs keret,
fent - csak a felső keret,
lent - csak az alsó keret,
hsides – csak felső és alsó keret,
vsides – csak bal és jobb szegély,
lhs – csak bal oldali keret,
rhs – csak jobb oldali keret,
doboz - a keret mind a négy része.

szabályokat- attribútum, amely a táblázaton belüli, cellák közötti határokat jelöli. A következő értékek vannak:

Nincs – a cellák között nincsenek határok,
csoportok - csak a sorcsoportok és az oszlopcsoportok közötti határok (kicsit később lesz szó),
sorok – csak a sorok közötti szegélyek,
oszlopok – csak az oszlopok közötti határok,
mind - minden szegély megjelenítése.

Vegye figyelembe a kód példáját

html táblázat

1. oszlop	Stobets 2

Eredmény

Most próbáljunk meg egy gyönyörű asztalt készíteni. Ehhez kezdjük el használni táblázat igazítása. Ehhez a következő, már ismert paraméterek állnak rendelkezésre:

igazítsa- táblázat igazítás. Elhelyezhető balra (balra), jobbra (jobbra), középre (középre)
cellatávolság- táblázatcellák közötti távolság. Képpontban van megadva (alapértelmezett 0 képpont)
cella kitöltése- kitöltés pixelben a cella tartalma és a belső szegély között (alapértelmezett 0 pixel)
Vegyünk egy példát

html táblázat

1. oszlop	Stobets 2
Szöveg az első oszlop első cellájában	Szöveg a második oszlop második cellájában

A böngésző egy középre igazított táblázatot jelenít meg, amely így néz ki:

tr sorok és td cellák a HTML-táblázatokban

Hadd emlékeztesselek még egyszer arra, hogy a táblázatok soronként alakulnak (tr). A sorok (tr) már tartalmaznak cellákat (td). Ha beállít egy paramétert egy karakterlánchoz (tr), akkor az érvényes lesz minden sejt(td) ebben a sorban, ha egy adott cellára, akkor csak arra. A fenti példákban megadtam a sor színét, ez a paraméter ennek megfelelően lett elosztva minden cellára.

A tr és td címkék esetében a következők találhatók

igazítsa- szövegigazítás a cellán belül. Bal (bal), jobb (jobb), közép (közép)
valign- a cellán belüli szöveg függőleges igazítása. Fel (fent), le (lent), középen (középen)
bgcolor- beállítja a vonal színét
szélesség- az oszlop szélessége (az alábbi összes cella elfogadja ezt a paramétert) pixelben vagy százalékban van megadva, ahol 100% a teljes táblázat szélessége
magasság- cella magassága (a sorban lévő összes cella elfogadja ezt a paramétert)

Tekintsük azt a kódot, ahol a cellák tartalma (td) különböző élekre igazodik: az elsőben a bal oldalon, a másodikban a jobb oldalon:

html táblázat

1. oszlop	Stobets 2
Szöveg az első oszlop első cellájában	Szöveg a második oszlop második cellájában
1. oszlop	Stobets 2

Eredmény

A táblázatok segítségével nagyon jó oldalt lehet alkotni. Ne felejtse el, hogy nemcsak szöveget, hanem képeket, hivatkozásokat és egyebeket is beszúrhat a cellákba!)

Kösz a figyelmet! Remélem hasznos volt az anyag!

Ez az előadás részletesen megvizsgálja, hogyan használják a táblázatokat a HTML-jelölésben. Ez a szöveg táblázatos rendszerezése, táblázatos koordináta rács és táblázatokba rendezett grafika.

A táblázatok leírásának módjai HTML-ben

A WWW fejlődésével világossá vált, hogy a HTML-be ágyazott eszközök nem elegendőek a jó minőségű megjelenítéshez különféle típusok dokumentumokat. A HTML hátránya az volt, hogy szerkezetében hiányzik a táblázat megjelenítési lehetősége. Erre a célra előre formázott szöveg (a címke

), amelyben a táblázat ASCII karakterekkel volt körvonalazva. De ez a táblázatos bemutatási forma nem volt elég Jó minőségés kilépett a dokumentum általános stílusából. A táblázatok HTML-ben való bevezetésével a webmesterek nemcsak egy eszközt kaptak a szöveg és a számok elhelyezésére, hanem egy hatékony tervezőeszközt is, amellyel a grafikák és szövegek a megfelelő helyre helyezhetők a képernyőn.

Táblázatok készítése HTML-ben

A címkét a táblázatok leírására használják.<ТАВLЕ>. Címke<ТАВLЕ>, mint sok más, automatikusan lefordítja a táblázat előtti és utáni sort.

Táblázatsor létrehozása - címke<ТR>

Címke<ТR>(Táblázatsor, táblázatsor) táblázatsort hoz létre. Minden szöveget, egyéb címkét és attribútumot, amelyet egy sorba kell helyezni, az lt;TR> címkék közé kell helyezni..

Táblázatcellák meghatározása - Címke<ТD>

Az adatokat tartalmazó cellák általában egy táblázatsoron belül helyezkednek el. Minden szöveget vagy képet tartalmazó cellát címkékkel kell körülvenni<ТD>. Címkék száma<ТD>sorban a cellák számát adja meg

asztal

1. oszlop	Stobets 2
Szöveg az első oszlop első cellájában	Szöveg a második oszlop második cellájában

Ha a táblázatnak két TR címkéje van, akkor két sora van.
Ha három TD címke van egy sorban,	majd benne	három oszlop.

Táblázat oszlopfejlécek - címke<ТН>

A táblázat oszlopainak és sorainak fejléceit a heading tag segítségével lehet beállítani<ТН>(Táblázatfejléc, táblázatfejléc). Ezek a címkék olyanok, mint<ТD>. A különbség az, hogy a címkék közé zárt szöveg<ТН>, automatikusan félkövérrel van szedve, és alapértelmezés szerint a cella közepén helyezkedik el. Visszavonhatja a középre állítást, és a szöveget balra vagy jobbra igazíthatja. Ha használ<ТD>címkével<В>és tulajdonság<АLIGN=center>, a szöveg is címsornak fog kinézni. Ne feledje azonban, hogy nem minden böngésző támogatja a félkövér betűtípusokat a táblázatokban, ezért a legjobb, ha a táblázat fejléceit a<ТН>.

A cím alapértelmezés szerint középre van állítva	A fejléc átnyúlhat oszlopokon
A fejléc az oszlopok elé helyezhető	Szöveg vagy adat	Szöveg vagy adat
A fejléc összefűzheti a sorokat	Szöveg vagy adat	Szöveg vagy adat
	Szöveg vagy adat	Szöveg vagy adat
	Szöveg vagy adat	Szöveg vagy adat

Táblázatfejlécek használata - címke<САРТIОN>

Címke lehetővé teszi táblázatfejlécek létrehozását. Alapértelmezés szerint a címsorok középre vannak állítva, és vagy a (<САРТION АLIGN=top>), vagy az asztal alatt (<САРТION ALIGN=bottom>). A cím bármilyen szövegből és képből állhat. A szöveg a táblázat szélességének megfelelő sorokra lesz osztva. néha cédula<САРТION>az ábra feliratozására használják. Ehhez elegendő egy szegély nélküli táblázat leírása.

Cím a táblázat felett
Szöveg vagy adat	Szöveg vagy adat	Szöveg vagy adat	Szöveg vagy adat

Cím az asztal alatt
Szöveg vagy adat	Szöveg vagy adat	Szöveg vagy adat

NOWRAP attribútum

Általában minden olyan szöveg, amely nem fér el a táblázatcellák egyik sorában, a következő sorba kerül. Ha azonban a NOWRAP attribútumot címkékkel használja<ТН>vagy<ТD>a cella hossza kibővül, hogy a benne lévő szöveg egy sorba kerüljön.

COLSPAN attribútum

címkéket<ТD>És<ТН>a COLSPAN (Oszlophossz) attribútum használatával módosíthatók. Ha bármelyik cellát szélesebbre szeretné tenni, mint a felső vagy az alsó, akkor a COLSPAN attribútum segítségével tetszőleges számú szabályos cellára kiterjesztheti.

Ha bármelyik cellát szélesebbre szeretné tenni, mint a felső vagy az alsó,	használhatja a COLSPAN=2 attribútumot,
hogy tetszőleges számú normál sejten átnyúlja.

ROWSPAN attribútum

A címkékben használt ROWSPAN attribútum<ТD>És<ТН>, hasonló a COLSPAN= attribútumhoz, azzal a különbséggel, hogy megadja a cella által átívelő sorok számát. Ha egynél nagyobb számot ad meg a ROWSPAN=s attribútumban, akkor a megfelelő számú sornak a kinyújtott cella alatt kell lennie. Nem helyezhető az asztal aljára.

WIDTH attribútum

A WIDTH attribútumnak kétféle felhasználása van. Berakhatod egy címkébe<ТАВLЕ>a teljes táblázat szélességének megadásához, vagy címkékben használható<ТD>vagy<ТН>cella vagy cellacsoport szélességének beállításához. A szélesség pixelben vagy százalékban adható meg. Például, ha beállítja a címkében<ТАВLЕ>WIDTH=250, az oldal képernyőméretétől függetlenül 250 pixel széles táblázatot kap. Ha a címkében WIDTH=50% van beállítva<ТАВLЕ>a táblázat a képernyőn látható kép tetszőleges méreténél az oldal szélességének felét veszi fel. Tehát amikor a táblázat szélességét százalékban adja meg, ne feledje, hogy ha a felhasználó keskeny nézetű, akkor az oldal kissé furcsán nézhet ki. Ha pixeleket használ, és a táblázat szélesebb, mint a nézet, akkor alul megjelenik egy görgetősáv, amellyel balra és jobbra mozoghat az oldalon. Az adott feladattól függően a táblázat szélességének bármelyik beállítási módja hasznos lehet.

Szöveg vagy adat - 100% szélesség

vagy

Szöveg vagy adat - 50% szélesség

vagy

Szöveg vagy adat – 200 px széles

vagy

Szöveg vagy adat – 100 px széles

Üres cellák alkalmazása

Ha egy cella nem tartalmaz adatot, akkor nem lesz szegélye. Ha azt szeretné, hogy egy cellának szegélye legyen, de tartalma ne legyen, akkor valamit bele kell tenni, ami megtekintéskor nem lesz látható. Te tudod használni üres karakterlánc <ВR>. Még üres oszlopokat is megadhat úgy, hogy pixelben vagy relatív egységben adja meg a szélességüket, és nem ír be adatokat a kapott cellákba. Ez az eszköz akkor lehet hasznos, ha szöveget és grafikákat helyez el egy oldalon.

CELLRADDING attribútum

Ez az attribútum adja meg a cella tartalma és a szegélyei közötti üres tér szélességét, azaz beállítja a cellán belüli margókat.

Szöveg vagy adat	Szöveg vagy adat	Szöveg vagy adat
Szöveg vagy adat	Szöveg vagy adat	Szöveg vagy adat

Szöveg vagy adat	Szöveg vagy adat	Szöveg vagy adat
Szöveg vagy adat	Szöveg vagy adat	Szöveg vagy adat

ALIGN és VALIGN attribútumok

címkéket<ТR>, <ТD>És<ТН>módosítható az ALIGN és VALIGN attribútumokkal. Az ALIGN attribútum a szöveg és a grafika vízszintes igazítását határozza meg, azaz balra, jobbra vagy középre. A vízszintes igazítás többféleképpen állítható be:

ALIGN = balra a cella tartalmát a bal széléhez közel tolja.

ALIGN=bal A cella tartalmát balra igazítja, figyelembe véve a CELLPADDING attribútum által megadott behúzást.

ALIGN=középre központosítsa a cella tartalmát.

ALIGN=jobbra A cella tartalmát jobbra igazítja, figyelembe véve a CELLPADDING attribútum által meghatározott behúzást.

Szöveg vagy adat	Szöveg vagy adat	Szöveg vagy adat
Szöveg vagy adat	Szöveg vagy adat	Szöveg vagy adat
Szöveg vagy adat	Szöveg vagy adat	Szöveg vagy adat
Szöveg vagy adat	Szöveg vagy adat	Szöveg vagy adat
Szöveg vagy adat	Szöveg vagy adat	Szöveg vagy adat

A VALIGN attribútum függőlegesen igazítja a szöveget és a grafikát egy cellán belül. A függőleges igazítás többféleképpen állítható be:

VALIGN=felül A cella tartalmát a felső szegélyéhez igazítja.

VALIGN=közép A cella tartalmát függőlegesen középre állítja.

VALIGN=alul A cella tartalmát az alsó szegélyéhez igazítja.

A VALIGN attribútum függőlegesen igazítja a szöveget és a grafikát egy cellán belül.	felső,	középső,	alsó.
VALIGN=top A cella tartalmát a felső szegélyéhez igazítja.	felső,	felső,	tetejére.
VALIGN=középső A cella tartalmát függőlegesen középre állítja.	középső,	középső,	középső.
VALIGN=bottom A cella tartalmát az alsó szegélyéhez igazítja.	alsó,	alsó,	alsó.

BORDER attribútum

A címkében<ТАВLЕ>gyakran meghatározzák, hogyan néznek ki a szegélyek, vagyis a táblázat celláit körülvevő vonalak és maga a táblázat. Ha nem állít be keretet, akkor sorok nélküli táblázatot kap, de a helyük ki van osztva. Ugyanez az eredmény érhető el beállítással<ТАВLЕ ВОRDER=0>. Néha szeretné vastagabbá tenni a szegélyt, hogy jobban kitűnjön. Kizárólag félkövér szegélyeket állíthat be, hogy felhívja a figyelmet egy képre vagy szövegre. Beágyazott táblázatok létrehozásakor különböző vastagságú szegélyeket kell készíteni a különböző táblázatokhoz, hogy könnyebben megkülönböztethetők legyenek.

CELLSPACING attribútum

A CELLSPACING attribútum határozza meg a cellák közötti távolságot képpontokban. Ha ez az attribútum nincs megadva, az alapértelmezett érték két képpont. A CELLSPACING= attribútummal bárhová elhelyezhet szöveget és grafikát. Ha üres helyet szeretne hagyni, szóközt írhat be a cellába.

Szöveg vagy adat	Szöveg vagy adat	Szöveg vagy adat
Szöveg vagy adat	Szöveg vagy adat	Szöveg vagy adat

Szöveg vagy adat	Szöveg vagy adat	Szöveg vagy adat
Szöveg vagy adat	Szöveg vagy adat	Szöveg vagy adat

Szöveg vagy adat	Szöveg vagy adat	Szöveg vagy adat
Szöveg vagy adat		Szöveg vagy adat

BGCOLOR attribútum

Ez az attribútum lehetővé teszi a háttérszín beállítását. Attól függően, hogy melyik címkével (TABLE, TR, TD) kerül alkalmazásra, a háttérszín beállítható a teljes táblázatra, egy sorra vagy egyetlen cellára. Ennek az attribútumnak az értéke egy RGB-kód vagy szabványos színnév.

Szöveg vagy adat	Szöveg vagy adat	Szöveg vagy adat
Szöveg vagy adat	Szöveg vagy adat	Szöveg vagy adat

BACKGROUND attribútum

Ez az attribútum állítja be a táblázatok háttérképét. TABLE és TD címkékre vonatkozik. Értéke a háttérkép fájl URL-je. Ennek az attribútumnak a használatát az alábbiakban tárgyaljuk.

Táblázatok használata oldaltervezésben

A táblázatok azért jók, mert ha kívánja, láthatatlanná teheti a szegélyüket. Ez lehetővé teszi a címke használatát<ТАВLЕ>gyönyörűen helyezze el a szöveget és a grafikákat az oldalon. Viszlát címke<ТАВLЕ>továbbra is az egyetlen hatékony formázó a HTML-ben. A weboldal-tervezőknek ma már majdnem ugyanolyan szabadságuk van a „fehér terület” használatában, mint a készítőknek. nyomtatott oldalak. A táblázatok a legjobb módja annak, hogy elmozduljunk a szövegek hierarchikus elrendezésétől a weboldalakon.

Ha a böngésző támogatja a táblázatokat, általában ez jeleníti meg a legtöbbet érdekes hatások segítségükkel szerezték meg

Uráli Állami Pedagógiai Egyetem

Üdvözöljük!

Tanfolyam"A WEB-mastering alapjai"

Színes asztalok készítése

Egyes böngészők lehetővé teszik a színek megjelenítését. Számos módja van a táblázat színezésére, leginkább a használt böngészőtől függően.

Színes keretek be Netscape Navigator. Nem csak az asztalt tudod körülvenni gyönyörű keret, hanem állítson be egy olyan színt is, amely eltér a szövegtől és a háttérszíntől. Hozzon létre egy egyszerű szürke GIF-et (vagy bármilyen GIF-et, amelyet háttérként szeretne használni), és határozza meg egy címkében<ВODY>oldal háttereként. Ezután állítsa be az oldal háttérszínét. Ennek eredményeként a címke<ВОDY>valahogy így fog kinézni:

Kettős hátteret hozott létre - GIF és beállított szín. Ennek eredményeként a háttérszín látható lesz az összes táblázatszegélyen és vízszintes vonalak (<НR>). Függetlenül attól, hogy a háttér GIF-je szürke vagy sem, a színes vonalak és a táblázatszegélyek szembetűnőek lesznek. Ha a háttér GIF nem túl bonyolult, az oldal betöltési ideje csak kismértékben nő.

Asztal kerettel

Név	Vezetéknév
Larisa	Isaev
Dmitrij	Kolesnikov

EREDMÉNY:

Táblázat szegély nélkül

Asztal kerettel

Címke attribútumok És sejteket egyesíteni

Példa

	görények
	súly	méret
hímek	1,2-2,5 kg	70 cm-ig
nőstények	0,7-1,0 kg	40 cm-ig

EREDMÉNY:

	görények
	súly	méret
hímek	1,2-2,5 kg	70 cm-ig
nőstények	0,7-1,0 kg	40 cm-ig

A HTML5 szabvány szerint minden korábban használt táblaattribútum, mint pl határ, cellatávolság, cella kitöltése stb. már nem támogatottak, és a validátor a kód hibájának tekinti ezek használatát. A táblák tervezéséhez CSS-stílusokat kell használni, amelyekkel az összes elavult táblaattribútum helyettesíthető. Például az attribútum helyett cellatávolság tulajdonság a táblázatcellák közötti távolság megváltoztatására szolgál határtávolság, valamint a tartalom igazítása a táblázatcellákban - tulajdonságok szöveg igazításÉs függőleges-aling. CSS stílusok táblázatokhoz

html táblázat sorcsoportosító címkék

A címkék segítségével összetettebb táblázatok hozhatók létre:

Példa

sörfogyasztás
TELJES NÉV.	liter
Teljes	250
Ivanov Ivan Ivanovics	133
Petrov Petr Petrovics	117

EREDMÉNY:

html táblázat oszlopcsoportosító címkéi

Címkék attribútum És

A sor- és oszlopcsoportosítás használatának megértésének legegyszerűbb módja egy Sudoku-tábla példája.

A col címke minden oszlophoz külön állítja be a paramétereket. Nem mindegy, hogyan írsz forráskód:

vagy

Példa

sárga		Piros

EREDMÉNY:

Ne próbálja meg beállítani a stílust szöveg igazítás címkékért És . A címkék közé helyezett szöveg ..., nem örökli ezt a stílust, mert a címke nem egy címke gyermeke , nincs címke .

Vízszintes szövegigazítás adott oszlop táblázatok a stílus megadásával módosíthatók szöveg igazítás pszeudo osztályhoz td:nth-child(n), ahol n az oszlop száma. Ez a módszer azonban nem működik, ha a táblázat cellái között van attribútum colspan.

Példa

Név	Ár, dörzsölés.)
Szolárium percenkénti fizetés (4 perctől)	15
50 perc szolárium (14 dörzsölés/perc, 1 hónap)	700
100 perc szolárium (13 dörzsölés/perc, 2 hónap)	1300
200 perc szolárium (12 dörzsölés/perc, 3 hónap)	2400

EREDMÉNY:

Ez a módszer azonban nem működik, ha a táblázat cellái között van attribútum colspan.

Táblázat - sorok és cellák között elosztott adatkészlet. A legtöbb cella táblázatos adatokat tartalmaz, a többi a tartalmat leíró sorok és oszlopok fejléceit tartalmazza.

Táblázat létrehozásához HTML-dokumentumban használja a címkét

, ez egy tároló, amely a táblázat összes tartalmát tartalmazza.

A táblázat létrehozása mindig sorokkal kezdődik, amelyeket a címkével határozunk meg

, minden sor cellákból áll. Címke csak cellák létrehozásához szükséges címkéket tartalmazhat.

A HTML-ben két különböző címke található a cellák létrehozásához, az első az

, szabályos cellákat hoz létre adatokkal. Alapértelmezés szerint címkézze meg a tartalmat

balra igazítva. A második címke a cellák létrehozásához a címke

, lehetővé teszi olyan cellák meghatározását, amelyek oszlopok vagy sorok fejléceit tartalmazzák, az ilyen cellák tartalma félkövéren és középre helyezve jelenik meg. címkéket

És

tartalmazhat bármilyen HTML-elemet, amely a dokumentumtörzsben használható.

Első cím	Második cím
1. sor, 1. cella	1. sor, 2. cella
2. sor, 1. cella	2. sor, 2. cella

Próbálja meg "

Táblázat a táblázatban

A HTML képes beágyazott táblákat létrehozni, azaz olyan táblákat, amelyek más táblákon belül helyezkednek el. Beágyazott táblázat létrehozásához el kell helyeznie annak a táblának a kódját, amelyet beágyazottá szeretne tenni bármely címkén belül

Vegyük például a korábban már létrehozott táblázatot, és helyezzük el ezt a kódot a második sor második cellájába:

Első cím

Második cím

1. sor, 1. cella

1. sor, 2. cella

2. sor, 1. cella

2. sor, 2. cella

Első cím	Második cím
1. sor, 1. cella	1. sor, 2. cella
2. sor, 1. cella	2. sor, 2. cella

Bármi táblázat html-ben sorok és oszlopok halmaza, amelyek metszéspontjában cellák találhatók. A táblázatok létrehozása HTML-ben elég egyszerű, csak el kell képzelni a végső modellt. A nyelvben HTML táblázatok nem csak adatok bemutatására szolgálnak, hanem szövegblokkok, képek stb. elhelyezésére is használhatók. egy weblapon, azaz. segítségükkel elkészítheti magának az oldalnak az elrendezését.

TABLE elem, hozzon létre egy táblázatot

A táblázatok HTML-ben történő létrehozásához az elemet használják asztal, és a teljes kódot (tartalma) táblázatok a címkék között helyezkednek el . Ennek az elemnek az attribútumai beállítják az értékeket a teljes táblázathoz:

háttér- be van állítva egy kép (URL), amely a teljes táblázat háttere lehet;
bgcolor- táblázat háttérszíne, akkor állítsa be, ha a háttér nincs képként beállítva;
határ- a táblázat vonalainak vastagsága, ha látható szegélyek szükségesek;
szegély színe- asztalvonalak színe;
cella kitöltése- távolság a cellákon belüli szövegtől a cellahatárig;
cellatávolság- távolság a táblázat határaitól a cellák külső határáig (a táblázaton belül);
szélesség- állítsa be a táblázat szélességének értékét px vagy % .

Példakódot írunk egy kék hátterű, 1px fehér vonalvastagságú, a cellákon belüli és kívüli 2 képpontos behúzással, az oldal 100%-a szélességű táblázathoz:

bgcolor="blue" border="1" bordercolor="white" cellpadding="10"cellpacing="2" width="100%" >

Egy sor hozzáadása

Minden táblázatnak legalább egy sornak kell lennie, ezt címkék határozzák meg . A következő példában egy sor hozzáadásának példáját nézzük:

bgcolor="blue" border="1" bordercolor="white" cellpadding="10"cellpacing="2" width="100%" >

Cellák hozzáadása

A cellák a táblázat függőleges oszlopait alkotják, ezeket címkék jelzik . Cellák hozzáadása a táblázatunkhoz:

bgcolor="blue" border="1" bordercolor="white" cellpadding="10"cellpacing="2" width="100%" >

1. cella
2. cella
3. cella

Az eredményül kapott táblázatot fogjuk látni:

Karakterlánc összefűzése

Bizonyos esetekben szükség lehet egy oszlop több sorra való nyújtására, ehhez az attribútumot használják sortávolság An, amelynek értéke megadja az összefűzéshez szükséges sorok számát. Lássunk egy példát:

bgcolor="blue" border="1" bordercolor="white" cellpadding="10"cellpacing="2" width="100%" >

rowspan="2" >Az 1. és a 2. sor összevonva
1. cella
2-es számú cella

3. cella
4. cella

3. sor
5-ös számú cella
6-os számú cella

A böngésző a következőket jeleníti meg:

Az 1. és a 2. sor egyesült	1. cella	2-es számú cella
Az 1. és a 2. sor egyesült	3. cella	4. cella
3. sor	5-ös számú cella	6-os számú cella

Oszlopok egyesítése

Az oszlopok összevonása ugyanúgy történik, csak az attribútum használatával colspan. Lássunk egy példát:

bgcolor="blue" border="1" bordercolor="white" cellpadding="10"cellpacing="2" width="100%" >

colspan="2" >Az 1. és a 2. oszlop összevonva
3. oszlop

1. cella
2. cella
3. cella

4. cella
5-ös számú cella
6-os számú cella

A böngésző a következőket jeleníti meg:

Attribútumok colspanÉs sortávolság egyszerre lehet alkalmazni. A böngészőben így fog kinézni:

Vagy így:

A kódot pedig te magad próbálod megírni!

A táblázat méretei és igazítása

A magasság és a szélesség beállítható mind a teljes táblázat egészére, mind az egyes sorokra és oszlopokra, ez a már ismert attribútumokkal történik szélességÉs magasság, az értékek pixelben és százalékban is meg vannak adva.

A táblázat vízszintes igazítását az attribútum állítja be igazítsa, már ismeri az értékeket: balra, középre, jobbra. A táblázatcellák szövegének igazításához pedig a vízszintes igazítás attribútumot igazítsa minden címkére alkalmazni kell td. CSS-szel ez sokkal egyszerűbb. Az attribútum a cellatartalom függőleges igazítására szolgál. valign. Saját értékei is vannak - függőleges középső igazítás középső, felső tetejéreés lefelé alsó alapvonal (az a sor, amelyen az aktuális sor szövege található).

Táblázat háttér

A háttérképet vagy színt a teljes táblázatra és egyetlen cellára is beállíthatjuk, minden attól függ, hogy milyen célokat követünk el. Ezt - egy képnél - egy attribútum állítja be háttér, amelynek értéke tartalmazza a kívánt grafikus fájl elérési útját. Színes háttérhez - attribútum bgcolor, ahol az érték a szín neve.

Végül

Itt van minden, amire szüksége van belépő szint. A táblázatok HTML-ben történő felépítéséről szóló rész végén az első bevezető a HTML nyelv. Keresztül táblázatok HTML-ben egyszerű weblapsablonokat készíthet, ezért azt javaslom, hogy most azonnal készítse el az első teljes értékűt. Ehhez elegendő a bevont anyag. Előre a hipertér meghódítása felé!