Suomen Pöytäjalkapalloyhdistys - Forum
November 22, 2017, 13:02:21 *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Rekisteröidy - Lähetä sähköpostia info@subu.fi
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Taulukot  (Read 19733 times)
Epis
Ylläpito
*
Offline Offline

Posts: 4092


Jaakon Veljen Kollega


View Profile WWW
« on: September 22, 2011, 20:50:11 »

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 KaitsuNiksitm 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ä:
Barnsley2-1Stafford

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ä:
Barnsley2-1Stafford
(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.
Logged

Runkkuringissä taotaan toistemme selkää
Roses are #FF0000, Violets are #0000FF, All my base are belong to you!
Epis
Ylläpito
*
Offline Offline

Posts: 4092


Jaakon Veljen Kollega


View Profile WWW
« Reply #1 on: September 23, 2011, 11:32:15 »

Taulukkopohja #1

Kotijoukkue
0-0
Vierasjoukkue
(0-0)
Ball Pelaaja 1minEmpty31Ball Pelaaja 2min
Ball Pelaaja 1minBall Pelaaja 2min

Taulukon koodi:
Code:
[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)
Ball Mendez-Laing 51minEmpty3Ball Rooney 52min

Code:
[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:
Code:
[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)
Ball Mendez-Laing 51minEmpty3Ball Rooney 52min
Yellow Card Berbatov 62min
Code:
[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]
« Last Edit: September 23, 2011, 12:31:06 by SUFC » Logged

Runkkuringissä taotaan toistemme selkää
Roses are #FF0000, Violets are #0000FF, All my base are belong to you!
Epis
Ylläpito
*
Offline Offline

Posts: 4092


Jaakon Veljen Kollega


View Profile WWW
« Reply #2 on: September 23, 2011, 12:24:32 »

Taulukkopohja #2

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

Taulukon koodi:
Code:
[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:

Code:
[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
Code:
[tr][td][/td][td][/td][td]:ball12[size=7pt] [b]Pelaaja[/b] [i]2min[/i][/size][/td][/tr]
« Last Edit: September 23, 2011, 12:37:37 by SUFC » Logged

Runkkuringissä taotaan toistemme selkää
Roses are #FF0000, Violets are #0000FF, All my base are belong to you!
Hönkki
Hallituksen jäsen
*
Offline Offline

Posts: 9131


View Profile
« Reply #3 on: October 25, 2011, 11:12:41 »

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
« Last Edit: October 25, 2011, 11:14:58 by Hönkki » Logged

Subbuteo as usual
Epis
Ylläpito
*
Offline Offline

Posts: 4092


Jaakon Veljen Kollega


View Profile WWW
« Reply #4 on: October 25, 2011, 11:30:21 »

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.
Logged

Runkkuringissä taotaan toistemme selkää
Roses are #FF0000, Violets are #0000FF, All my base are belong to you!
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.21 | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!