Blogi Haltuun.Net: Blogin taulukot kuntoon

On lokakuu saapunut keskuuteemme ja aika iskeä kirvestä kiveen eli tässä sitä taas mennään.

Taulukot ovat olennainen osa mitä tahansa www- sivua. Näin myös blogien osalta. Taulukot ovat nopea tapa esittää tietoa helposti ymmärrettävässä muodossa. Onkin aika tutustua siihen miten taulukoita tehdään ja hieman siihen mihin taulukot itseasiassa oikeastaan pystyvät.

Yksinkertaisuudessaan jokainen taulukko alkaa tagilla: <table> ja päättyy vastaavaan </table> lopetukseen. Taulukon jokainen rivi alkaa <tr> tagilla ja jokainen sarake <td> tagilla.

Koodissa:

<table border="1">
<tbody>
<tr>
<td>Tietue 1a</td>
<td>Tietue 2a</td>
<td>Tietue 3a</td>
</tr>
<tr>
<td>Tietue 1b</td>
<td>Tietue 2b</td>
<td>Tietue 3b</td>
</tr>
</tbody>
</table>

Määritellään taulukkoon 2 riviä ja kumpaankin 3 saraketta. Jokainen rivi alkaa <tr> tagilla ja päättyy </tr> lopetukseen. Jokainen sarakkeen tietue alkaa <td> tagilla ja päättyy </td> lopetukseen. Taulukoissa voi olla niin monta riviä ja saraketta kuin halutaan. Sen lisäksi kaikkiin sarakkeisiin ei ole pakko asettaa tietoa ja taulukko pitää silti muotonsa. Kuten alla olevasta esimerkistä käy ilmi.

	Tietue 2a	Tietue 3a
Tietue 1b	Tietue 2b
Tietue 1c		Tietue 3c

Taulukoita voi käyttää blogikirjoituksen sisällä aivan kuten mitä tahansa muutakin sisältöä. Moni bloggaaja kuitenkin välttää taulukoiden käyttöä omassa blogissaan ja pitää niitä aikansa eläneinä ja ennenkaikkea rumina. Kuka nyt haluaisi taulukkoa rumentamaan omaa tyylikästä blogiaan varsinkaan jos taulukko näyttää tältä:

Kaksi riviä ja kolme saraketta:

Tietue 1a	Tietue 2a	Tietue 3a
Tietue 1b	Tietue 2b	Tietue 3b

Ei kannata kuitenkaan heittää kirvestä kaivoon sillä käyttämällä hieman mielikuvistusta ja CSS- koodia voidaan taulukoista tehdä jotain aivan muuta. Vaikka koko blogisi näyttävin osa kuten kuvasta näkyy.

Internet tarjoaa myös tähän taulukko ongelmaan avustusta todella auliisti. On olemassa useita sivuja jotka tarjoavat ilmaiseksi käyttöösi taulukoita varten tehtyjä CSS- koodeja joita voit vapaasti käyttää omassa blogissasi. Kannattaa esimerkiksi käydä tutustumassa vaikkapa Icant.co.uk:n "Tables Gallery:n" josta löytyy erittäin kattava määrä erilaisia tyylejä taulukoihin.Tyylit on tallennettu css -tiedotoon josta voit kopioida koodin omaan blogiisi taulukkoja komistamaan.

Jos kuitenkaan vielä tämäkään ei riitä vakuuttamaan sinua taulukoiden tyylikkyydestä voit vaikka kokeilla näitä koodeja:

Taulukko 1

HTML-OSA kirjoitukseen liitettäväksi:

<table class="table1">
                <thead>
<tr>
                        <th></th>
                        <th abbr="Starter" scope="col">Fiksu Aloitus</th>
                        <th abbr="Medium" scope="col">Fiksu Medium</th>
                        <th abbr="Business" scope="col">Fiksu Business</th>
                        <th abbr="Deluxe" scope="col">Fiksu Deluxe</th>
                    </tr>
