CSS-opas, CSS - Taulukko

Taulukko

Taulukoita voi myös rakentaa www-palveluissa generaattoreilla (hakusana Googleen: CSS table generator). Alla esimerkki eräästä taulukosta:

Maanosa Valtio Pääkaupunki
Afrikka Egypti Kairo
Etelä-Amerikka Brasilia Brasilia
Pohjois-Amerikka Kanada Ottawa
Eurooppa Sveitsi Bern
Aasia Intia New Delhi
Oseania Australia Canberra

Taulukon (yllä) HTML-koodaus ja CSS-ohjeet:


  CSS-ohjeet:

  #maanosat {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 60%;
  }
  #maanosat td, #maanosat th {
    border: 1px solid #ddd;
    padding: 8px;
  }
  #maanosat tr:nth-child(even){
    background-color: RGB(230, 230, 250);
  }
  #maanosat tr:hover {
    background-color: #ddd;
  }
  #maanosat th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #006666;
    color: white;
  }
 
  HTML-koodaus:

  <table id="maanosat">
   <tr>
    <th>Maanosa</th> <th>Valtio</th>  <th>Pääkaupunki</th>
   </tr>
   <tr>
    <td>Afrikka</td> <td>Egypti</td> <td>Kairo</td>
   </tr>
   <tr>
    <td>Etelä-Amerikka</td> <td>Brasilia</td> <td>Brasilia</td>
   </tr>
   <tr>
    <td>Pohjois-Amerikka</td> <td>Kanada</td> <td>Ottawa</td>
   </tr>
   <tr>
    <td>Eurooppa</td> <td>Sveitsi</td> <td>Bern</td>
   </tr>
   <tr>
    <td>Aasia</td> <td>Intia</td> <td>New Delhi</td>
   </tr>
   <tr>
    <td>Oseania</td> <td>Australia</td> <td>Canberra </td>
   </tr>
  </table>
  

Taulukon solut HTML-koodauksessa voi asemoidan myös seuraavilla tavoilla:


  Esimerkki 1:
  
  <table id="maanosat">
   <tr><th>Maanosa</th>       <th>Valtio</th>   <th>Pääkaupunki</th></tr>
   <tr><td>Afrikka</td>       <td>Egypti</td>   <td>Kairo</td>      </tr>
   <tr><td>Etelä-Amerikka</td><td>Brasilia</td><td>Brasilia</td>   </tr>
   ..
   
  Esimerkki 2:
  
  <table id="maanosat">
   <tr> 
    <th>Maanosa</th> 
	<th>Valtio</th>  
	<th>Pääkaupunki</th> 
   </tr>
   <tr> 
    <td>Afrikka</td> 
	<td>Egypti</td> 
	<td>Kairo</td> 
   </tr>
   ..
  

Taulukon ja solujen viivat, border

Taulukon reunojen ja solujen viivat muotoillaan border-määritteen asetuksilla, punainen viiva taulukon ja solujen ympärille:



Yllä olevan koodaukset:


  CSS-ohjeet:
   
  table, th, td {
    border: 1px solid RED;
   }
   
  HTML-koodaus:
   
  <table>
   <tr>
    <th> Maanosa </th>
    <th> Valtio </th>
    <th> Pääkaupunki </th>    
   </tr>
   <tr>
    <td> Afrikka </td>
    <td> Egypti </td>
    <td> Kairo </td>    
   </tr>
   <tr>
    <td> Eurooppa </td>
    <td> Sveitsi </td>
    <td> Bern </td>
   </tr>
  </table>
  

Kun edelliselle taulukolle lisätään border-collapse-määrite, ulkonäkö muuttuu siistimmäksi:



Yllä olevan CSS-ohje (HTML-koodaus sama kuin aiemmassa):


  CSS-ohjeet:
  
  table {
    border-collapse: collapse;
  }  
  table, th, td {
    border: 1px solid RED;
  }
  

Taulukko voidaan toteuttaa pelkistetyllä tavallakin, käyttämällä alaviivaa border-bottom-määritteellä:



Yllä olevan CSS-ohje (HTML-koodaus sama kuin aiemmassa):


  CSS-ohjeet:
  
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid RED;
  }
  

Taulukon leveys ja korkeus, width ja height

Taulukon leveys on kätevintä asettaa prosenttiluvulla width-määritteen ja korkeus pikseleinä height-määritteelle:



