Taulukot

[Epis]

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 - HTMLCode

Pelkkä 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ä:

Barnsley

2-1

Stafford

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ä:

Barnsley	2-1	Stafford
	(1-1)

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):

Barnsley	2-1	Stafford
	(1-1)

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.

[Epis]

Taulukkopohja #1

Kotijoukkue	0-0	Vierasjoukkue
	(0-0)

Pelaaja 1min		Pelaaja 2min
Pelaaja 1min		Pelaaja 2min

Taulukon koodi:

Koodi [Valitse] Laajenna

[table]
[tr][td][right][b]Kotijoukkue[/b][/right][/td][td][center][b]0-0[/b][/center][/td][td][left][b]Vierasjoukkue[/b][/left][/td][/tr]
[tr][td][/td][td][size=7pt](0-0)[/size][/td][td][/td][/tr][/table]
[table]
[tr][td]:ball12[size=7pt] [b]Pelaaja[/b] [i]1min[/i][/size][/td][td]:empty31[/td][td]:ball12[size=7pt] [b]Pelaaja[/b] [i]2min[/i][/size][/td][/tr]
[tr][td]:ball12[size=7pt] [b]Pelaaja[/b] [i]1min[/i][/size][/td][td][/td][td]:ball12[size=7pt] [b]Pelaaja[/b] [i]2min[/i][/size][/td][/tr]
[/table]



Info:
Tätä taulukkoa kannattaa käyttää silloin, kun kotijoukkueen tapahtumissa esiintyy pitkiä nimiä.

Tämä pohja koostuu kahdesta taulukosta (tulos ja tapahtumat), joten tapahtumamerkintöjen pituudet eivät vaikuta tulostaulukkoon. Hankaluutena tässä on saada vierasjoukkueen tapahtumat kohdistettua joukkueen nimen kanssa samaan linjaan. Tätä varten löytyy apukeino, joka näkyy toisen taulukon ensimmäisen rivin keskisolussa. Oletuksena oleva :empty31 määrittää keskisolun leveyden ja käytännössä vierasjoukkueen tapahtumien sijainnin. Muuttamalla lukua välillä 1-35 saa leveyttä määritettyä haluamakseen.

Esimerkki:

Sheffield Utd	1-1	Manchester Utd
	(0-0)

Mendez-Laing 51min

Rooney 52min

Koodi [Valitse] Laajenna

[table]
[tr][td][right][b]Sheffield Utd[/b][/right][/td][td][center][b]1-1[/b][/center][/td][td][left][b]Manchester Utd[/b][/left][/td][/tr]
[tr][td][/td][td][size=7pt](0-0)[/size][/td][td][/td][/tr][/table]
[table]
[tr][td]:ball12[size=7pt] [b]Mendez-Laing[/b] [i]51min[/i][/size][/td][td]:empty3[/td][td]:ball12[size=7pt] [b]Rooney[/b] [i]52min[/i][/size][/td][/tr]
[/table]

Tässä huomataan, kuinka Mendez-Laingin pitkä nimi muuttaa tilannetta. Mikäli kokonaisuus koostuisi vain yhdestä taulukosta yllä olevat joukkueet siirtyisivät reippaasti oikealle. Nyt näin ei tapahdu, vaan tapahtuma jatkuu jopa tuloksen alle.

Toinen huomionarvoinen asia on, että ManUn tapahtuma alkaa samasta kohdasta, kuin joukkueen nimi ja tämä onnistui muuttamalla :empty31 muotoon :empty3, jolloin keskisolun koko pieneni. Oikea luku/koko löytyy kokeilemalla eri lukuja esikatselussa ennen 'postaamista'. Kannattaa kuitenkin täyttää kaikki tapahtumat ensin ja "siirrellä" solut oikeialle paikalle vasta tämän jälkeen.
Poistin myös toisen tapahtumarivin, koska ottelussa ei ollut enempää tapahtumia. Eli poistamalla alempi <tr> </tr> -rivi:

Koodi [Valitse] Laajenna

[tr][td]:ball12[size=7pt] [b]Pelaaja[/b] [i]1min[/i][/size][/td][td][/td][td]:ball12[size=7pt] [b]Pelaaja[/b] [i]2min[/i][/size][/td][/tr]
Mikäli tapahtumia olisi ollut enemmän, olisi tuota riviä voinut kopioida ja muokata vain pelaajien nimiä ja tapahtumien kuvakkeita.

Esimerkki:

Sheffield Utd	1-1	Manchester Utd
	(0-0)

