Tarkoitus on auttaa kaikkia käyttäjiä hahmottamaan taulukoiden rakenteen ja nk tagit, jotta jatkossa taulukoiden luonti ja muokkaaminen olisi mahdollista ja mutkatonta kaikille.
HUOM! Käytän kirjoituksessa <> -merkkejä, sillä hakasulkeet eivät näy tekstinä normaalitilassa.
Perusteet:Tagit:<table> </table> - mahdollistaa taulukon tekemisen
<tr> </tr> - luo taulukkoon rivin
<td> </td> - luo solun riville
Ensinnäkin pari linkkiä, joissa pääosin käsitellään samaa asiaa HTML-kielen muodossa, mutta tagit ovat identtiset (paitsi forum käyttää hakasulkeita
<> -merkkien sijaan).
Pari linkkisivustoa -
SMF Forum -
W3school -
HTMLCodePelkkä koodin lukeminen tottumattomalle voi olla haasteellinen muoto opetella ja sisäistää asia, joten seuraavaksi tarjotaan KaitsuNiksi
tm ihan kotikonstein. Tätä varten tarvitaan
ruutupaperi ja
kynä.
Ruutupaperin kanssa ei tarvita taulukon luovaa
<table> </table> -tagia. Halutessaan sen saa toki kirjata, paperin vasempaan yläkulmaan alku-tagi <table> ja alakulmaan loppu-tagi </table>. Tämä on hifistelyä, joten siirrytään itse asiaan..
Valitse ruutupaperilta rivi, josta haluat tehdä taulukon ensimmäisen/ylimmän rivin. Laske 12 ruutua ja piirrä näiden ympärille kehys ruutujen ulkoreunaa myöten. Paperilla näkyy nyt yhden ruudun korkuinen ja 12 ruutua leveä nelikulmio. Tämä kehys vastaa taulukon riviä, eli
<tr> </tr> -tagia. <tr> on kehyksen vasen reuna ja </tr> oikea reuna.
Tämän jälkeen jaa nelikulmio kolmeen yhtäsuureen osaan. Paperilla tulee kaksi pystyviivaa, jotka jakavat 12 neliötä leveän kehyksen kolmeen 4-ruutua leveään osaan. Nämä osat ovat
soluja, jotka muodostetaan taulukkoon
<td> </td> -tagilla.
Tällä hetkellä piirroksesi vastaa koodia:
<table>
<tr><td></td><td></td><td></td></tr>
</table>Koska nyt on pelkästään rakenne koossa, ei vielä digitaalisesti näkyisi mitään, joten jatketaan...
Sisältö:Seuraavaksi aletaan syöttää tavaraa solouihin, joten lienee parempi piirtää
uusi 12:n ruudun kehys, mutta hetkeksi
ilman jakamista. Koska solut muuttuvat syötetyn tekstin pituudesta riippuen jaetaan kehys kolmeen osaan ruuduin 5-2-5. 5:n ruudun soluihin kirjoitetaan joukkueiden nimet, jotka saa itse päättää. Itse päädyin nimiin
Barnsley ja
Stafford. Keskelle jääneeseen 2:n ruudun soluun voit keksiä joukkueille tuloksen, vaikka
2-1.
Tällä hetkellä piirroksesi vastaa koodia:
<table>
<tr><td>Barnsley</td><td>2-1</td><td>Stafford</td></tr>
</table>Forumille kirjattuna se näyttäisi tältä:
Tässä vaiheessa saman olisi voinut tehdä toisinkin, mutta jatketaan.
Lisätiedot:Nyt tehdään suoraan nykyisen kehyksen alle toinen samankokoinen (1x12) kehys ja jaetaan se samaan kolmijakoon 5-2-5. Samassa taulukossa mutta eri riveillä olevat solut ovat yhtä leveitä ja tästä syystä ensimmäisen rivin ruutujako seuraa seuraavassa ja seuraavissa. Kannattaa myös huomioida, että ensimmäinen rivi ei määritä solun leveyttä, vaan sen tekee levein solu. Pitkä pelaajanimi siis saattaa heittää taulukon erikoiseen muotoon. Palataan nyt kuitenkin sivuraiteelta ja jatketaan..
Uuden rivin keskimmäiseen ruutuun merkitään puoliajan tulos, vaikka
(1-1). Tälle riville en ole ajatellut muuta virkaa, kuin edellä mainitun tuloksen esittämisen ja mahdollisesti jatkoajan sekä rankkarikisan tulokset.
Tällä hetkellä piirroksesi vastaa koodia:
<table>
<tr><td>Barnsley</td><td>2-1</td><td>Stafford</td></tr>
<tr><td></td><td>(1-1)</td><td></td></tr>
</table>Forumille kirjattuna se näyttäisi tältä:
Nyt huomataan, että keskimmäisen solun teksti on pitempi, kuin ensimmäisellä rivillä ja tämä vaikuttaa myös ylempään riviin siirtämällä vierasjoukkueen nimeä enemmän oikealle (koska ylemmän rivin keskisolu kasvaa alemman kanssa identtisesti). Avuksi tarvitaan vielä lihavointi ja tekstin tasaus, jotta puoliaikatuloksen aiheuttamat muutokset saadaan tasattua nätimpää lopputulosta varten. Tarkoituksena on tarjota valmiiksi "viilatut" taulukkopohjat, joten tämä oli vain hieman havainnollistamista.
Ulosanti näyttää siis tältä (ainakin ruutupaperilla):
Tärkeintä on hahmottaa mitä <tr> </tr> sekä <td> </td> -tagit tekevät, mutta teen ne pohjat ja laitan niihinkin esimerkkitekstiä sekä ohjeita, jotta niiden käyttö olisi mahdollisimman vaivatonta. Mikäli jotain epäkohtia tai kysymyksiä tulee mieleen, niin pyrin vastaamaan parhaani mukaan, vaikkei tällä saralla tietämys olekaan vahvaa.
