Muotoiluohjeet

Johdanto

• Älä ympäröi <table> - tai <h2> -tageja <p> - tai <div> -tageilla.

• Älä enää käytä <center>...</center> -tageja. Keskittääksesi jonkin, käytä <div align="center">...</div> -tunnistetta .

• Älä enää käytä <b>...</b> -tageja. Rohkaise jotakin käyttämällä <strong>...</strong>-tunnistetta .

• Älä enää käytä <i>...</i> -tageja. Kursivoidaksesi jonkin, käytä <em>...</em> -tunnistetta.

• Käytä <p>...</p> -tageja vain muuten paljaan tekstin ympäröimiseen.

• Kun lisäät kuvan linkin sisään kuvan suurempaan versioon, käytä tunnistetta <a class="trans" ... ><img ... ></a> .

• Osion otsikon lisääminen:

  <h2>Ylätunnisteen nimi</h2>

• Oikealle roikkuvan kuvan lisääminen:

  <div class="image--right"><img src="..." /></div>

• Koodiesimerkkien muotoilulaatikon lisääminen (kuten tällä sivulla näkyy):

  <esimerkki>
  	Koodiesimerkki täällä
  </pre>
              

• Kapean, 50 % leveyden omaavan datataulukon lisääminen:

  <div class="laatikkopöytä-50percent">
    <h3 class="box-title">Taulukon otsikko</h3><!--/box-title-->
    <div class="laatikon-sisältö">
  	<table class="data" cellspacing="0" cellpadding="0" border="0">
  	<tr>
  		<th class="data-heading">Sarakkeen otsikko 1</th>
  		<th class="data-heading">Sarakkeen otsikko 2</th>
  	</tr>
  	<tr>
  		Vasen
  		<td>Rivi 1, sarake 2</td>
  	</tr>
  	<tr>
  		<td class="right_aligned">Oikea</td>
  		<td>Rivi 1, sarake 2</td>
  	</tr>
  	<tr>
  		<td class="centered">Keskusta</td>
  		<td>Rivi 3, sarake 2</td>
  	</tr>
  	</table>
    </div><!--/laatikon-sisältö-->
  </div><!--/laatikko-->
              

  Yllä oleva koodi tuottaa seuraavan keskitetyn taulukon:

  Taulukon otsikko

  Sarakkeen otsikko 1	Sarakkeen otsikko 2
  Vasen	Rivi 1, sarake 2
  Oikea	Rivi 1, sarake 2
  Keskusta	Rivi 3, sarake 2

• 75 % leveyden omaavan datataulukon lisääminen:

  <div class="laatikkopöytä-75percent">
    <h3 class="box-title">Taulukon otsikko</h3><!--/box-title-->
    <div class="laatikon-sisältö">
  	<table class="data" cellspacing="0" cellpadding="0" border="0">
  	<tr>
  		<th class="data-heading">Sarakkeen otsikko 1</th>
  		<th class="data-heading">Sarakkeen otsikko 2</th>
  	</tr>
  	<tr>
  		Vasen
  		<td>Rivi 1, sarake 2</td>
  	</tr>
  	<tr>
  		<td class="right_aligned">Oikea</td>
  		<td>Rivi 1, sarake 2</td>
  	</tr>
  	<tr>
  		<td class="centered">Keskusta</td>
  		<td>Rivi 3, sarake 2</td>
  	</tr>
  	</table>
    </div><!--/laatikon-sisältö-->
  </div><!--/laatikko-->
              

  Yllä oleva koodi tuottaa seuraavan keskitetyn taulukon:

  Taulukon otsikko

  Sarakkeen otsikko 1	Sarakkeen otsikko 2
  Vasen	Rivi 1, sarake 2
  Oikea	Rivi 1, sarake 2
  Keskusta	Rivi 3, sarake 2

• Vakioleveydeltään 100 %:n datataulukon lisääminen:

  <div class="laatikko">
    <h3 class="box-title">Taulukon otsikko</h3><!--/box-title-->
    <div class="laatikon-sisältö">
  	<table class="data" cellspacing="0" cellpadding="0" border="0">
  	<tr>
  		<th class="data-heading">Sarakkeen otsikko 1</th>
  		<th class="data-heading">Sarakkeen otsikko 2</th>
  		<th class="data-heading">Sarakkeen otsikko 3</th>
  	</tr>
  	<tr>
  		Vasen
  		<td>Rivi 1, sarake 2</td>
  		<td>Rivi 1, sarake 3</td>
  	</tr>
  	<tr>
  		<td class="right_aligned">Oikea</td>
  		<td>Rivi 1, sarake 2</td>
  		<td>Rivi 1, sarake 3</td>
  	</tr>
  	<tr>
  		<td class="centered">Keskusta</td>
  		<td>Rivi 3, sarake 2</td>
  		<td>Rivi 3, sarake 3</td>
  	</tr>
  	</table>
    </div><!--/laatikon-sisältö-->
  </div><!--/laatikko-->
              

  Yllä oleva koodi tuottaa seuraavan keskitetyn taulukon:

  Taulukon otsikko

  Sarakkeen otsikko 1	Sarakkeen otsikko 2	Sarakkeen otsikko 3
  Vasen	Rivi 1, sarake 2	Rivi 1, sarake 3
  Oikea	Rivi 1, sarake 2	Rivi 1, sarake 3
  Keskusta	Rivi 3, sarake 2	Rivi 3, sarake 3

• Suuren datataulukon lisääminen:

  <div class="laatikko laatikko--laajennettavissa">
    <h3 class="box-title">Taulukon otsikko<span class="box-title-expand desk-visible">Laajenna <i class="fa-regular fa-arrow-right-long"></i></span></h3><!--/box-title-->
    <div class="laatikon-sisältö">
  	<table class="data" cellspacing="0" cellpadding="0" border="0">
  	<tr>
  		<th class="data-heading">Sarakkeen otsikko 1</th>
  		<th class="data-heading">Sarakkeen otsikko 2</th>
  		<th class="data-heading">Sarakkeen otsikko 3</th>
  	</tr>
  	<tr>
  		Vasen
  		<td>Rivi 1, sarake 2</td>
  		<td>Rivi 1, sarake 3</td>
  	</tr>
  	<tr>
  		<td class="right_aligned">Oikea</td>
  		<td>Rivi 1, sarake 2</td>
  		<td>Rivi 1, sarake 3</td>
  	</tr>
  	<tr>
  		<td class="centered">Keskusta</td>
  		<td>Rivi 3, sarake 2</td>
  		<td>Rivi 3, sarake 3</td>
  	</tr>
  	</table>
    </div><!--/laatikon-sisältö-->
  </div><!--/laatikko-->
              

  Yllä oleva koodi tuottaa seuraavan keskitetyn taulukon:

  Taulukon otsikko Laajenna

  Sarakkeen otsikko 1	Sarakkeen otsikko 2	Sarakkeen otsikko 3
  Vasen	Rivi 1, sarake 2	Rivi 1, sarake 3
  Oikea	Rivi 1, sarake 2	Rivi 1, sarake 3
  Keskusta	Rivi 3, sarake 2	Rivi 3, sarake 3

• Erittäin suuren datataulukon lisääminen:

  <div class="laatikko laatikko--laajennettavissa">
    <h3 class="box-title">Taulukon otsikko<span class="box-title-expand desk-visible">Laajenna <i class="fa-regular fa-arrow-right-long"></i></span></h3><!--/box-title-->
    <div class="laatikon-sisältö">
  	<table class="data" cellspacing="0" cellpadding="0" border="0">
  	<tr>
  		<th class="data-heading">Sarakkeen otsikko 1</th>
  		<th class="data-heading">Sarakkeen otsikko 2</th>
  		<th class="data-heading">Sarakkeen otsikko 3</th>
  	</tr>
  	<tr>
  		Vasen
  		<td>Rivi 1, sarake 2</td>
  		<td>Rivi 1, sarake 3</td>
  	</tr>
  	<tr>
  		<td class="right_aligned">Oikea</td>
  		<td>Rivi 1, sarake 2</td>
  		<td>Rivi 1, sarake 3</td>
  	</tr>
  	<tr>
  		<td class="centered">Keskusta</td>
  		<td>Rivi 3, sarake 2</td>
  		<td>Rivi 3, sarake 3</td>
  	</tr>
  	</table>
    </div><!--/laatikon-sisältö-->
  </div><!--/laatikko-->
              

  Yllä oleva koodi tuottaa seuraavan keskitetyn taulukon:

  Taulukon otsikko Laajenna

  Sarakkeen otsikko 1	Sarakkeen otsikko 2	Sarakkeen otsikko 3
  Vasen	Rivi 1, sarake 2	Rivi 1, sarake 3
  Oikea	Rivi 1, sarake 2	Rivi 1, sarake 3
  Keskusta	Rivi 3, sarake 2	Rivi 3, sarake 3

  Huomaa luokkien nimet taulukon otsikon (th) tai taulukon solun (td) tasaamiseksi:

  • class="left_aligned" vasemmalle tasaamiseen
  • class="right_aligned" oikealle tasaamiseen
  • class="centered" keskittää keskityksen

  Oletusarvoisesti tavalliset taulukon solut tasataan oikealle , jotta koodi pienenee näytettäessä suuria numeerista dataa sisältäviä taulukoita.

Kirjoittanut: Michael Shackleford