Keskustelu: Nettisivujen teko: PHP+CSS taulukko

Terve,

Tässä opiskelen kirjoista sekä PHP:ia, että CSS:iä, ja tuli taulukot vastaan tuossa CSS:iä.

Mitenkä tämmönen taulukkosysteemi nyt sitten rakennetaan molempia kieliä yhtäaikaa käyttäen? Osaan kyllä laskea lukuja yhteen ja mä osaan myös muotoilla taulukoita, mutta millä nuo saa samaan?

Antakaa vaikka ihan yksinkertainen esimerkki, jossa 3 x 3 taulukon kaikki solut on erivärisiä (ihan sama mitä värejä), ja se tekee tämmöisen yksinkertaisen yhteenlaskutaulun (jossa siis lasketaan rivien ja sarakkeiden summat):

1 2 3
3 4 7
4 6 10

Onko PHP:n ja CSS:n yhteiskäytöstä olemassa kirjaa, ja jos, niin mitä kirjaa suosittelette? Mielellään englanniksi tai suomeksi.

Sinulla on käytössä kolme eri kieltä:
- PHP, palvelinpään ohjelmointikieli
- HTML, sivun sisältöön ja rakenteeseen keskittynyt kieli
- CSS, tyylittelyyn tarkoitettu kieli

Käytännössä PHP:lla tulostat ulos HTML-taulukon, ja vastaavasti CSS:llä voit tyylitellä sen. Nämä kolme voi pitää selkeästi erillään toisistaan. Tavoiterakenne HTML:lle voisi olla vaikka tällainen:

<table>
    <tr class="rivi1">
        <td class="solu1">1</td>
        <td class="solu2">2</td>
        <td class="solu3">3</td>
    </tr>
    <tr class="rivi2">
        <td class="solu1">3</td>
        <td class="solu2">4</td>
        <td class="solu3">7</td>
    </tr>
    <tr class="rivi3">
        <td class="solu1">4</td>
        <td class="solu2">6</td>
        <td class="solu3">10</td>
    </tr>
</table>

Eli käytännössä PHP:lla tulostetaan moinen HTML. CSS voidaan taas liittää erillisesti HTML-tiedoston alussa joko style-tagien väliin tai sitten linkittää link-tagin avuin. Eri värejä voi solukohtaisesti määritellä näin:

tr.rivi1 td.solu1 { background-color : #FFF; }
tr.rivi1 td.solu2 { background-color : #EEE; }
tr.rivi1 td.solu3 { background-color : #DDD; }

Tässä esimerkkinä kertotaulun tulostus:

<?php
echo "<table border>";
for ($i = 1; $i <= 10; $i++) {
    echo "<tr>";
    for ($j = 1; $j <= 10; $j++) {
        echo "<td>" . ($i * $j) . "</td>";
    }
    echo "</tr>";
}
echo "</table>";
?>

Taulukkoa tulostaessa pitää siis vain tulostaa <tr>- ja <td>-tagit tarkasti oikeisiin kohtiin. Tyypillinen ratkaisu on kahden for-silmukan käyttö, joista ulompi merkitsee rivit ja sisempi merkitsee sarakkeet.

Selvä, kyllä tuo tuosta selvisi. Eli avain asiana on siis tulostaa PHP:lla koko (X)HTML-sisältö, jonka eri osat sitten tyylitellään CSS:lla, käytännössä .CSS-tiedostossa.

Välillä on hieman hankalaa saada nämä kielet ymmärrettyä yhtenä toimivana kokonaisuutena, kun kuitenkin käytännössä kirjat (ja muut ohjeet) tuntuvat löytyvän palasista, ehkä kahdesta palasesta, kuten itselläni menossa olevista HTML+XHTML+CSS ja PHP+MySQL+Apache kirjoista.

Kiitoksia vastauksista!