Tábla létrehozása html - szép példája
Friends! Ezen az oldalon várják a teljes gyakorlati kurzus a tanulmány táblázatok. Nézd meg, és hozzon létre táblázatokat már nem lesz probléma az Ön számára. Tény, hogy hozzon létre nagyon könnyen.
Korábban HTML használt táblázat elrendezés oldalakon. Úgy hívták - táblázatos elrendezést. Később váltotta Divas elrendezés (a címke használatával div), ami bebizonyította, hogy sokkal kényelmesebb és egyszerűbb. És most jön a korszak kiadványszerkesztés oldalak flexbox technológia, amelynek célja, hogy tovább kell egyszerűsíteni az életét web-mester.
Azonban annak ellenére, hogy a fenti, a táblázat html is naprakész, releváns és teljes a webhelyen. Az igazság nem a szerkezet, hanem egy elem a helyén cikkeket.
Táblázatok létrehozása html példák
Mielőtt elkezdi tanulni, hogy hozzon létre egy táblázatot HTML, ez lenne az én, és az asztal ugyanúgy nézett ki - nem 3 egyszerű dolog:
- Hozzon létre egy index.html fájlt
- Nyisson meg egy böngészőben
- Adjuk hozzá a következő kódot:
Létrehozása egyszerű HTML tabletta
Először is, meg kell adnunk az asztalra tag. Ez párosítva címkét, amely jelzi a böngésző, ami benne lesz található összes HTML táblázatban.
De a használatát ez a címke nem elég, mert az asztal még fel kell tölteni. És ott is vannak szabályok, amelyek szigorúan be kell tartani.
Mint tudod, minden asztalnál van a sorok és oszlopok alkotják a sejt találkozásánál. Azonban a HTML - asztalok épülnek kissé eltérő elvet. Kezdetben arra kérjük őket, hogy vonósok és húrok belsejében kérés cellában. És, hogy a sejtek száma a sorban, és függ az oszlopok számát. Próbáljuk, hogy egy táblázat html Jegyzettömb.
Létrehozása sorok és sejtek
A sorok meghatározott címkék használatával tr. És azon belül a sejtvonalak kérünk td címkéket. És most siet zababahaem egyszerű táblázatot, egy sorban és négy sejteket. Itt az a kód:
Mint látható, van egy egyszerű táblázatot, egy sorban és négy sejtek, amelyek a program automatikusan átalakítja 4 oszlopos.
Kód kapott elég sok volt, de megérte! Azt hiszem, most már világos, hogy hogyan létrehozását táblázatok HTML. Azonban ez még nem minden, mi még mindig csak most kezdődött el, majd várunk egy csomó érdekes
A tábla neve - címke felirata
Nézzük egy kicsit korszerűsítése lemez, és adjunk hozzá egy kis nevet. Ezt használja a címke felirata. Ez a címke kell helyezni az első, közvetlenül a nyitó tábla tag. Itt van, hogyan néz ki a kód:
De mi lesz belőle a végén:
Példa asztalok elemzi
Mint látható, annak ellenére, hogy már elhelyezett egy feliratot táblázaton belüli tag. Nem található felette.
hálós irányítási tábla
Tehát barátaim, most fokozatosan bonyolultabbá asztalunkra. És javítja a képességeit és a gyakorlat. HTML-táblázat, amit meg is tettünk veled fenti nagyon egyszerű. Azonban a legtöbb gyakran szükséges, hogy az adatokat egy bonyolultabb formában:
- A fejlécet vonal
- Keverjük össze egy kis függőleges sejt
- Egyéb kombájn vízszintes
Ez az, amit mi csinálunk. És kezdjük talán a ...
Cell fejlécek táblázatban
Természetesen maradhatunk a sejtekbe az első sor néhány főcím, vagy kiadni őket merész stílus. Azonban ez lesz baj!
Mivel én különleges címkét hozták létre erre a célra. amely be van állítva helyett a normál sejtek (td tag). És rámutat arra, hogy ez a sejt-fejléceket, hogy a használt az oszlop nevét.
Ne feledje, hogy a tag-én játszik szerepet nem csak vizuális, és szemantikai. Ez fontos a keresőmotorok.
Hagyja, hogy a táblázatban az előző példában az első sorban cserélje td címkéket th. És még egy kis változás a tartalmuk:
És itt van az eredmény a fenti kódot, végre a böngésző:
Táblázat tagged th
Mint látható, a szöveg ezekben a sejtekben automatikusan válik merész.
Ötvözi sejtek a vízszintes és függőleges
Elég gyakran, egy cellát egy HTML táblázatot kell kombinálni vízszintesen és függőlegesen. Az egyszerűség kedvéért nevezzük az unió a sorok és oszlopok. Így a kezdők egyértelmű, hogy ők.
Ehhez fogjuk használni 2 attribútumot. amelyeket közvetlenül a sejtek:
- Képesség colspan - jelzi, hogy hány sejteket kell kombinálni oszlopokban (vízszintes) a jelenlegi
- Rowspan attribútum - meghatározza, hogy mennyi egyesíteni sejtek áramlási (függőleges) a jelenlegi
Ezeket a tulajdonságokat kell lennie egy egész szám 1 vagy több.
Ne feledd! Ha egyesíteni sejtek más sejtek egy táblázatban, a helyére, és nyújtózkodott. Ez azt jelenti, hogy a sejtek, amelyek helyébe - el kell távolítani a HTML kódot.
Ez a szabály nagyon fontos, mert ha nem távolítja el a sejteket, hogy összevonásra kerültek, az asztal jelenik meg a böngészőben helyesen.
Próbáljuk kombináljuk 2. táblázat cellák:
- Cell 1 sorban 2 csatlakozzon oszlopokon (vízszintes) sejtekkel a 2. és 3. az ugyanabban a sorban. Ehhez kérünk neki tulajdonítani rowspan = „3”
- 4 sejtvonal 2 egyesíti a sorok (függőleges) sejtekkel 4 sor a 3. és 4. Ehhez kérünk neki tulajdonítani colspan = „3”
És most, a megfelelő kijelző a táblázatban, akkor el kell távolítani a sejtből kódot adunk kombinálva. Azaz, az első példában eltávolítani kód cellára a 2. és 3. sorban 2. Egy második, - eltávolítjuk a sejt-4 összhangban a 3. és 4. cella a 4. sorban.
Ennek eredményeként megkapjuk itt a következő kódot:
És valóban, a táblázat a következőképpen fog kinézni:
Egyesítése táblázat sejtek
Cap, a test és pince HTML táblázatban.
Mint a helyszínen is, a címkén lehet saját fejléc, törzs, és egy pince. És ha szeretnéd, hogy néz szemantikailag helyes keresőmotorok. Azt tanácsolom, hogy ezt a tudást a gyakorlatban.
Mind a 3 címke, amely azt fogja felfedezni tovább, tartalmazza az összes tartalmát az asztalra. Ami hagyományos tudjuk osztani három nagy darab.
thead tag - egy HTML táblázat fejlécében
Ez a címke kell helyezni az első a tartalmát az asztalra. Vagyis, mi vezet ez a címkét, és már bent a hely egy fejlécet sejtekkel.
- Meg kell csak egyszer fordul elő egy asztalnál!
- Nem számít, hol vagyunk a táblázatban - vonalak ebben címke jelenik elején az asztalra.
Most vissza az asztalunkhoz, és hagyja, hogy az első sorban zavernom ebben tag:
Vizuálisan, ez nem befolyásolja a kijelző az asztalra, így nem fogom az eredményt a kód végrehajtását.
tfoot tag - Pince HTML táblázat
Bár ez pincében, de ne felejtsük el, hogy ez a címke kell helyezni után azonnal thead tag.
- Meg kell csak egyszer fordul elő egy asztalnál!
- Nem számít, hol vagyunk a táblázatban - vonalak ebben címke jelenik meg a táblázat vége.
Nézzük zavedom másik sort a táblázatban, és zavernom sejtekkel közvetlenül tfoot tag:
És itt van a címkén:
Meta tfoot táblázatban