Yllä olevan CSS-ohje (HTML-koodaus sama kuin aiemmassa), huomaa th-otsikkosoluissa tekstit keskittyy automaattisesti:


  CSS-ohjeet:
  
  table, td, th {
    border: 1px solid blue;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th {
    height: 50px;
  }
  

Esimerkissä otsikkotekstit sisennetty vasempaan reunaan text-align-määritteen asetuksilla, left (vasen), right (oikealle) tai center keskelle:



Yllä olevan CSS-ohje (HTML-koodaus sama kuin aiemmissa):


  CSS-ohjeet:
  
  table, td, th {
    border: 1px solid blue;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th {
    height: 50px;
	text-align: left; 
  }
  

Taulukon solujen tekstin sijoitus pysty-suunnassa, vertical-align

Taulukon soluissa olevan esim tekstin pysty-suunnassa sijoittiminen tehdään vertical-align-määritteellä käyttäen asetuksena top (ylös), middle (keskelle) tai bottom (alas). korkeus pikseleinä height-asetuksena:



Yllä olevan CSS-ohje (HTML-koodaus sama kuin aiemmissa):


  CSS-ohjeet:
  
  table, td, th {
    border: 1px solid blue;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th {
    height: 50px;
	text-align: left;
    vertical-align: bottom;  	
  }
  

Taulukon solujen sisällölle tyhjää tilaa, padding

Taulukon soluissa olevan esim tekstien ympärille voidaan tehdä tyhjää tilaa padding-määritteellä käyttäen esimerkiksi asetuksena 10 px



Yllä olevan CSS-ohje (HTML-koodaus sama kuin aiemmissa):


  CSS-ohjeet:
  
  table, td, th {
    border: 1px solid blue;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th {
    height: 50px;
	text-align: left;
    vertical-align: bottom;  	
  }
  

Taulukon rivin korostaminen kun hiiren osoitin kohdalla, hover

Taulukon rivin taustaväri voidaan näyttää eri värillä kun hiiren osoitin on rivin kohdalla, hover-valitsimella ja asetuksilla:



Yllä olevan CSS-ohje (HTML-koodaus sama kuin aiemmissa):


  CSS-ohjeet:
  
  table {
    border-collapse: collapse;
    width: 100%;
    color: RGB(0, 102, 102);
  }
  th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  tr:hover {
    background-color: RGB(0, 153, 153);
    color:WHITE;
  }
  

Taulukon joka toinen rivi korostevärillä, nth-child()

Taulukon joka toiselle riville voidaan asettaa taustaväri nth-child()-valitsimella. Esimerkissä asetettu myös taulukon yläriville (th-elementit) omat värit :



Yllä olevan CSS-ohje (HTML-koodaus sama sama periaate kuin aiemmissa):


  CSS-ohjeet:
  
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    text-align: left;
    padding: 8px;
  }
  th {
    background-color: RGB(62, 91, 91);
    color: white;
  }
  tr:nth-child(even) {
    background-color: RGB(209, 224, 224);
  }
  

Taulukko responsiivisella www-sivulla

Kun responsiivisella www-sivulla on useita soluja sisältävä ja leveä taulukko sekä www-sivu avataan mobiililaitteessa, voi taulukon leveys aiheuttaa ongelmia.

Ongelman yksinkertaisin ratkaisu on tehdä taulukon ympärillä div-elementti joka luo taulukon alle liukusäätimen, kokeile pienentämällä selaimen kokoa:

Etunimi Sukunimi pisteet pisteet pisteet pisteet pisteet pisteet pisteet pisteet pisteet pisteet
Jussi Markkanen 31 31 31 31 31 31 31 31 31 31
Eeva Euronen 12 12 12 12 12 12 12 12 12 12
Pasi Punta 44 44 44 44 44 44 44 44 44 44

 CSS-ohjeet:
  
  #pisteet {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  #pisteet td, #pisteet th {
    border: 1px solid #ddd;
    text-align: left;
    padding: 8px;
  }
  #pisteet tr:nth-child(even){background-color: RGB(230, 230, 250);}
  #pisteet tr:hover {background-color: #ddd;}
  #pisteet th {
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: #006666;
    color: white;
  }
  
 HTML-koodaus:
 
 <div style="overflow-x:auto;">
  <table id="pisteet">
   <tr>
      <th>Etunimi</th> <th>Sukunimi</th> <th>pisteet</th> <th>pisteet</th>
      <th>pisteet</th> <th>pisteet</th>  <th>pisteet</th> <th>pisteet</th>
      <th>pisteet</th> <th>pisteet</th>  <th>pisteet</th> <th>pisteet</th>
   </tr>
   <tr>
      <td>Jussi</td>   <td>Markkanen</td> <td>31</td> <td>31</td>
      <td>31</td>      <td>31</td>        <td>31</td> <td>31</td>
      <td>31</td>      <td>31</td>        <td>31</td> <td>31</td>
   </tr>
   <tr>
      <td>Eeva</td>    <td>Euronen</td>   <td>12</td>  <td>12</td>
      <td>12</td>      <td>12</td>        <td>12</td>  <td>12</td>
      <td>12</td>      <td>12</td>        <td>12</td>  <td>12</td>
   </tr>
   <tr>
      <td>Pasi</td>    <td>Punta</td>     <td>44</td>  <td>44</td>
      <td>44</td>      <td>44</td>        <td>44</td>  <td>44</td>
      <td>44</td>      <td>44</td>        <td>44</td>  <td>44</td>
   </tr>
  </table>
 </div>