</thead>
                <tfoot>
<tr>
                        <th scope="row">Hinta kuukaudessa</th>
                        <td>€ 2.90</td>
                        <td>€ 5.90</td>
                        <td>€ 9.90</td>
                        <td>€ 14.90</td>
                    </tr>
</tfoot>
                <tbody>
<tr>
                        <th scope="row">Tallennus Tila</th>
                        <td>512 MB</td>
                        <td>1 GB</td>
                        <td>2 GB</td>
                        <td>4 GB</td>
                    </tr>
<tr>
                        <th scope="row">Liikenne</th>
                        <td>50 GB</td>
                        <td>100 GB</td>
                        <td>150 GB</td>
                        <td>Rajaton</td>
                    </tr>
<tr>
                        <th scope="row">MySQL Tietokannat</th>
                        <td>Rajaton</td>
                        <td>Rajaton</td>
                        <td>Rajaton</td>
                        <td>Rajaton</td>
                    </tr>
<tr>
                        <th scope="row">Asennus</th>
                        <td>19.90 €</td>
                        <td>12.90 €</td>
                        <td>ilmainen</td>
                        <td>ilmainen</td>
                    </tr>
<tr>
                        <th scope="row">PHP 5</th>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                    </tr>
<tr>
                        <th scope="row">Ruby on Rails</th>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                    </tr>
</tbody>
            </table>

CSS- osa blogisi css- osaan liitettäväksi:

/* Taulukko 1 Tyyli */
table.table1{
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4em;
    font-style: normal;
    border-collapse:separate;
}
.table1 thead th{
    padding:15px;
    color:#fff;
    text-shadow:1px 1px 1px #568F23;
    border:1px solid #93CE37;
    border-bottom:3px solid #9ED929;
    background-color:#9DD929;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.02, rgb(123,192,67)),
        color-stop(0.51, rgb(139,198,66)),
        color-stop(0.87, rgb(158,217,41))
        );
    background: -moz-linear-gradient(
        center bottom,
        rgb(123,192,67) 2%,
        rgb(139,198,66) 51%,
        rgb(158,217,41) 87%
        );
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius:5px 5px 0px 0px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
.table1 thead th:empty{
    background:transparent;
    border:none;
}
.table1 tbody th{
    color:#fff;
    text-shadow:1px 1px 1px #568F23;
    background-color:#9DD929;
    border:1px solid #93CE37;
    border-right:3px solid #9ED929;
    padding:0px 10px;
    background:-webkit-gradient(
        linear,
        left bottom,
        right top,
        color-stop(0.02, rgb(158,217,41)),
        color-stop(0.51, rgb(139,198,66)),
        color-stop(0.87, rgb(123,192,67))
        );
    background: -moz-linear-gradient(
        left bottom,
        rgb(158,217,41) 2%,
        rgb(139,198,66) 51%,
        rgb(123,192,67) 87%
        );
    -moz-border-radius:5px 0px 0px 5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}
.table1 tfoot td{
    color: #9CD009;
    font-size:32px;
    text-align:center;
    padding:10px 0px;
    text-shadow:1px 1px 1px #444;
}
.table1 tfoot th{
    color:#666;
}
.table1 tbody td{
    padding:10px;
    text-align:center;
    background-color:#DEF3CA;
    border: 2px solid #E7EFE0;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    color:#666;
    text-shadow:1px 1px 1px #fff;
}
.table1 tbody span.check::before{
    content : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc7cKNAFf28yZcW8o8oZmweO4YIlcrbIuae0kbtFEByyB1LmMKaWH5CZfImiKxVT4EVNLZhUOzYj-KC97tpride_NCXQg8uTvGO_i1X_R3pZD010KlxUWs49RGYgQqkGXFW1Q9JkuCeLnI/s1600/check0.png)
}

Taulukko 2

