Sadržaj
U prošlosti su se HTML tablice koristile za kontrolu izgleda web stranica, kako bi se održali razmjeri sadržaja, stvorili odjeljci, podijelili podaci itd. Trenutno je to loša praksa, zapravo s novim specifikacijama stavke stol U HTML5 uloženi su svi napori da se to iskoristi za njegovu pravu svrhu, a to je prikaz podataka u dvodimenzionalnim nizovima.Element tablice
Element stol je veliki spremnik i može se nalaziti unutar bilo kojeg elementa koji teče, kao što je div. Unutrašnji element stol imat ćemo sljedeće elemente: natpis, skupna grupa, thead, tbody, tfoot, tr, th Y td, koji su potrebni za davanje ustava našoj tablici, dodatno je novi standard učinio sljedeće atribute zastarjelim unutar stol i mora ih koristiti isključivo CSS: sažetak, poravnanje, širina, bgcolor, dodavanje ćelija, razmak između ćelija, okvir, pravila. CSS konvencija za ovaj element bit će sljedeća:
stol {display: table; granica-urušavanje: odvojeno; razmak između granica: 2px; boja obruba: siva; } Tr element
Kao što dobro znamo, tablice se sastoje od dva osnovna elementa, redaka i stupaca, gdje redovi predstavljaju svaki zapis podataka, a stupci strukturu i vrstu informacija, pogledajmo element koji se koristi za stvaranje redaka, ovaj element je tr. To može biti dijete sljedećih elemenata: stol, thead, tfoot, tbodyKao što vidimo, to može biti izravno dijete tablice ili dijete elemenata koji su djeca tablice i koji definiraju njegovu strukturu. Mora sadržavati 1 ili više stavki td ili th prema potrebi, neki od njegovih zastarjelih atributa također su stavljeni u novi HTML5 standard, a to su: align, char, charoff, valign, bgcolor. Koje mora raditi isključivo CSS, rekao je da CSS ima sljedeću strukturu kao konvenciju:
tr {display: table-row; okomito poravnati: naslijediti; border-color: naslijedi;} Td element
Ovaj element definira stupce unutar naših redaka u tablici, što nam omogućuje da odvojimo podatke unutar zapisa i na taj način ih možemo klasificirati prema svojim potrebama, on je dijete elementa tr, valjani atributi koje može imati su: colspan, raspon redova, zaglavlja a zastarjeli atributi kojima se sada treba baviti u CSS -u su: abbr, os, poravnavanje, širina, char, charoff, valign, bgcolor, visina, nowrap, opseg. CSS konvencija za ovaj element je sljedeća:
td {display: table-cell; okomito poravnati: naslijediti; }Naš prvi stol
Primijenimo u praksi ono što smo do sada vidjeli, već znamo da su za našu tablicu potrebni redovi i stupci unutar našeg spremnika ili nadređenog elementa, da vidimo kako ćemo to prevesti u HTML kod:
Primjer
| Jabuke | Zeleno | Srednji |
| Naranče | naranča | Veliki |
Ovaj kôd daje nam strukturu tablice s 2 retka s 3 stupca, jer vidimo da je to jednostavan tekst, što nas navodi da vidimo ovaj rezultat:
