Taulukot (Tähän tulee joskus selkeyttä ja kuvia…)

  • Tehdään bodyn sisälle ks, table-koodi alempana
  • DW:ssä kun luo ohjelmalla, klikkaa tyhjäksi table width ja border thickness kohdat
  • th scople ”col” jutut turhia  ja  <tbody> </tbody> tägit turhia
  • <td colspan=”4”>    yhdistää taulukon 4 solua
  • CSS:ssä bodylle{

fontti, bodyn keskitys: margin -left ja right: auto              padding esim: 0.5em;
(Kun määrittelee em:illä niin ei tarvitse säätää paddingia uudestaan jos muuttaa fontin kokoa)

  • td, th{           border: 1px solid  #värikoodi;      padding: 0.2em   0.4em;
    table{       margin-collapse: collapse ;   (ei tuu väliä taulukon viivojen väliin)

margin-top: 1em;       margin-bottom: 1em;         width: 100%
margin-left: auto, margin-right: auto;    (taulukko saadaan keskelle)

border: 3px solid #värikoodi;          background-color: #värikoodi;    }
th{        background-color: #värikoodi;    }

table p, table ul{      margin-top: 0;   margin-bottom: 0; 
(Taulukon sisällä oleva tekstikappale ja lista, ei jää turhaa oletustilaa ympärille)

td{          vertical-align: top;
caption{  (fontti, väri, koko)                      (Taulukon otsikko)

h1{       text align center                            (Taulukon yläpuolella oleva otsikko keskelle)

Classin lisääminen live-tilassa koko riville. Hiiri halutussa kohdassa, klikkaa ruutua  td +  ,Anna nimi
.sana       Ks. DW:n alareunassa tekstirivi body table   tbody  tr   td       Klikkaa tr valitsee koko rivin.

<table>                

<tr>                                                                                                             (Taulukon otsikkorivi)
                             <th>1. sarakkeen ylin</th>
                             <th>2. sarakkeen ylin</th>
                             <th>3. sarakkeen ylin</th>
</tr>

<tr>                                                                                                             (taulukon toinen rivi, eka normaalirivi)

                             <td>1. sarakkeen 2. rivi</td >
                             <td>2. sarakkeen 2. rivi </td>
                             <td>3. sarakkeen 2. rivi </td>

</tr>

<tr>                                                                                                             (taulukon kolmas rivi)

                             <td>1. sarakkeen 3. rivi</td >
                             <td>2. sarakkeen 3. rivi </td>
                             <td>3. sarakkeen 3. rivi </td>

</tr> jne

</table>

Luettelot

<ul>                    (Pallukkaluettelo, pallukat saa määriteltuä muunlaisiksi tai pois)
<li>
<li>
<li>
</ul>