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 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 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 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 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 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 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);
}
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>