Tässä oppaassa tulee vain esille kaksi vähemmän käytettyä komentoa. Itse asiassa nämä 2 komentoa ovat mahtavia siinä tapauksessa jos haluat kontrolloida taulukoidesi välejä.

COLSPAN-komento

Tässä kuva yksinkertaisesta taulukosta, joka käyttää colspan-komentoa:



Kyseinen taulukko luotiin koodilla:

Koodi: Valitse kaikki

<table border="3" height="100" cellpadding="3" cellspacing="3">
   <tr>
      <td colspan="3">
Tämä menee tästä niiQ sillee jännästi
      </td>
   </tr>
   <tr>
      <td>
Solu 1
      </td>
      <td>
Solu 2
      </td>
      <td>
Solu 3
      </td>
   </tr>
</table>

Kiinnitä huomiosi ensimmäiseen td-tagiin. Näet, että siinä esiintyy colspan-määrite, jonka arvona on 3. Tässä pieni tiivistelmä:

Taulukko on sarja soluja (ylhäältä alas -osat), ja rivejä (vasemmalta oikealle -osat).

Halusimme saada ensimmäisen rivin venymään niin, että se ei näyttäisi tältä.

Colspanilla säädetään siis solun venyvyyttä. Jos olisin laittanut arvoksi 2, solu olisi venynyt vain kahden solun verran.

Suosittelen piirtämään taulukon/sommitelman taulukkoa suunnitellessasi. Tämä helpottaa valtavasti työtäsi.

ROWSPAN-komento

Arvaat varmaankin, mitä rowspan tekee. Juuri niin, se taas kontrolloi rivin venyvyyttä. Esimerkki:


ja koodi:

Koodi: Valitse kaikki

<table border="3" height="150" cellpadding="3" cellspacing="3">
   <tr>
      <td rowspan="3">
Tämä menee tästä niiQ sillee jännästi
      </td>
      <td>
Solu 1
      </td>
   </tr>
   <tr>
      <td>
Solu 2
      </td>
   </tr>
   <tr>
      <td>
Solu 3
      </td>
   </tr>
</table>

Tiivistelmä:

Rowspanilla kontrolloidaan taulukoiden rivien venyvyyttä

EDIT: Ulkoasu taulukoilla:


ja koodi:

Koodi: Valitse kaikki

<div align="center" style="text-align="center"><center>
<table border="3" width="600" cellpadding="3" cellspacing="3">
   <tr>
      <td height="100" align="center" valign="middle" colspan="4">
Otsikko tai logo
      </td>
   </tr>
   <tr>
      <td>
<b>Navigaatio</b><br/>
linkki<br/>
linkki<br/>
linkki
      </td>
      <td width="350" valign="top">
Sisältö tähän
      </td>
      <td>
<b>Linkinvaihto</b><br/>
Paavo Puska<br/>
Aimo Lerssi<br/>
Jorma Vänkyrä<br/><br/>
      </td>
   </tr>
   <tr>
      <td>
<b>Tilastot</b><br/>
OLET SIVUJEMME 11. KÄVIJÄ!!!!!
      </td>
      <td width="350">
<img src="http://www.noexist.com/imgimgimg.src">
      </td>
      <td>
<b>Liity postituslistalle!!!!</b>
      </td>
   </tr>
   <tr>
      <td colspan="4" align="center">
&copy;Copyright Pekan Perunamaa 2006++
      </td>
   </tr>
</table>
</center></div>

Pakko vähän winee :
Jos tekesit sen ajax oppaan ekaks valmiiks. Siit vois olla hyötyä mulle.

Taas joku mitalin metsästäjä !!

DeathStar* kirjoitti:Taas joku mitalin metsästäjä !!

Huoh... tähän j-web on mennyt. -.-' Tekee millasen tuton tahansa, on aina joku huutamssa "Mitallin haussa!" ...

Ja tuon yhden lainauksen voisi poistaa... Sori.

Miten saa tekstin soluun silleen, että se ei keskittäisi sitä aina, jos solu on pitkä?

Vista kirjoitti:Miten saa tekstin soluun silleen, että se ei keskittäisi sitä aina, jos solu on pitkä?

<td style="text-align:left;">...

Vista kirjoitti:Miten saa tekstin soluun silleen, että se ei keskittäisi sitä aina, jos solu on pitkä?

tai laittaa sivun tyylitiedostoon:

Koodi: Valitse kaikki

table, tr, td {
text-align:left;
vertical-align:middle;
}

tiedoston koko pienempi

Magic Eye kirjoitti:

Vista kirjoitti:Miten saa tekstin soluun silleen, että se ei keskittäisi sitä aina, jos solu on pitkä?

tai laittaa sivun tyylitiedostoon:

Koodi: Valitse kaikki

table, tr, td {
text-align:left;
vertical-align:middle;
}

tiedoston koko pienempi

Mutta jos haluaa käyttää vain yhdessä td:ssä, eikä jaksa hoitaa classin/id:n kanssa