HTML-táblázatok létrehozása és stílusa,

A HTML segítségével egyszerűen hozhat létre táblázatokat, és CSS segítségével megtervezheti azokat. Végigvezetjük az első lépéseken.

kijelző

A HTML-táblázatok mindig hasznosak, ha az adatokat áttekinthető formában szeretnénk megjeleníteni. Legyen szó indulási időpontokról, sporteredményekről vagy egy felmérés eredményeiről. A táblázatok segítségével egyértelmű szerkezetet biztosíthat. Ha ehhez HTML-t használsz, akkor megvan az az előnye, hogy mások is könnyedén megcsodálhatják a böngészőben végzett munkádat.

  • Egyszerű asztal
  • Fejléc és lábléc táblázatok
  • Tedd vonzóvá az asztalokat

Egyszerű asztal

×

Először is szeretnénk egy kis példát mutatni Egy HTML-tábla felépítése megmagyarázni. Egy táblázat egyből áll fejléc, hoz asztaltest, Tehát a tényleges tartalom, és a táblázat lábléce. A fejléc és a lábléc nem kötelező, és nem kötelező használni. Azonban a test az, ami igazán számít. Ezért egyelőre a táblázat tartalmára szorítkozunk.

















bejegyzés 1.1 bejegyzés 1.2 bejegyzés 1.3
2. bejegyzés.1 2. bejegyzés.2 2. bejegyzés.3
3. bejegyzés.1 3. bejegyzés.2 3. bejegyzés.3

Először a táblázatot vezeted a táblázat elem egy. Ezt természetesen ismét le kell zárni a táblázat végén. Ezen az elemen belül vannak a vonalak. A táblázat sora a betűvel kezdődik tr-elem zárt. A táblázat tényleges adatai benne vannak td elemek beágyazott. Ezek az egyes sejtek. A fenti kód a következő eredményt produkálja a böngészőben:
Amint látja, az asztal soronként fentről lefelé Látható. Sajnos az alapértelmezett kijelző nem különösebben vonzó. Ezért természetesen még több módot mutatunk az asztal megtervezésére.

Fejléc és lábléc táblázatok

×

Most megmutatjuk, hogyan adhat hozzá fejlécet a táblázathoz oszlopfejlécek és a lábléc hitelezni. A fejléc és a lábléc nem nagyon különbözik a táblázat törzsétől. Íme a kiterjesztett mintatáblázatunk.



1. oszlop címsora
2. oszlop címsora
3. oszlop címsora



















bejegyzés 1.1 bejegyzés 1.2 bejegyzés 1.3
2. bejegyzés.1 2. bejegyzés.2 2. bejegyzés.3
3. bejegyzés.1 3. bejegyzés.2 3. bejegyzés.3
Ez a lábléc az egész táblázatot lefedi.

A táblázat fejléce és lábléce egy-egy sorból áll. A fejben ahelyett td elemek egy eleme jelzi, hogy ez egy fejléc elem. A táblázat címsorát gyakran másképp jeleníti meg a böngésző, mint az egyes bejegyzéseket, például félkövéren szedve. A lábléc viszont egyetlen táblázatcella az attribútummal colspan="3". Ez azt jelenti, hogy ez a cella annyi helyet foglal el, mint három vízszintes cella - más szóval - a cella egy egész sort kitölt ki. Ily módon ésszerűen elhelyezheti azokat az információkat, amelyek a teljes táblázatra érvényesek. Bár az asztal most egy kicsit tisztábbnak tűnik, még mindig nem igazán szép.

Tedd vonzóvá az asztalokat

Most egy példa segítségével szeretnénk bemutatni, hogyan adhat vonzó megjelenést a példatáblázatának. Természetesen megteheti CSS használat. Tárolja stílusait egyben stíluslap és írja be a táblázatát id attribútum, hogy hivatkozni tudjunk rájuk a stíluslapon.



1. oszlop címsora
2. oszlop címsora
3. oszlop címsora



















A táblázat stílusához a következőket használjuk CSS Kód:
táblázat#tábla1 {
keret: 1px tömör fekete;
}
table#Table1 tr:nth-child(páros) {
háttérszín: #eee
}
table#Table1 tr:nth-child(páratlan) {
háttérszín: #fff;
}
table#table1 th {
szín: fehér;
háttérszín: fekete;
padding: 4px 4px 2px 4px;
}
táblázat#tábla1 td {
keret: 1px tömör fekete;
padding: 2px;
}
table#Table1 tr:last-of-type td {
háttérszín: fffb99;
szöveg igazítása: középre;
}

Az első blokkban jelezzük, hogy az egész táblában van a keretrendszer birtokolnia kell. A második és harmadik blokkban vannak a vonalak váltakozva szürke és fehér jobban megkülönböztetik őket. Ezt követően a címsorokat meghagyjuk a tényleges tartalom kontrasztjaként fekete alapon fehér betűkkel képviselni. Az utolsó előtti lépésben mindenkinek kölcsönadunk táblázat cellái egy szegély. Végül az utolsó sorban lévő szöveg, azaz a Lábléc, középen és alátéttel, világos sárga tónussal. Természetesen ízlése szerint testreszabhatja a dizájnt.
Itt láthatod a kész végeredményt:

×

Bővebben a témáról:

bejegyzés 1.1 bejegyzés 1.2 bejegyzés 1.3
2. bejegyzés.1 2. bejegyzés.2 2. bejegyzés.3
3. bejegyzés.1 3. bejegyzés.2 3. bejegyzés.3
Ez a lábléc az egész táblázatot lefedi.