Taulukot näyttelevät merkittävää roolia tietojen esittämisessä järjestelmällisessä muodossa. Tässä oppaassa opit, kuinka voit luoda perus HTML-taulukkoja ja käyttää olennaisia tageja asettelua ja rakennetta varten.
Vaiheittain ohje
Aloitetaan ensimmäisen taulukon luomisella! Ensinnäkin, sinun on tiedettävä, että taulukon perus tagi on. Tämä tagi kattaa koko taulukon.
Nyt lisäämme rivin. Jokainen rivi määritellään tagilla, joka tarkoittaa "taulukkorivi". Tässä rivissä ei vielä ole tietoja, joten se on toistaiseksi tyhjää. Voit kuvitella, että jokaisella rivillä on tilaa useille sarakkeille.
On nyt aika lisätä joitakin tietoja taulukkoon. Käytämme -tagia ja lisäämme vastaavat arvot. Oletetaan, että ensimmäinen nimi on "Jan", sähköposti "support@programmierenlern.info" ja syntymäaika on 23.06.1982. Rivisi pitäisi sitten näyttää tältä:
Varmista, että taulukko näyttää nyt paremmalta. Voit lisätä niin monta riviä kuin haluat käyttämällä vain lisää - ja -tageja. Lisätään vielä yksi työntekijä. Nimetään hänet "Joe Average" ja hänen sähköpostinsa voisi olla "joe@average.com".
Kun nyt lataamme taulukon uudelleen, huomaamme, että se kasvaa ja kaikki syötetyt tiedot ovat näkyvissä. Rakenne on tärkeä, koska se antaa sinulle selkeän yleiskuvan tiedoista.
Entä jos haluat sijoittaa taulukon loppuun alatunnisteen, esimerkiksi tekijänoikeussuojaan? Tässä kohtaa tulee colspan kuvioon. Colspanin avulla voit määrittää, kuinka monta saraketta solu kattaa. Joten laittaaksesi tekijänoikeuden kaikkien kolmen sarakkeen yli, kirjoitat: Copyright 2015 coding-geeks.de.
Tekijänoikeuden lisäämisen jälkeen sinun tulisi tarkistaa esitys. Ideana on, että alatunniste on sijoitettu sarakkeiden alle ja tiedot esitetään selkeästi. Tässä tapauksessa alatunnisteella ei ole omaa saraketta, ja sen pitäisi siten olla kolmen muun sarakkeen yli.
Jos nyt vähennät colspanin arvon kahteen, voit lisätä myös toisen huomautuksen. Oletetaan, että haluat esittää "Coding Geeks" uudessa sarakkeessa. Käytä jälleen -tagia, käyttäen colspania oikein.
Jos olet seurannut näitä vaiheita, olet oppinut luomaan perus HTML-taulukkoja. Visuaalisen muotoilun tulisi kuitenkin aina tapahtua CSS:n kautta, jotta asettelua ja käytettävyyttä voidaan parantaa. Tämä sisältää sisältöjen ja asettelun erottamisen, jotta sinulla on enemmän joustavuutta verkkosivujesi suunnittelussa myöhemmin.
Yhteenveto - HTML-taulukoiden perusteiden luominen
Olet oppinut HTML-taulukoiden rakenteen ja käytön, alkaen rakenteesta, datan sijoittamisesta aina alatunnisteeseen. Nyt voit esittää yksinkertaisia taulukkomuotoisia tietoja verkkosivullasi.
Usein kysytyt kysymykset
Mitkä ovat HTML-taulukoiden perus tagit?Perus tagit ovat,, otsikoille ja datakasuille.
Voinko luoda rajattomasti rivejä ja sarakkeita taulukkoon?Kyllä, teoreettisesti voit lisätä paljon rivejä ja sarakkeita, mutta on tärkeää pitää luettavuus mielessä.
Kuinka minun tulisi suunnitella taulukot tyylillisesti?Käytä CSS:ää muotoiluun, sen sijaan että käyttäisit suoria HTML-attributeja kuten border.
Mitä colspan tarkoittaa?Colspan-attribuutti mahdollistaa solun ulottuvan useamman sarakkeen yli.
Miksi CSS on parempi asettelua varten kuin HTML-attribuutit?CSS erottelee sisällöt niiden muotoilusta, tarjoten siten enemmän joustavuutta ja mahdollisuuksia suunnitteluille.