HTML-OSA kirjoitukseen liitettäväksi:

<table class="table2">
                <thead>
<tr>
                        <th></th>
                        <th abbr="Starter" scope="col">Fiksu Aloitus</th>
                        <th abbr="Medium" scope="col">Fiksu Medium</th>
                        <th abbr="Business" scope="col">Fiksu Business</th>
                        <th abbr="Deluxe" scope="col">Fiksu Deluxe</th>
                    </tr>
</thead>
                <tfoot>
<tr>
                        <th scope="row">Hinta kuukaudessa</th>
                        <td>€ 2.90</td>
                        <td>€ 5.90</td>
                        <td>€ 9.90</td>
                        <td>€ 14.90</td>
                    </tr>
</tfoot>
                <tbody>
<tr>
                        <th scope="row">Tallennus tila</th>
                        <td>512 MB</td>
                        <td>1 GB</td>
                        <td>2 GB</td>
                        <td>4 GB</td>
                    </tr>
<tr>
                        <th scope="row">Liikenne</th>
                        <td>50 GB</td>
                        <td>100 GB</td>
                        <td>150 GB</td>
                        <td>Rajaton</td>
                    </tr>
<tr>
                        <th scope="row">MySQL Tietokannat</th>
                        <td>Rajaton</td>
                        <td>Rajaton</td>
                        <td>Rajaton</td>
                        <td>Rajaton</td>
                    </tr>
<tr>
                        <th scope="row">Asennus</th>
                        <td>19.90 €</td>
                        <td>12.90 €</td>
                        <td>ilmainen</td>
                        <td>ilmainen</td>
                    </tr>
<tr>
                        <th scope="row">PHP 5</th>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                    </tr>
<tr>
                        <th scope="row">Ruby on Rails</th>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                    </tr>
</tbody>
            </table>

CSS- osa blogisi css- osaan liitettäväksi:

/* Table 2 Style */
table.table2{
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: -1px;
    line-height: 1.2em;
    border-collapse:collapse;
    text-align:center;
}
.table2 thead th, .table2 tfoot td{
    padding:20px 10px 40px 10px;
    color:#fff;
    font-size: 26px;
    background-color:#222;
    font-weight:normal;
    border-right:1px dotted #666;
    border-top:3px solid #666;
    -moz-box-shadow:0px -1px 4px #000;
    -webkit-box-shadow:0px -1px 4px #000;
    box-shadow:0px -1px 4px #000;
    text-shadow:1px 1px 1px #000;
}
.table2 tfoot th{
    padding:10px;
    font-size:18px;
    text-transform:uppercase;
    color:#888;
}
.table2 tfoot td{
    font-size:36px;
    color:#EF870E;
    border-top:none;
    border-bottom:3px solid #666;
    -moz-box-shadow:0px 1px 4px #000;
    -webkit-box-shadow:0px 1px 4px #000;
    box-shadow:0px 1px 4px #000;
}
.table2 thead th:empty{
    background:transparent;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}
.table2 thead :nth-last-child(1){
    border-right:none;
}
.table2 thead :first-child,
.table2 tbody :nth-last-child(1){
    border:none;
}
.table2 tbody th{
    text-align:right;
    padding:10px;
    color:#333;
    text-shadow:1px 1px 1px #ccc;
    background-color:#f9f9f9;
}
.table2 tbody td{
    padding:10px;
    background-color:#f0f0f0;
    border-right:1px dotted #999;
    text-shadow:-1px 1px 1px #fff;
    text-transform:uppercase;
    color:#333;
}
.table2 tbody span.check::before{
    content : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8BYcSJo5SksEBSoC3aYWmaWCBdyP-AaUencxAXEUr1PS0TFkgz0uejD1L-pAUDYdfQbrk68Jqt8vXw72Z-vHgSFaMGpFvt7gRG4B8KpdAki1dHUu_PoE_xj4gBd_jvLjB-KZ4ifA1Eau4/s1600/check1.png)
}

