A táblázat sorokból és oszlopokból álló cellákból álló rács. A táblázatok példái közé tartoznak a különböző pénzügyi kimutatások, sporteredmények, naptárak, menetrendek stb. Az egyedi rácsblokkot táblacellának nevezzük. A táblázatcellák sokféle információt tartalmazhatnak, beleértve a számokat, szöveget, sőt video- és audioobjektumokat is. A HTML nyelv használatával a táblázatokat soronként írják.
Elem
a táblázat tartalmát meghatározó elemek tárolójaként szolgál. Táblázatsor létrehozásához hozzá kell adnia az elemet
párosított blokkcímke
(angolból rövidítve. "taye row" - táblázat sor). Hány címke
hozzáad, annyi sort a táblázatban, és lesz. Nyitó címke
a táblázat új sorának kezdetét jelöli. Az elemeket utána helyezik el |
(rövidítve angolból "taye data" - táblázat adatai), amelyek mindegyike külön cellát határoz meg ebben a sorban. Belső elem |
a tartalmat (szöveg, számok, képek stb.) megjeleníti a cellában. A sor végét egy végcímke jelzi |
.
Elem
(rövidítve az angol "taYe head" - a táblázat fejléce) - opcionális tápelem, amelyet ugyanúgy használnak, mint az elemet |
célja azonban egy fejléc létrehozása egy sorhoz vagy oszlophoz. Jellemzően az elem |
a táblázat első sorába kerül. A böngészők szöveget jelenítenek meg egy elemben |
félkövér betűvel és a cellához képest középre állítva. Egy elem használata a kódban |
segíti a képernyőolvasókat használó embereket, és javítja a keresőmotorok indexelő tábláinak teljesítményét is.
Tekintsünk egy egyszerű táblázatot, amely három sorból és három oszlopból áll, és az első sor cellái a megfelelő oszlopok fejlécei. Alapértelmezés szerint a táblázatok általában szegély nélkül jelennek meg:
Példa: Egyszerű HTML táblázat
| 1. fejezet | 2. fejezet | 3. fejezet |
|---|
| Cella 2x1 | Cella 2x2 | Cella 2x3 |
| Cella 3x1 | Cella 3x2 | Cella 3x3 |
Asztal szegély
Már tudjuk, hogy a táblázatok alapértelmezés szerint szegély nélkül jelennek meg. Szegély hozzáadásához egy tábla körül meg kell adnia néhány egyszerű stíluslap -szabályt a dokumentumban. Ingatlan határ vezérli a táblázat rácsvonalainak megjelenítését, és beállítja az asztal körüli szegély szélességét pixelben. Az asztal körül és a cellák között szegély jelenik meg. A tulajdonság beállításával adjon hozzá egy képpont széles keretet a már létrehozott táblázathoz határ a táblázat minden eleméhez, például így:
Példa: Tulajdon alkalmazása határ
Keret az asztal körül
| 1. fejezet | 2. fejezet | 3. fejezet |
|---|
| Cella 2x1 | Cella 2x2 | Cella 2x3 |
| Cella 3x1 | Cella 3x2 | Cella 3x3 |
Egy asztali keret
Alapértelmezés szerint a szomszédos táblázatcellák saját szegéllyel rendelkeznek. Ez egyfajta "kettős szegélyt" eredményez, amint a fenti példában látható. A "kettős szegély" megszabadításához adja hozzá a CSS tulajdonságot határ-összeomlás stíluslapjához:
Példa: Tulajdon alkalmazása határ-összeomlás
Keret az asztal körül
| 1. fejezet | 2. fejezet | 3. fejezet |
|---|
| Cella 2x1 | Cella 2x2 | Cella 2x3 |
| Cella 3x1 | Cella 3x2 | Cella 3x3 |
Táblázatmezők és térközök
Alapértelmezés szerint a táblázatcellák mérete a tartalmukhoz igazodik, de néha szükség van néhány kitöltésre a táblázat adatai körül. Mivel a térközök és a margók az adatmegjelenítési elemekhez kapcsolódnak, ez a hely testreszabható a CSS stíluslapok használatával. Cellamező ( párnázás) A cella tartalma és a szegély közötti távolság. Hozzáadásához használja a tulajdonságot párnázás elemre |
vagy |
... Sejtosztás ( határtávolság) A távolság közöttük ( |
vagy |
). Először adja meg az értéket különálló ingatlan határ-összeomlás elem
majd a paraméterérték megváltoztatásával állítsa be a cellák közötti távolságot határtávolság... Korábban az attribútumok voltak felelősek a mezőkért és a cellaközökért. cellpaddingés sejtosztás elem
de elavultak voltak a HTML5 specifikációban.
Használati példa párnázásés határtávolság:
Példa: Tulajdonságok alkalmazása párnázásés határtávolság
párnázás és szegélytávolság
| 1. cella | 2. cella |
| 3. cella | 4. cella |
Asztal szélessége
A tábla által a böngészőablakban elfoglalt szélesség a tulajdonság segítségével adható meg szélesség CSS, képpontban vagy százalékban. A táblázat szélességének pixelben történő megadásával pontos szélességét határozhatja meg. A százalék lehetővé teszi, hogy rugalmassá tegye az asztalt, azaz "nyúlik" vagy "zsugorodik" attól függően, hogy milyen egyéb elemek vannak az oldalon, és mekkora a böngészőablak.
Íme egy példa a tulajdonság használatára szélesség: Táblázat (szélesség: 100%;) Példa: Tulajdon alkalmazása szélesség
| 1. cella | 2. cella |
| 3. cella | 4. cella |
szélesség: 100%
| 1. cella | 2. cella |
| 3. cella | 4. cella |
Összefűző sejtek (colspan és rowspan)
A táblázatstruktúra egyik fő jellemzője a cellafűzés, amely magában foglalja a cella nyújtását több sorra vagy oszlopra. Ez összetett táblázatstruktúrákat tesz lehetővé: fejléceket
vagy sejtek |
attribútumok hozzáadásával kombinálódnak colspan vagy sorpanel... Tulajdonság colspan meghatározza az adott cella vízszintesen kiterjedő celláinak számát, és sorpanel- függőlegesen.
Oszlopok összefűzése
Az oszlopfűzést az attribútum használatával érik el colspan elemekben |
vagy |
- a cella jobbra húzódik, hogy lefedje a következő oszlopokat. A következő példában az attribútum értéke colspan egyenlő 2 -vel, ami azt jelenti, hogy a cellának két oszlopra kell kiterjednie.
Példa: Attribútum alkalmazása colspan
Colspan attribútum
| colspan= "2"> Cella két oszloppal |
|---|
| 1. cella | 2. cella |
| 3. cella | 4. cella |
Összefűző karakterláncok
Karakterláncok attribútum használatával összefűzve sorpanel, pontosan úgy működnek, mint az egyesített oszlopok, azzal az egyetlen különbséggel, hogy a cellatartomány felülről lefelé halad, és több sort is átfog.
Ez a példa két sorral lefelé húzza a táblázat első celláját:
Példa: Attribútum alkalmazása sorpanel
| Cella két vonalon |
1. cella | 2. cella |
|---|
| 3. cella | 4. cella |
Rowspan attribútum
| sorpanel= "2"> Cella két vonalon |
1. cella | 2. cella |
|---|
| 3. cella | 4. cella |
Táblázat fejléce
Párcímkét használunk táblázatfejléc vagy felirat létrehozásához
(angol feliratból - aláírás). Elem
a táblázat fejlécének megszervezésére szolgál. Közvetlenül a címke után található
de egy sor vagy cella leírásán kívül.
Példa: Címke használata
Felirat elem
Ez a táblázat fejléce
| Cella két vonalon |
1. cella | 2. cella |
|---|
| 3. cella | 4. cella |
Címkék csoportosítása a táblázat elemeihez
A táblázat elemeinek csoportosításához használja a címkéket
,
és
... Ahogyan egy weboldal tartalmazhat fejlécet, törzset és láblécet, a táblázat is tartalmazhat fejet, törzset és láblécet. A sorok logikai csoportosításához a táblázat tetején (azaz a táblázat felső fejének létrehozásához) használja a címkét
... A táblázat fejléceit az elembe kell helyezni
, például:
| 1. fejezet | 2. fejezet< /th> |
|---|
A táblázat fő tartalmának (törzsének) az elemen belül kell lennie
(több ilyen blokk is lehet a táblázatban). A sorok logikai csoportosításához a táblázat alján (azaz a táblázat "láblécének" létrehozásához) használja a címkét
(egy táblázatban legfeljebb egy címke megengedett
). A forráskódban a címke
a címke elé kell helyezni
... A logikai csoportosításon kívül az elemek használatának egyik oka
és
ha a táblázat túl hosszú ahhoz, hogy egyszerre megjelenjen a képernyőn (vagy ki legyen nyomtatva), akkor a böngésző megjeleníti a címet (
) és az utolsó sor (
), amikor a felhasználó végiglapozza a táblázatot.
Példa: Címkék
,
és
Thead, tbody és tfoot címkék
| Ez a táblázat fejléce |
|---|
| Ez a táblázat lábléce |
| 1. cella | 2. cella | 3. cella | 4. cella |
Annak ellenére, hogy előttünk állunk
- tette hozzá
, ennek ellenére megjelenik a táblázat végén. Ez abból fakad, hogy
sok sort tartalmazhat. De a böngészőnek megjelenítenie kell a táblázat alját, mielőtt megkapja az összes (potenciálisan számos) adatsort. Ezért
a kód az elem elé van írva
.
Feladatok
A táblázatok az egyik legfontosabb, mégis összetettebb elemek, amelyeknek jelen kell lenniük a weboldalakon. Segítségükkel kényelmes és lényegre törő formában kell bemutatni a fontos és hasznos információkat. Természetesen a legtöbb szerkesztő a sablonokon, amelyek különböző motorokon dolgoznak, lehetővé teszi egy táblázat automatikus beszúrását egy webhely vagy egy külön kiadvány oldalára, de mi van akkor, ha egy webes erőforrás kialakítása, oldalai a semmiből jönnek létre? Akkor egy kezdő varázsló problémával szembesülhet: hogyan kell csinálni. Találjuk ki, hogyan kell helyesen és gyorsan létrehozni ezt az elemet. Szerkesztő kiválasztásaElőször is, egy táblázat létrehozásakor el kell döntenie a szerkesztőről, amelyben dolgozni fog. Természetesen a legegyszerűbb módja annak a programnak a kiválasztása, amelyben létrehozza a fő webhelykódot. De a legjobb, ha ilyen célokra használ egy régi jó notebookot. Megkérdezheti, miért bonyolítja az életét, mert ha mindent egyszerre tesz meg a szerkesztőben, akkor az eredmény is azonnal látható, és használhatja a program tippjeit is. Igen, ez igaz, de ha egy táblázatot a semmiből hoz létre, nemcsak alaposan tanulmányozhatja létrehozásának alapelvét, hanem megelőzheti a bosszantó gépelési hibákat és hibákat a fő kódban. Néha előfordul, hogy a kurzor véletlenül lefelé mozog, és az írás során hiba lép be a kódba, amelyet néha nehéz megtalálni. Miután létrehozott egy táblázatot a jegyzettömbben, másolhatja a titkosítást, és beillesztheti a kívánt helyre. Táblázat létrehozásának algoritmusaElőször állítsunk össze egy rövid algoritmust, hogyan lehet táblázatot készíteni HTML -ben. Ez azért van, hogy megértse az egyes lépések sorrendjét. Ezután pontosan elemezzük, hogyan kell végrehajtani az egyes pontokat. 
Kezdjük az előkészítő lépésekkel. 1. Rajzoljon sematikus képet a táblázatról egy papírlapra. 2. Megszámoljuk a sorok és cellák számát. Ha az utóbbiak száma eltérő, akkor minden sorra külön számolunk. 3. Határozza meg a fejléccellák számát a sorban (például a "No.", "Name", stb. Cellákat). 4. Írja le a táblázat fő paramétereit - szín, magasság és szélesség, szöveg igazítása - általában mindent, amit szükségesnek tart. 1. Helyezze be a táblázat címkéit. 2. Helyezzen be sorcímkéket a szükséges szám alapján. 3. A sorokba illessze be a cellák címkéit (rendes és nagybetűs), szintén a papírra írt szám alapján. 4. Állítsa be a tábla egészének paramétereit. 5. Ha szükséges, állítson be mutatókat az egyes cellákhoz. 6. Megtöltjük a celláinkat szöveggel. 
Hozzon létre egy táblázatotTehát egy szerkesztőt választott, most kitaláljuk, hogyan hozhatunk létre táblázatot HTML -ben. Az a címke, amellyel a táblázatot beillesztik az oldal kódjába ( ), párosítva van, vagyis a konstrukciónk ezzel a címkével kezdődik, és ezzel fejeződik be .A táblázatcímkék beszúrása után sorokat és cellákat hozunk létre. Azonnal megjegyezzük, hogy ezek az elemek is párosítva vannak. Címke karakterláncokat határoz meg, és | - sejtek. Fejléccellák esetén használja a párosított elemet | . Amint már említettük, az első lépés a sorok felrajzolása, majd a cellák beírása. Annak érdekében, hogy ne tévesszen meg, azt tanácsoljuk, hogy húzzon be egy vagy két sorban lévő blokkok közé, vagy írjon be új elemblokkot a "Tab" billentyű segítségével. Hogy nézhet ki? Mint az: ;;| P / p No. | ;| Vezetéknév | ; ;;| 1 | ;| Ivanov | ; | ; .
Amint látja, nincs benne semmi bonyolult. A legfontosabb dolog nem zavarodni a sorok és cellák számában. Ellenkező esetben az asztal ferde lehet. Megbeszéltük egy táblázat létrehozását HTML -ben, most folytathatjuk mind a mátrix, mind pedig sorai és cellái paramétereit. 
Táblázat paramétereiA kód írásakor figyeljen a következő pontokra: a szegélyek igazítása, háttér, szöveg stb. A táblázat paraméterei a címkében vannak beállítva ... Ezek tartalmazzák:1. Szegély - a szegélyek szélessége. Egész számként van beállítva. Alapértelmezés szerint bármelyik tábla szegélye nulla. 2. Bordercolor - szegély színe. Beállítható hexadecimális színkódként (# 00008B), a neve pedig angolul (DarkBlue). Alapértelmezés szerint mindig szürke. 3. Bgcolor - Kód vagy név alapján is beállítható. 4. Igazítás - szöveg igazítása az asztal mögött. Az alapértelmezett balra igazított. Ehhez a paraméterhez a következő lehetőségek állnak rendelkezésre: - balra - tekerje jobbra;
- jobbra tekerés balra;
- center - megjeleníti a táblázatot középen, csomagolás nélkül.
5. Szélesség és magasság - az asztal szélessége és magassága. Beállítható pixelben és százalékban is (a böngészőablak méretéhez viszonyítva). Ezt vagy azt a mutatót felírva különös figyelmet kell fordítani a tervezésre. A paramétert egy "egyenlőség" jelnek kell követnie, amelyet a megadott érték idézőjelben kell követni. Ami a szöveg színét illeti, a stílusa ugyanolyan, mint a normál szövegé HTML formátumban. Példa az asztaltervezésre: ;;| P / p No. | ;| Vezetéknév | ; ;;| 1 | ;| Ivanov | ; | ; .
String paraméterekTehát már kitaláltuk, hogyan lehet táblázatot készíteni HTML -ben és regisztrálni annak fő paramétereit. De mi van, ha ki kell emelnünk egy sort? Másképpen kell kialakítani, mint a táblázat fő szövegét? A karakterlánc paraméterei a címkébe vannak írva pontosan ugyanaz, mint a táblázat adatai. A karakterlánchoz a következő változókat lehet beállítani:1. Határ, bordercolor és bgcolor már ismert. 2. Igazítás - a szöveg igazítása egy sorban. Az értékek balra, középre és jobbra vehetők. 3. Valign - ez a címke függőlegesen igazítja a szöveget. A következő értékeket veszi igénybe: - felül - a szöveg a felső szegélyhez igazodik;
- középen - a központban;
- alul - az alsó szegély mentén.
Példa a sor formázására: CellaparaméterekÉs az utolsó dolog, amire érdemes odafigyelni azok számára, akik szeretnék tudni, hogyan kell táblázatot készíteni HTML -ben, az egyes cellák paraméterei, rendszeresek és nagybetűsek. Valójában minden ugyanúgy történik, mint egy táblázat vagy sor esetében. Az egyetlen dolog az, hogy további két fontos elem kerül hozzáadásra: 1. Colspan - ez a paraméter határozza meg a cella által lefedhető oszlopok számát. 2. Rowspan - már jelzi a sorok számát, amelyet ez a cella foglal el. Mivel a kialakítás nem különbözik a sor írásától, nem adunk példát a kódra. 
következtetéseketAz asztal elkészítése nem olyan nehéz, mint első pillantásra tűnhet. A kód írása során a legfontosabb a kitartás és a figyelem. Ami azt illeti, hogyan lehet táblázatot beszúrni a HTML -be, akkor annak titkosító kódja elegendő ahhoz, hogy pontosan másolja és illessze be az oldal helyére, ahol véleménye szerint található. Bátran kísérletezzen, és hamarosan elsajátítja az asztalok tökéletes létrehozásának technikáját. Sok szerencsét!
A HTML táblák annyira működőképesek, hogy ezek segítségével egész webhelyeket gépelhet (olvasható). Most arról fogunk beszélni, hogy egyszerű HTML táblákat illesszünk be egy weboldalba, csak a jelölést elemezzük, de ne érintsük meg a dizájnt, mert jobb, ha a táblázatokat CSS stílusokkal díszítjük.
Táblázatcímkék és attribútumok
Íme az alapvető elemek a táblázatok létrehozásához:
- a tartály, amelyen belül az asztal található (ugyanaz, mint címkézett ill
számozott listákhoz).
- határ- egy attribútum, amely meghatározza a keretek vastagságát. Helyesebb a border CSS tulajdonságot használni.
-
megadja a táblázat aláírását. Nem kell használnia a tárolót, de ha mégis úgy dönt, hogy megnevezi a táblázatot, akkor tegye azt közvetlenül a címke után
, külső sejtek és vonalak.
- egy táblázatsort tartalmazó párosított címke (cellák, amelyek vízszintesen azonos szinten helyezkednek el).
|
- a címke, amely létrehozza a táblázat fejléc celláját. Külsőleg tartalma eltér a többi cella tartalmától - általában a benne lévő szövegtől |
a böngésző merész és központosított.
- konténer, amellyel egyszerű cella jön létre. Hány ilyen címkét tartalmaz a karakterlánc (tag
, annyi sejt lesz benne: egy címke - egy cella.
-
lehetővé teszi az oszlopok gyors és csoportosítása nélküli csoportosítását közös jellemzők beállításához. Egy konténer segítségével elválaszthatja egymástól a táblázat logikai részeit. A címke után található
, ha nem, akkor utána
.
-
ugyanarra a célra használják, mint
.
tartalmazhat
de nem fordítva.
- span- egy attribútum, amely meghatározza az oszlopok számát, amelyekre a tároló tulajdonságai vonatkoznak
.
-
,
és
- konténerek, amelyek lehetővé teszik az asztal felosztását a felső (fejlécek), a fő (test) é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 a HTML dokumentumban.
- colspan a sejtek sorban történő egyesítéséhez szükséges. Az attribútum értéke egy számot tartalmaz, amely meghatározza az egyesítendő cellák számát.
- sorpanel cellákat egyesít oszlopokká.
Példa egy táblázat létrehozására
Hozzon létre egy HTML dokumentumot, és másolja be a következő kódot:
Példa táblázat
Weboldal készítő eszközök
| Időpont egyeztetés | Eszköz |
| Jelölés | Html | XHTML |
| Bejegyzés | CSS |
| Fejlesztése | PHP | Piton |
A böngészőben a dokumentum így néz ki: Elemezzük, hogy melyik kódsor miért felelős.
- kinyitotta az asztalt a keretek vastagságának beállításával.
-
Weboldal készítő eszközök
- címezte.
- nyitott egy sort.
|
Időpont egyeztetés |
- létrehozott egy cellát címadatával.|
Eszköz |
- létrehozott egy 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árta a sort. A többi sor ugyanúgy jött létre. |
Jelölés |
Html |
XHTML |
- tette hozzá a táblázat második sorát a szokásos, nem fejléces cellákkal. A következő sorokat és cellákat hasonló módon illesztettük be.
- becsukta az asztalt.
az asztal teste. A törzs sorokból és oszlopokból áll. A táblázat betöltése soronként történik.
Minden címke új sort hoz létre. Tovább fészkelve oszlopok jönnek létre. Több oszlop is létrehozható. Ebben az esetben nyomon kell követnie az egyes sorok oszlopainak számát. Például, ha az első sor 5 oszlopot tartalmaz, akkor a következő soroknak is 5 oszlopot kell tartalmazniuk. Ellenkező esetben az asztal lebeg. Lehetőség van a sejtek kombinálására.
Hogyan készítsünk táblázatot html -ben
Mondjunk egy példát, html kódot:
| Példa táblázat |
| 1. oszlop |
2. oszlop |
Ügyeljen a cellára | ... A speciális colspan attribútumot használjuk a cellák vízszintes kombinálására. Számértéke jelzi az egyesítendő oszlopok számát. Ennek az attribútumnak van egy analógja is: tag | (táblázat fejléce), ahol a colspan írást is meg kell írni. Az eredmény ugyanaz lesz. De a szokásos td -t gyakran használják.
Most nézzük meg közelebbről a címke összes attribútumát.
.
Címke attribútumok és tulajdonságok
A nyitó címkéhez különféle attribútumokat írhat.
1. Property align = "paraméter" - beállítja a táblázat igazítását. A következő értékeket veheti fel:
A fenti példában igazítottuk a táblázatot a align = "center" középpontba.
Ez az attribútum nemcsak egy táblára, hanem az egyes táblázatcellákra is alkalmazható. vagy húrok | ... Így az igazítás különböző lesz a különböző cellákban.
Például
| ... |
| ... |
...
2. Property background = "URL" - beállítja a háttérképet. Az URL helyett a háttérkép címét kell írni.
Példa
| Példa táblázat |
| 1. oszlop |
2. oszlop |
Az oldalon a következőre konvertálva:
A fenti példában a háttérképünk az img mappában található (amely ugyanabban a könyvtárban található, mint a html oldal), és a kép neve fon.gif. Ne feledje, hogy a címkében a style = "color: white;" ... Mivel a háttér majdnem fekete, így a szöveg nem egyesül a háttérrel, fehérré tettük a szöveget.
3. Tulajdonság bgcolor = "szín" - beállítja a táblázat háttérszínét. Színként a teljes paletta közül választhat (lásd a html színek kódjait és neveit)
4. Tulajdonság határ = "szám" - beállítja a táblázat szegélyének vastagságát. Az előző példákban a border = "1" értéket adtuk meg, ami azt jelenti, hogy a szegély szélessége 1 pixel.
5. Tulajdonság bordercolor = "szín" - beállítja a szegély színét. Ha a szegély = "0", akkor nem lesz szegély, és a szegély színe nem lesz értelme.
6. Tulajdonság cellpadding = "szám" - behúzás a keretből a cellatartalomba pixelben.
7. Tulajdonság cellák közötti távolság = "szám" - a cellák közötti távolság pixelben.
8. Tulajdonságok = "szám" - az oszlopok száma. Ha nem adja meg, a böngésző maga határozza meg az oszlopok számát. Az egyetlen különbség az, hogy ennek a paraméternek a megadása valószínűleg felgyorsítja a táblázat betöltését.
9. Tulajdonságkeret = "paraméter" - a szegélyek megjelenítése az asztal körül. A következő értékeket veheti fel:
- üres - ne húzzon határokat
- szegély - az asztal körüli szegély
- fenti - szegély a táblázat tetején
- alul - szegély a táblázat alján
- hsides - csak vízszintes szegélyek hozzáadása (a táblázat teteje és alja)
- vsides - csak függőleges határokat rajzoljon (a táblázat bal és jobb oldalán)
- rhs - szegély csak az asztal jobb oldalán
- lhs - szegély csak az asztal bal oldalán
10. Tulajdonság magassága = "szám" - beállítja a táblázat magasságát: pixelben vagy százalékban.
11. Tulajdonsági szabályok = "paraméter" - hol jeleníthetők meg a cellák közötti határok. A következő értékeket veheti fel:
- minden - egy vonalat húzunk minden táblázat cella körül
- csoportok - a sor a címkék által alkotott csoportok között jelenik meg , , ,
vagy
- cols - az oszlopok közötti sor jelenik meg
- nincs - minden határ el van rejtve
- sorok - a szegélyt a címkén keresztül létrehozott táblázatsorok között húzzák meg
12. Tulajdonság szélessége = "szám" - beállítja a táblázat szélességét: képpontban vagy százalékban.
13. Property class = "class_name" - megadhatja annak az osztálynak a nevét, amelyhez a tábla tartozik.
14. Tulajdonságstílus = "stílusok" - a stílusok külön -külön állíthatók be minden táblához.
Itt az ideje, hogy belemerüljön a táblázatba, és nézze meg a táblázat celláinak tulajdonságait. Ezeket az attribútumokat a nyitó címkébe kell írni.
.
Tulajdonságok és tulajdonságok és |
1. Property align = "paraméter" - beállítja az egyes cellák igazítását a táblázatban. A következő értékeket veheti fel:
- bal - bal igazítás
- center - center align
- jobb - jobb igazítás
2. Property background = "URL" - a cella háttérképének beállítása. Az 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. Tulajdonság bordercolor = "color" - beállítja a cella szegélyének színét.
5. Tulajdonság char = "letter" - beállítja azt a betűt, amelyből az igazítást el kell végezni. Az align attribútum értékét char -ra kell állítani.
6. Colspan tulajdonság = "szám" - beállítja az egyesítendő vízszintes cellák számát.
7. Tulajdonság magassága = "szám" - beállítja a táblázat magasságát: vagy pixelben, vagy%-ban.
8. Tulajdonság szélessége = "szám" - a táblázat szélességét állítja be: vagy pixelben, vagy%-ban.
9. Tulajdonság rowspan = "szám" - beállítja az egyesített függőleges cellák számát.
10. Tulajdonság valign = "paraméter" - a cellatartalom függőleges igazítása.
- top - a cella tartalmát a sor elejére igazítja
- középső - középső igazítás
- alsó - igazítsa az aljához
- alapvonal - alapvonal igazítás
1. megjegyzés Címkére | ugyanazok a lehetőségek állnak rendelkezésre, mint | ... Egy címke paraméterei | hierarchikusan lesz alkalmazva mindenkire benne
Hogyan lehet megakadályozni az asztali cellák összetapadását
A szegély (cellák szegélye) és a cellák közötti nulla kitöltés használata esetén ezek továbbra is össze vannak ragasztva, és kettős szegélyt kap. Ennek elkerülése érdekében regisztrálnia kell a border-collapse: collapse táblázatot a stíluslapon:
...
Kedves olvasó, most sokkal többet megtudott a html tábla címkéjéről. Most azt tanácsolom, hogy folytassa a következő leckével.
Egy 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ázatfejlécek
A HTML táblákban 2 típusú cella található. A címke a szokásos típusú cellát határozza meg. Ha egy cella címsorként működik, akkor azt címkével azonosítják.
Példa a HTML táblára a címmel
| Volkswagen AG |
Daimler AG |
BMW csoport |
|---|
| Audi |
Mercedes-Benz |
Bmw |
| Skoda |
Mercedes-AMG |
Mini |
| Lamborghini |
Okos |
Rolls Royce |
HTML tábla forráskódja fejlécekkel
Volkswagen AG |
Daimler AG |
BMW csoport |
|---|
Audi |
Mercedes-Benz |
Bmw |
Skoda |
Mercedes-AMG |
Mini |
Lamborghini |
Okos |
Rolls Royce |
Összekapcsolni a cellákat egy HTML táblában
A HTML táblák képesek a vízszintes és függőleges cellák kombinálására.
Nak nek egyesítse a cellákat vízszintesen használja a colspan = "attribútumot NS", a cellában vagy ahol x
Nak nek egyesítse a cellákat függőlegesen használja a rowspan attribútumot = " NS", a cellában vagy ahol x- az egyesítendő cellák száma.
A sejtek egyszerre vízszintesen és függőlegesen is összevonhatók. Ehhez használja a colspan és a rowspan attribútumokat a kívánt cellához:
Cellaszöveg |
Vegye figyelembe, hogy a sor elemeinek száma a cellák összevonásakor megváltozik. Például, ha egy táblázat 3 oszlopból áll, cellákkal, és egyesítjük az első és a második cellát, akkor 2 elem lesz a címkén belül, amely ezt a sort határozza meg, az első tartalmazza a colspan = "2" attribútumot.
Példa HTML táblázat cellák összefűzésével
HTML táblázatforrás 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 és aláírás HTML táblákban
A HTML táblák 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 csomagolja. meghatározza a fejléc területét, - a lábléc területét, - a táblázat törzsét.
Alapértelmezés szerint a fejlécek és láblécek nincsenek stílusban beállítva (ez szükség esetén CSS -en keresztül is elvégezhető), de a böngészők használhatják. Például, ha többoldalas táblázatot nyomtat, a fejlécek és láblécek sokszorosíthatók minden nyomtatott oldalon.
A területi címkék elhelyezésének helyes sorrendje a táblázat HTML -kódjában a következő: először a fejléc, majd a lábléc, majd a törzs. Ebben az esetben az oldal fő része a fejlécek és láblécek között jelenik meg.
Szükség esetén aláírást adhat a táblázathoz. Ehhez használjon címkét.
Példa HTML táblázat fejlécekkel, láblécekkel és aláírással
A táblázat forráskódja fejlécekkel, láblécekkel és aláírással
Teljes készlet Renault Sandero Stepway
Jellegzetes |
SUTA 09H 6R |
SUTA 09HR6R |
SUTA 15H 5R |
|---|
Elérhetőség |
+ |
+ |
+ |
|---|
A motor teljesítménye |
0,9 (90 LE) |
0,9 (90 LE) |
1.5 (90 LE) |
|---|
Üzemanyag |
benzin |
benzin |
dízel |
|---|
Toxicitási arány |
Euro 6 |
Euro 6 |
Euro 5 |
|---|
Oszlopok és oszlopcsoportok
A HTML táblázat oszlopokra és oszlopcsoportokra osztható a és címkék használatával.
Ez a szétválasztás lehetővé teszi a stílusok beállítását a táblázathoz minimális számú CSS -tulajdonság használatával, ezáltal csökkentve a táblázatkód mennyiségét (ahelyett, hogy stílusokat határozna meg az oszlop minden cellájához, egyszerre egy vagy több oszlophoz is beállíthat stílusokat).
Címkék és a címke belsejébe helyezve a címkék elé, AKP6 (EDC) Terjedés |
HTML tábla c forrás é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) |
A motor teljesítménye |
|---|
dízel |
benzin |
dízel |
Üzemanyag |
|---|
AKP6 (EDC) |
AKP6 (EDC) |
AKP6 (EDC) |
Terjedés |
|---|
Táblázatok a weboldal elrendezésében
A modern webhelyeken fontos, hogy az oldalakat helyesen jelenítse meg számítógépen és mobileszközön egyaránt. Nem tanácsos táblázatokat használni a HTML -oldal vázának létrehozásához, mivel elveszik a képesség, hogy a tartalmat különböző méretű képernyőkhöz (számítógépek, okostelefonok, táblagépek) igazítsuk.
A Táblázat csoportcímkéket a legjobban az oldalon belül lehet használni táblázat formájában formázott tartalom megjelenítéséhez.
| |
|
| | |
| | |
