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
| , 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, és az ilyen cellák tartalma megjelenik félkövér szövegés középre igazítva. címkéket | és | tartalmazhat bármilyen HTML-elemet, amely a dokumentumtörzsben használható.
Táblázat a táblázatbanA 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 ezt a kódot a második sor második cellájába:
Asztal kerettel
EREDMÉNY: Táblázat szegély nélkülAsztal kerettelCímke attribútumok Példa
EREDMÉNY:
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 minden elavult táblaattribútumot lecserélhet. 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ékA címkék segítségével összetettebb táblázatok hozhatók létre: Példa
EREDMÉNY: html táblázat oszlopcsoportosító címkéiCímkék attribútum
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
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:
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
Vízszintes igazítás egy adott táblázatoszlop szövege stílus megadásával módosítható 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.
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
- határ- a keretek vastagságát meghatározó attribútum. Ehelyett jobb használni határterületi ingatlan CSS.
, 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. - egy tároló, amellyel egy egyszerű cellát hozunk létre. Hány ilyen címkét fog tartalmazni a karakterlánc (tag , annyi cella lesz benne: egy címke - egy cella. .
ugyanarra a célra használják, mint , 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 Fejlődé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.
- csukja be az asztalt.- nyitotta ki a vonalat. - zárja le a sort. A többi sor ugyanígy készült.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.jelölés HTML XHTML
Egyszerű HTML tábla forráskódja
1. cella
2. cella
3. cella
4. cella
5. cella
6. cella
7. cella
8. cella
9. cella
HTML táblázat fejlécek
A HTML-táblázatokban kétféle cella található. A címke egy normál típusú cellát határoz meg. Ha egy cella fejlécként működik, akkor a címke segítségével azonosítja.
Példa egy th címsort tartalmazó HTML-táblázatra
Volkswagen AG Daimler AG BMW csoport Audi mercedes benz BMW Skoda Mercedes-AMG Mini Lamborghini Okos Rolls Royce HTML tábla forráskódja th fejlécekkel
Volkswagen AG
Daimler AG
BMW csoport
Audi
mercedes benz
BMW
Skoda
Mercedes-AMG
Mini
Lamborghini
Okos
Rolls Royce
Cellák egyesítése HTML-táblázatban
A HTML-táblázatokban lehetőség van a cellák vízszintes és függőleges egyesítésére.
Nak nek egyesítse a cellákat vízszintesen használja a colspan=" attribútumot x" , a cellában vagy , hol x
Nak nek függőlegesen egyesítse a cellákat használja a rowspan=" attribútumot x" , a cellában vagy , hol x- az egyesítendő cellák száma.
A cellák vízszintesen és függőlegesen egyidejűleg egyesíthetők. Ehhez használja a colspan és a rowspan attribútumot is a kívánt cellához:
Cellaszöveg Felhívjuk figyelmét, hogy a cellák egyesítésekor a sorban lévő elemek száma megváltozik. Például, ha a táblázatban 3 oszlop van cellákkal, és az első és a második cellát egyesítjük, akkor minden a címkén belül, ami meghatározza adott sor 2 elem lesz, az első a colspan="2" attribútumot tartalmazza.
Példa egy HTML-táblázatra cellaegyesítéssel
HTML tábla forráskódja egyesített cellákkal
Nissan
Modell
Felszerelés
Elérhetőség
Nissan Qashqai
VISIA
+
TEKNA
+
Nissan X-Trail
ACENTA
+
CONNECTA
-
Fejlécek és láblécek HTML-táblázatokban
A HTML táblázatok 3 területre oszthatók: fejléc, törzs, lábléc.
Ez úgy történik, hogy a táblázat kiválasztott részének sorait címkékkel burkoljuk be. meghatározza a fejléc területét, - a lábléc területét, - a táblázat törzsét.
A fejlécek és láblécek alapértelmezés szerint nincsenek stílusosak (ezt szükség esetén CSS-en keresztül is megteheti), de a böngészők használhatják. Például egy többoldalas táblázat nyomtatásakor előfordulhat, hogy a fejlécek és láblécek minden nyomtatott oldalon megkettőződnek.
A régiócímkék helyes sorrendje a táblázat HTML-kódjában a következő: először fejléc, majd lábléc, majd törzs. Ebben az esetben az oldal fő része a fejlécek és láblécek között jelenik meg.
Opcionálisan feliratot is hozzáadhat a táblázathoz. Ehhez használja a címkét.
Példa egy HTML-táblázatra fejlécekkel és láblécekkel, valamint felirattal
Táblázat forráskódja fejlécekkel és láblécekkel és felirattal
Komplett készlet Renault Sandero Stepway
Jellegzetes
SUTA 09H 6R
SUTA 09HR6R
SUTA 15H 5R
Elérhetőség
+
+
+
Motor teljesítmény
0,9 (90 LE)
0,9 (90 LE)
1,5 (90 LE)
Üzemanyag
benzin
benzin
dízel
Toxicitási arány
6 euró
6 euró
5 euró
Oszlopok és oszlopcsoportok
Egy HTML-táblázat oszlopokra és oszlopcsoportokra osztható a és címkék segítségével.
Ez az elválasztás lehetővé teszi, hogy stílusokat állítson be a táblázathoz a minimális számú karakter használatával CSS tulajdonságok, ezzel csökkentve a táblázat kódjának mennyiségét (ahelyett, hogy minden oszlopcellához stílust határozna meg, egyszerre egy vagy több oszlophoz is beállíthat stílusokat).
A és címkék a címkén belül helyezkednek el a címkék előtt, AKP6 (EDC)
Terjedés HTML c tábla forráskódja
és
ZEN 2E2C AL A
ZEN 2E2C J5 A
INTENSE 2E3C AL A
Jellegzetes
1,5 (90 LE)
1,2 (115 LE)
1,5 (90 LE)
Motor teljesítmény
dízel
benzin
dízel
Üzemanyag
AKP6 (EDC)
AKP6 (EDC)
AKP6 (EDC)
Terjedés
Táblázatok a webhely oldalelrendezésében
A modern webhelyeken az oldalak helyes megjelenítése fontos számítógépen és számítógépen egyaránt mobil eszközök. Nem tanácsos táblázatokat használni HTML oldalkeret létrehozásához, mivel elveszik a tartalom adaptálása a különböző méretű képernyőkre (számítógépek, okostelefonok, táblagépek).
A táblázatcsoport-címkéket a legjobb az oldalon belül használni a táblázatformátum tartalmának megjelenítésé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 a nagy mennyiségű információ bemutatásának. 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ázatok négy lépésben készülnek.
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 a következővel kerül kiadásra: új sor-tól függőlegesen behúzva szomszédos elemek, í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 cella tartalma. 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 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
, és sorok és cellák kerülnek bele.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 azzal páros címke
, 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, lehetővé téve a létrehozást építőkockák amelyre egységes stílusokat lehet alkalmazni.A kitöltési részt egy pár címke alkotja
és ugyanabban a tartálybancsak 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 design
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 található, 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 beállítja a szegély szélességét képpontokban. 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, amely a 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; - a táblázat egy weblap blokk eleme;
- 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!
- címke