Taulukko 3

HTML-OSA kirjoitukseen liitettäväksi:

<table class="table3">
                <thead>
<tr>
                        <th></th>
                        <th abbr="Starter" scope="col">Fiksu Aloitus</th>
                        <th abbr="Medium" scope="col">Fiksu Medium</th>
                        <th abbr="Business" scope="col">Fiksu Business</th>
                        <th abbr="Deluxe" scope="col">Fiksu Deluxe</th>
                    </tr>
</thead>
                <tfoot>
<tr>
                        <th scope="row">Hinta kuukaudessa</th>
                        <td>€ 2.90</td>
                        <td>€ 5.90</td>
                        <td>€ 9.90</td>
                        <td>€ 14.90</td>
                    </tr>
</tfoot>
                <tbody>
<tr>
                        <th scope="row">Tallennus tila</th>
                        <td>512 MB</td>
                        <td>1 GB</td>
                        <td>2 GB</td>
                        <td>4 GB</td>
                    </tr>
<tr>
                        <th scope="row">Liikenne</th>
                        <td>50 GB</td>
                        <td>100 GB</td>
                        <td>150 GB</td>
                        <td>Rajaton</td>
                    </tr>
<tr>
                        <th scope="row">MySQL Tietokannat</th>
                        <td>Rajaton</td>
                        <td>Rajaton</td>
                        <td>Rajaton</td>
                        <td>Rajaton</td>
                    </tr>
<tr>
                        <th scope="row">Asennus</th>
                        <td>19.90 €</td>
                        <td>12.90 €</td>
                        <td>ilmainen</td>
                        <td>ilmainen</td>
                    </tr>
<tr>
                        <th scope="row">PHP 5</th>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                    </tr>
<tr>
                        <th scope="row">Ruby on Rails</th>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                    </tr>
</tbody>
            </table>

CSS- osa blogisi css- osaan liitettäväksi:

/* Table 3 Style */
table.table3{
    font-family:Arial;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 1.7em;
    text-align:center;
    border-collapse:collapse;
}
.table3 thead th{
    padding:6px 10px;
    text-transform:uppercase;
    color:#444;
    font-weight:bold;
    text-shadow:1px 1px 1px #fff;
    border-bottom:5px solid #444;
}
.table3 thead th:empty{
    background:transparent;
    border:none;
}
.table3 thead :nth-child(2),
.table3 tfoot :nth-child(2){
    background-color: #7FD2FF;
}
.table3 tfoot :nth-child(2){
    -moz-border-radius:0px 0px 0px 5px;
    -webkit-border-bottom-left-radius:5px;
    border-bottom-left-radius:5px;
}
.table3 thead :nth-child(2){
    -moz-border-radius:5px 0px 0px 0px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
}
.table3 thead :nth-child(3),
.table3 tfoot :nth-child(3){
    background-color: #45A8DF;
}
.table3 thead :nth-child(4),
.table3 tfoot :nth-child(4){
    background-color: #2388BF;
}
.table3 thead :nth-child(5),
.table3 tfoot :nth-child(5){
    background-color: #096A9F;
}
.table3 thead :nth-child(5){
    -moz-border-radius:0px 5px 0px 0px;
    -webkit-border-top-right-radius:5px;
    border-top-right-radius:5px;
}
.table3 tfoot :nth-child(5){
    -moz-border-radius:0px 0px 5px 0px;
    -webkit-border-bottom-right-radius:5px;
    border-bottom-right-radius:5px;
}
.table3 tfoot td{
    font-size:38px;
    font-weight:bold;
    padding:15px 0px;
    text-shadow:1px 1px 1px #fff;
}
.table3 tbody td{
    padding:10px;
}
.table3 tbody tr:nth-child(4) td{
    font-size:26px;
    font-weight:bold;
}
.table3 tbody td:nth-child(even){
    background-color:#444;
    color:#444;
    border-bottom:1px solid #444;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.39, rgb(189,189,189)),
        color-stop(0.7, rgb(224,224,224))
        );
    background:-moz-linear-gradient(
        center bottom,
        rgb(189,189,189) 39%,
        rgb(224,224,224) 70%
        );
    text-shadow:1px 1px 1px #fff;
}
.table3 tbody td:nth-child(odd){
    background-color:#555;
    color:#f0f0f0;
    border-bottom:1px solid #444;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.39, rgb(85,85,85)),
        color-stop(0.7, rgb(105,105,105))
        );
    background:-moz-linear-gradient(
        center bottom,
        rgb(85,85,85) 39%,
        rgb(105,105,105) 70%
        );
    text-shadow:1px 1px 1px #000;
}
.table3 tbody td:nth-last-child(1){
    border-right:1px solid #222;
}
.table3 tbody th{
    color:#696969;
    text-align:right;
    padding:0px 10px;
    border-right:1px solid #aaa;
}
.table3 tbody span.check::before{
    content : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJn4lGFdDm7wSZPiMUL4BNpDRmliO-S6vzbwmSHzUOpT7a8uh9Z7nn7A6xpV1aKwgO4sxEzv0nbjUrhMZjrp1xqk31xCEDGGaFjLdSOf76AUS0eu6XwLe_pWG-5qxbI1kT9lZr_5-2wnnx/s1600/check2.png)
}