Mendez-Laing 51min		Rooney 52min
		Berbatov 62min

Koodi [Valitse] Laajenna

[table]
[tr][td][right][b]Sheffield Utd[/b][/right][/td][td][center][b]1-1[/b][/center][/td][td][left][b]Manchester Utd[/b][/left][/td][/tr]
[tr][td][/td][td][size=7pt](0-0)[/size][/td][td][/td][/tr][/table]
[table]
[tr][td]:ball12[size=7pt] [b]Mendez-Laing[/b] [i]51min[/i][/size][/td][td]:empty3[/td][td]:ball12[size=7pt] [b]Rooney[/b] [i]52min[/i][/size][/td][/tr]
[tr][td][/td][td][/td][td]:yellowcard12[size=7pt] [b]Berbatov[/b] [i]62min[/i][/size][/td][/tr]
[/table]

[Epis]

Taulukkopohja #2

Kotijoukkue	0-0	Vierasjoukkue
	(0-0)
Pelaaja 1min		Pelaaja 2min
Pelaaja 1min		Pelaaja 2min

Taulukon koodi:

Koodi [Valitse] Laajenna

[table]
[tr][td][right][b]Kotijoukkue[/b][/right][/td][td][center][b]0-0[/b][/center][/td][td][left][b]Vierasjoukkue[/b][/left][/td][/tr]
[tr][td][/td][td][size=7pt](0-0)[/size][/td][td][/td][/tr]
[tr][td]:ball12[size=7pt] [b]Pelaaja[/b] [i]1min[/i][/size][/td][td][/td][td]:ball12[size=7pt] [b]Pelaaja[/b] [i]2min[/i][/size][/td][/tr]
[tr][td]:ball12[size=7pt] [b]Pelaaja[/b] [i]1min[/i][/size][/td][td][/td][td]:ball12[size=7pt] [b]Pelaaja[/b] [i]2min[/i][/size][/td][/tr]
[/table]



Info:
Tätä taulukkoa kannattaa käyttää silloin, kun kotijoukkueen tapahtumissa ei esiinny pitkiä nimiä tai kotijoukkeella ei ole tapahtumia ollenkaan.

Tämä pohja koostuu yhdestä taulukosta ja toimii parhaiten silloin, kun kotijoukkueen nimi määrittää vasemman reunan solun leveyden. Tämä taulukko ei siis sisällä :empty -määritystä. Tapahtumarivien poisto ja lisääminen onnistuu poistamalla/kopioimalla <tr> </tr> -rivejä. Mikäli kotijoukkueelle ei kerry taphtumia voi koko ensimmäisen solun, eli <td> </td> sisällön poistaa kokonaan.

Esimerkki:

Koodi [Valitse] Laajenna

[tr][td]:ball12[size=7pt] [b]Pelaaja[/b] [i]1min[/i][/size][/td][td][/td][td]:ball12[size=7pt] [b]Pelaaja[/b] [i]2min[/i][/size][/td][/tr]
muotoon

Koodi [Valitse] Laajenna

[tr][td][/td][td][/td][td]:ball12[size=7pt] [b]Pelaaja[/b] [i]2min[/i][/size][/td][/tr]

[Hönkki]

en lukenut kaikkia ohjeita, mutta otsikon ekassa viestissä kirjoitettiin näin

<table>
<tr><td></td><td></td><td></td></tr>
</table>


Tulee huomata että ei voi käyttää '<' ja '>' merkkejä vaan niiden tilalla tulee olla  '[' ja ']',
kuten kahdessa seuraavassa viestissä on tehtykin

[Epis]

en lukenut kaikkia ohjeita, mutta otsikon ekassa viestissä kirjoitettiin näin

<table>
<tr><td></td><td></td><td></td></tr>
</table>


Tulee huomata että ei voi käyttää '<' ja '>' merkkejä vaan niiden tilalla tulee olla  '[' ja ']',
kuten kahdessa seuraavassa viestissä on tehtykin

Ensimmäisen viestin 3. rivi:
HUOM! Käytän kirjoituksessa <> -merkkejä, sillä hakasulkeet eivät näy tekstinä normaalitilassa.

Tämä siitä syystä, että forumin koodi-muotoilu näyttää tekstin todella pienellä ja tarkoitus oli myös noilla värityksillä helpottaa tagien hahmottamista. Noi <> -merkit on kylläkin käytössä html-koodissa, eli sama koodi toimii eri suluilla riippuen haluuko taulukon näkymään forumilla vai nettisivulla.