| ... |
| ... |
...
2. Property background="URL" - beállítja a háttérképet. URL helyett a háttérkép címét kell írni.
Példa
| táblázat példa |
| 1. oszlop |
2. oszlop |
Az oldalon a következőre alakul át:
Példánkban a mi háttérkép az img mappában található (amely ugyanabban a könyvtárban van, mint a html oldal), és fon.gif képnek hívják. Figyeljük meg, hogy a címkében hozzáadtuk a style="color:white;" . Mivel a háttér szinte fekete, így annak érdekében, hogy a szöveg ne keveredjen a háttérbe, fehérre készítettük a szöveget.
3. Tulajdonság bgcolor="color" - beállítja a táblázat háttérszínét. Színként a teljes paletta bármelyikét választhatja (lásd a html színek kódjait és neveit)
4. Property border="number" - beállítja a táblázat keretének vastagságát. Az előző példákban a border="1" értéket adtuk meg, ami azt jelenti, hogy a szegély 1 pixel vastag.
5. Property bordercolor="color" - beállítja a keret színét. Ha border="0" , akkor nem lesz szegély, és a szegély színének sem lesz értelme.
6. Property cellpadding="number" - kitöltés a kerettől a cellatartalomig pixelben.
7. Property cellpacing="szám" - a cellák közötti távolság képpontokban.
8. Property cols="number" – az oszlopok száma. Ha nem állítja be, akkor a böngésző határozza meg az oszlopok számát. Az egyetlen különbség az, hogy ennek a paraméternek a megadása nagy valószínűséggel felgyorsítja a táblázat betöltését.
9. Property frame="parameter" – hogyan jelenítsünk meg szegélyeket az asztal körül. A következő értékeket veheti fel:
- üres – ne húzz határokat
- határ – az asztal körüli szegély
- fent - szegély az asztal felső szélén
- a táblázat alsó határa alatt
- hsides - csak vízszintes szegélyek hozzáadása (a táblázat teteje és alja)
- vside - csak függőleges szegélyeket rajzol (a táblázat bal és jobb oldalán)
- rhs – csak a táblázat jobb oldalán található szegély
- lhs - szegély csak a táblázat bal oldalán
10. Property height="number" - beállítja a táblázat magasságát: vagy pixelben vagy százalékban.
11. Property rules="parameter" – hol kell megjeleníteni a cellák közötti határokat. A következő értékeket veheti fel:
- mind – minden táblázatcella köré egy vonal húzódik
- csoportok - a címkék által alkotott csoportok közé vonal húzódik , , ,
vagy
- cols - a vonal az oszlopok között jelenik meg
- nincs – minden határ el van rejtve
- sorok - a szegély a címkén keresztül létrehozott táblázatsorok közé kerül
12. Property width="number" - beállítja a táblázat szélességét: vagy pixelben vagy százalékban.
13. Property class="class_name" - megadhatja annak az osztálynak a nevét, amelyhez a tábla tartozik.
14. Property style="styles" - a stílusok minden táblázathoz egyedileg állíthatók be.
Most itt az ideje, hogy belevessünk a táblázatba, és megnézzük a táblázat celláinak attribútumait. Ezeket az attribútumokat a nyitó címkébe kell írni.
.
Attribútumok és tulajdonságok És |
1. Property align="parameter" - beállítja egy külön táblázatcella igazítását. A következő értékeket veheti fel:
- balra - balra igazítás
- közép-közép igazítás
- jobb - jobb igazítás
2. Property background="URL" - beállítja a cella háttérképét. URL helyett a háttérkép címét kell írni.
3. Tulajdonság bgcolor="color" - beállítja a cella háttérszínét.
4. Property bordercolor="color" – a cellaszegély színét állítja be.
5. Tulajdonság char="betű" - beállítja azt a betűt, amelyből az igazítást kell végezni. Az align attribútum értékét char-ra kell állítani.
6. Tulajdonság colspan="szám" – beállítja az egyesített vízszintes cellák számát.
7. Property height="number" - beállítja a táblázat magasságát: pixelben vagy százalékban.
8. Property width="number" - beállítja a táblázat szélességét: vagy pixelben vagy százalékban.
9. Property rowspan="number" - beállítja az egyesítendő függőleges cellák számát.
10. Property valign="parameter" - a cella tartalmának függőleges igazítása.
- tetejére - igazítsa a cella tartalmát a sor tetejéhez
- közép-közép igazítás
- alsó - alsó igazítás
- alapvonal - alapvonal igazítás
1. megjegyzés Címkéhez | Ugyanazok a lehetőségek állnak rendelkezésre, mint a | . Egyetlen címke beállításai | mindenkire hierarchikusan alkalmazzák benne
Hogyan lehet megakadályozni, hogy a cellaszegélyek összetapadjanak egy táblázatban
Abban az esetben, ha a cellák között szegélyt (cellaszegélyt) és nulla padding-ot használunk, akkor ezeket továbbra is összeragasztjuk, és dupla szegélyt kapunk. Ennek elkerülése érdekében a táblázat stílusát border-collapse: collapse :
...
Kedves olvasó, most sokkal többet megtudott erről html tag asztal. Most azt tanácsolom, hogy lépjen tovább a következő leckére.
Sziasztok kedves blogolvasók! A weboldalakon gyakran a szövegek és képek mellett különböző adatok táblázatos formában történő megjelenítése válik szükségessé. Igen, ez érthető, a táblázat - a legkényelmesebb módja reprezentáció egy nagy szám információ. Ezért felmerül a kérdés Hogyan ágyazhatunk be táblázatokat html-be?. Ebben a cikkben válaszolok erre a kérdésre, és számos példát adok különféle html-táblázatokra.
Hogyan készítsünk táblázatot HTML használatával
A HTML táblák létrehozása négy lépésben történik.
1. Az első lépésben a html kódban a párosított címke
közölje a böngészővel, hogy egy táblázatot szúrtak be a weboldalba: . A táblázat elem egy weblap blokk eleme. Ezért a táblázat mindig új sorban jelenik meg a szomszédos elemek függőleges behúzásával, így nem kell bekezdésbe tenni.
2. A második lépésben formázunk vonalak táblázatokat páros címkék elhelyezésével
belül . Minden elem külön sort hoz létre:
3. Ezután a harmadik lépésben formázunk sejteket táblázatok páros címkékkel
És |
, amelyek az elem belsejében vannak elhelyezve | . Címke | létrehozza szokásos sejt, és | sejt fejléc, azaz a megfelelő oszlop fejléce:
4. Nos, az utolsó lépésben az elemek belsejébe helyezzük | És | sejttartalom. A táblázat weboldalba történő beszúrásához használt HTML-kód így néz ki:
1. oszlop | 2. oszlop | 3. oszlop |
|---|
1-1. cella | 1-2. cella | 1-3. cella |
2-1 | 2-2. cella | 2-3 |
A szegélyek megjelenítésének finomhangolása segít. A segítségével módosíthatja a keretek vastagságát és színét, valamint módosíthatja a szegélyek típusát.
A cellákba helyezendő szöveg nem kötelező, de ha a szöveg nagy, akkor a címke alkalmazásával bekezdésekre bontható Ha a beszúrt szöveget valahogyan stílusozni kell, használhatja a .
A szöveg mellett a címkével képeket is elhelyezhetünk a cellákban ![]() :
 |
Egy cella tartalma akár egy másik táblázat is lehet. Ebben az esetben a beágyazott tábla létrehozása nem különbözik egy normál tábla létrehozásától. Csak a címkék között És | címkék kerülnek beillesztésre , és sorok és cellák kerülnek beszúrásra.
A táblázatok létrehozásakor néhány szabályt figyelembe kell venni:
- csak a címke használható a táblázat létrehozásához
;
- címke
csak címkén belül lehet ;
- címkéket
| És | csak címkén belül lehet | , bármely más címketartalom a böngésző figyelmen kívül hagyja;
- táblázat tartalma (szöveg vagy kép) csak címkékben lehet
| És | ;
- táblázat celláinak legalább tartalommal kell rendelkezniük, ellenkező esetben előfordulhat, hogy a böngésző egyáltalán nem jeleníti meg őket, ha valamelyik cellának üresnek kell lennie, akkor általában nem törő szóköz (HTML literal) kerül bele;
- a táblázat a weboldal blokkelemeire vonatkozik;
- a táblázat és celláinak méretei a tartalomtól függenek, pl. az asztal szélességében és magasságában meg van nyújtva, hogy minden elférjen;
- egy kis behúzás van az egyes cellák határai között, valamint az egyes cellák szegélye és azok tartalma között;
- a fejléccellák szövege (a th elem) félkövérrel és középre szedve jelenik meg;
- szegélyek a táblázat körül és a cellái alapértelmezés szerint nincsenek megrajzolva.
Táblázat fejléce
Kezdjük a páros címkével ,
ami a táblázatnak címet ad. A cím szövege ebben a címkében van elhelyezve, amelynek a címkén belül kell lennie . És nem számít, hogy a táblázat html kódjában hol helyezzük el a címkét , a böngésző továbbra is megjeleníti a címet a táblázat felett és középre helyezi. De általában a címke közvetlenül a nyitó címke után helyezzük el :
Ez egy asztal
1.1-es cella | 1.2 cella |
2.1 cella | 2.2 cella |
Kijelző:
Táblázat szakaszok
A html tábla logikailag részekre - szakaszokra bontható. Háromféle szakasz létezik:
- fejléc szakasz, amelyben a fejléccellák helyezkednek el, amelyek a táblázat fejlécét alkotják;
- testrész, amelyben az alapadatokat tartalmazó cellák találhatók;
- befejezési szakasz, amelyben az összes adatot tartalmazó cellák vannak elhelyezve.
A táblázat fejléc szakasza egy pár címke használatával van kialakítva . Ezenkívül legfeljebb egy elem használata megengedett ugyanazon a táblázaton belül, és oda kell mennie html kódot közvetlenül a címke után .
A törzsrész egy pár címkével jön létre . Egy html táblázat több törzsrészt is tartalmazhat, ami lehetővé teszi olyan szerkezeti blokkok létrehozását, amelyekre egységes tervezési stílusokat lehet alkalmazni.
A kitöltési részt egy pár címke alkotja és ugyanabban a tartályban csak egy maradhat.
Ezeknek a párosított címkéknek tartalmazniuk kell címkéket , amelyek a megfelelő szakaszokhoz kapcsolódó sorokat alkotnak:
1. oszlop | 2. oszlop | 3. oszlop |
1.1-es cella | 1.2 cella | 1.3 cella |
2.1 cella | 2.2 cella | 2.3 cella |
Eredmény 1 | Eredmény 2 | Eredmény 3 |
Táblázatcellák egyesítése
Még beszélni kell a táblázatok legfontosabb jellemzőjéről - sejtek összevonása. Az attribútumok több cella egyesítésére szolgálnak. colspanÉs sortávolság címkéket És | . A colspan attribútum beállítja a cellák számát vízszintesen, a rowspan pedig függőlegesen:
1.1 | 1.2-1.3 |
2.1 | 2.2 | 2.3 |
3.1-4.1 | 3.2 | 3.3 |
4.2 | 4.3 |
Példa eredmény:
| 1.1
|
1.2-1.3
|
| 2.1
|
2.2
|
2.3
|
| 3.1-4.1
|
3.2
|
3.3
|
| 4.2
|
4.3
|
A cellák egyesítésénél fontos ellenőrizni a cellák számát az egyes sorokban, hogy ne legyen hiba. Igen, a dizájn | két cellát helyettesít, így a következő sorban két címkének kell lennie | , vagy ugyanaz a design! Ha a cellák száma az összes sorban nem egyezik, akkor üres extra cellák jelennek meg.
Példa hibás html kódra cellák egyesítésekor:
cella 1.1 | cella 1.2 |
cella 2.1 | cella 2.2 |
És az eredmény megjelenik a böngészőben:
Azok. Ha elemezzük a html kódot, észrevehetjük, hogy az első sorban három cella van, amelyek közül kettő a colspan attribútum használatával van egyesítve, a második sorban pedig csak két cella van hozzáadva. Ezért egy harmadik üres cella jelenik meg a második sorban.
Címke attribútumok
Ebben a bejegyzésben már találkoztunk egy címke attribútummal . A border attribútummal, amely a szegély szélességét pixelben állítja be. Alapértelmezés szerint 0, ezért a cellák alapértelmezés szerint szegély nélkül jelennek meg.
A border attribútum mellett számos más fontos attribútumot is támogat a címke. . Vessünk egy pillantást rájuk.
Tulajdonság igazítsa— készletek igazítás táblázatok az oldalon. Felveheti a balra, középre, jobbra értékeket, amelyek balra, középre és jobbra állítják az igazítást. Az alapértelmezett maradt.
Tulajdonság háttér, melyik beállítja a háttérképet az asztalhoz. Értékként a képfájl címét veszi fel.
bgcolor- telepíti háttérszín táblázatok. A háttér attribútummal együtt használható.
Tulajdonság szegély színe készletek keret színe táblázatok.
cella kitöltése- határozza meg cellahatár és annak tartalma közötti távolság. Lehetővé teszi a táblázat olvashatóságának javítását. Az érték bármilyen pozitív szám lehet.
Cellatávolság— készletek a külső cellahatárok közötti távolság.
Erről beszélni hogyan kell beilleszteni a táblázatot html oldal
Befejezem, csak összefoglalom:
- címkéket használunk egy táblázat beszúrására
- asztal megjelölése, - egy sor hozzáadása és - beszúrni egy cellát;
- az asztal az blokk elem weboldalak;
- a cellák tartalma nem csak szöveg lehet, hanem képek és egyéb táblázatok is;
- egy táblázat háromféle szakaszt tartalmazhat: fejléc szakasz — , kitöltési szakasz és karosszériarész ;
- használjon tag attribútumokat a cellák egyesítéséhez
| colspan és rowspan.
Ennyi, a következő bejegyzésben a html oldalon található navigációs eszközökről fogok beszélni. Iratkozz fel a blogom frissítéseire, hogy ne maradj le erről a bejegyzésről! Mindenki, hamarosan találkozunk!
A táblák sokoldalúsága, a megjelenésüket szabályozó nagyszámú paraméter miatt a táblázatok már régóta a weblapok elrendezésének szabványává váltak. A láthatatlan szegélyű táblázat olyan, mint egy moduláris rács, amelynek blokkjaiban kényelmesen elhelyezhető egy weboldal elemei. Ez azonban nem teljesen a helyes megközelítés, mert minden HTML objektum a saját céljaira van definiálva, és ha más célokra használják, és mindenhol, az azt jelenti, hogy nincs alternatíva. Ez így volt hosszú ideje, amíg a rétegek fel nem váltották a táblázatokat a webhelyek elrendezése során. Ez nem jelenti azt, hogy ma már folyamatosan rétegeket használnak, de a tendencia már világosan körvonalazódott – a táblázatok a táblázatos adatok elhelyezésére szolgálnak, a rétegek pedig az elrendezéshez és a tervezéshez.
Hozzon létre egy táblázatot
A táblázat cellák soraiból és oszlopaiból áll, amelyek szöveget és grafikát tartalmazhatnak. A táblázatokat általában az adatok rendszerezésére és bemutatására használják, de a táblázatok nem korlátozódnak erre. A táblázatok segítségével kényelmes az oldalelrendezések elhelyezése megfelelően szöveg- és képtöredékek.
A címkét arra használjuk, hogy táblázatot adjunk egy weboldalhoz. . Ez az elem tárolóként szolgál a táblázat tartalmát meghatározó elemek számára. Minden táblázat sorokból és cellákból áll, amelyek címkékkel vannak beállítva És | . A táblázatnak legalább egy cellát kell tartalmaznia (12.1. példa). Címke helyett engedélyezett | használj címkét | . Szöveg egy címkével ellátott cellában | , a böngésző félkövéren jeleníti meg, és a cella közepén helyezkedik el. Ellenkező esetben a címkék által létrehozott cellák közötti különbségek | És | Nem.
12.1. példa. Hozzon létre egy táblázatot
TABLE címke
| 1. cella |
2. cella |
| 3. cella |
4. cella |
A sejtek elrendezését és megjelenését az 1. ábra mutatja. 12.1.
A HTML-táblázatok annyira funkcionálisak, hogy teljes webhelyek beszúrására (olvasás) használhatók. 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 ne érintsük a tervezést, mert jobb, ha a táblázatokat CSS-stílusokkal díszítjük.
Táblázatcímkék és attribútumok
Íme a táblázatok létrehozásához szükséges főbb elemek:
- a tartály, amelyben az asztal található (ugyanaz, mint a megjelölt ill
számozott listák esetén).
- határ- a keretek vastagságát meghatározó attribútum. Inkább a CSS border tulajdonságot érdemes használni.
-
beállítja a táblázat címkéjét. A tárolót nem tudod használni, de ha mégis úgy döntesz, hogy a táblázat élére állsz, akkor tedd közvetlenül a címke mögé
, a cellákon és sorokon kívül.
- táblázatsort tartalmazó pár címke (vízszintesen azonos szinten elhelyezkedő cellák).
|
- egy táblafejlécet létrehozó címke. Külsőleg a tartalma eltér a többi cella tartalmától – általában a belső szövegtől |
A böngésző félkövér betűt emel ki, és középen helyezi el.
- a tároló, amellyel létrehozták egyszerű sejt. Hány ilyen címkét fog tartalmazni a karakterlánc (tag
, 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 Általános jellemzők. A konténer segítségével a táblázat logikai részeit elválaszthatja egymástól. A címke után helyezték el
, ha nem, akkor utána
.
-
ugyanarra a célra használják, mint
.
tartalmazhat
, de nem fordítva.
- span- egy attribútum, amely megadja azoknak az oszlopoknak a számát, amelyekre a tároló tulajdonságai vonatkoznak
.
-
,
És
- konténerek, amelyek lehetővé teszik a táblázat felosztását a felső (fejlécek), 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 HTML dokumentumban.
- colspan cellák sorba egyesítéséhez szükséges. Az attribútum értéke egy számot tartalmaz, amely megadja az egyesítendő cellák számát.
- sortávolság a cellákat oszloponként összefűzi.
Példa táblázat létrehozására
Hozzon létre egy HTML dokumentumot, és másolja bele a következő kódot:
táblázat példa
Weboldal készítő eszközök
| Célja | Eszköz |
| jelölé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, beállítva hozzá a keretek vastagságát.
-
Weboldal készítő eszközök
- címmel.
- nyitotta ki a vonalat.
|
Célja |
- létrehozott egy cellát fejléc kialakítással.|
Eszköz |
- létrehozta a második fejléccellát a sorban. A colspan paraméter azt jelezte, hogy ennek a cellának vízszintesen kettőt kell elfoglalnia.
- zárja be a sort. A többi sor ugyanígy készült. |
jelölés |
HTML |
XHTML |
- tette hozzá a táblázat második sora normál, nem fejléccellákkal. Hasonlóképpen beszúrtuk a következő sorokat és cellákat.
- csukja be az asztalt.
Frissítve: 2021.04.20
103583
Ha hibát észlel, jelöljön ki egy szövegrészt, és nyomja meg a Ctrl + Enter billentyűket
| |
| | |
| |
| |
|