Miltä nämä taulukot sitten näyttävät? Voit käydä tarkistamassa ne täältä.

Loppusanat

Nyt on taas uusi kuukausi saatu tehokkaasti käyntiin taulukoimalla. Toivottavasti näistä vinkeistä on apua blogisi taulukko -ongelmien kanssa ja uskaltaudut käyttämään niitä blogissasi. Oikeassa tilanteessa käytettynä taulukko säästää aikaa ja helpottaa sisällön ymmärrettävyyttä huomattavasi.Taulukot ja niiden sisältö vaihtelevat huomattavasti ja kirjoituksia laatiessasi kannattaa myös miettiä voisiko tämänkin asian esittää helpommin vaikkapa taulukon muodossa. Jos sinulla on kysyttävää taulukoista tai muusta bloggaukseen liittyvästä paiskaa toki kysymyksellä!

Oletko muuten jo osallistunut BlogiHaltuun.net kilpailuun jossa voi voittaa vuodeksi ilmaisen kotisivutilan vaikka taulukko-blogillesi ? Klikaa Blogi Tohtoria ja osallistu.

2 kommenttia:

Marjattah1. lokakuuta 2011 klo 16.58
Olipa mukava löytää tämä teksti, sillä samaa aihetta olen viime aikoina pähkäillyt, ja turvautunut vanhaan kunnon taulukkoon muutamissa teksteissä. Laitoinkin aiheesta postauksen omaan blogiini. Arvelen, että minun lukijapiirini ei ehkä opiskele CSS-tekniikkaa, joten pysyttelen tuossa peruskoodissa, jonka myös selkeästi selostat tässä. Mukava tutustua blogiisi, ja kiitos äskettäisestä vierailusta :)
VastaaPoista
Vastaukset
Admin1. lokakuuta 2011 klo 17.24
@Marjattah Mukava havaita että taulukot ja niiden käyttö ei ole ihan vielä kadonnut tästä maailmasta. Niin ja kiitoksia siitä että mainitsit kirjoitukseni!
VastaaPoista
Vastaukset

Lisää kommentti

Blogi Haltuun.Net

WordPress Blogin tietoturva paremmaksi:

Hae tästä blogista

Blogiarkisto

Liity lukijaksi

lauantai 1. lokakuuta 2011

Blogin taulukot kuntoon

Taulukko 1

Taulukko 2

Taulukko 3

Loppusanat

2 kommenttia: