Kirjoittaja Aihe: Etsi kaunein taulukko (Luettu 4355 kertaa)

snifi · « : 28.06.09 - klo:14.55 »

Kysymys: Millainen on mielestäsi esteettisesti miellyttävä taulukko? Jos sinulla on jokin suosikki, näytä kuva tai anna linkki. Tarvitsisin tätä tietokantaohjelman suunnittelua ajatellen, kun kaikki tieto esitetään taulukkoina, muodostuu taulukon ulkonäkö käyttömukavuuden kannalta varsin merkittäväksi. Värit? Pyöristetyt reunat? Kehykset? Fonttikoko?

UbunTux · « **Vastaus #1 :** 28.06.09 - klo:17.04 »

Selkeät rajat. Mikään muu ei ole turhauttavampaa, kuin sormpelillä etsiä sarakkeiden ja rivien risteyskohtia. Muuten ei haittaa. Niin ja keskitetty teksti solussa miellyttää myöskin silmää.

snifi · « **Vastaus #2 :** 28.06.09 - klo:18.27 »

Heitän tähän väliin muutaman linkin, jonka löysin aiheesta:

http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
http://icant.co.uk/csstablegallery/index.php?css=97#r97

Jälkimmäisessä voi naksutella ja kokeilla miltä mikäkin näyttää, en tosin vielä oikein löytänyt suosikkiani.

snifi · « **Vastaus #3 :** 04.07.09 - klo:23.36 »

Tässä olisi yksi taulukko, mutta tämän kanssa on ongelma:

Osaisiko joku sanoa, mikä taulukon CSS-tyylissä menee väärin, ja miten korjata? Ymmärtäisin että tuo piirtovirhe johtuu reunan kollapsointiominaisuudesta, mutta mitä sille pitäisi tehdä.

Koodia: [Valitse]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html><head><title>Seinfeld Foods</title>

<style type="text/css">

table.Design11
{
  border:1px solid #c3c3c3;
  border-collapse:collapse;
  font-family:  verdana, sans-serif;
  font-size: 8pt;
}

table.Design11 th
{
  border: 1px solid #666666;
  background-color: #88afe9;
  padding:3px;
}

table.Design11 td 
{
  border:1px solid #c3c3c3;
  background-color: #fdfdfd;
  padding:3px 8px;
}

</style></head><body>

<h4>Table class="Design11"</h4>

<table  class="Design11" cellspacing="0">

<TR><TH>id</TH><TH>type_id</TH><TH>name</TH></TR>
<TR><TD>189</TD>
<TD>8</TD>
<TD>Apple</TD>
</TR>
<TR><TD>190</TD>
<TD>8</TD>
<TD>Apple Pie</TD>
</TR>
<TR><TD>191</TD>
<TD>8</TD>
<TD>Avacado</TD>
</TR>
<TR><TD>192</TD>
<TD>8</TD>
<TD>Banana</TD>
</TR>
<TR><TD>193</TD>
<TD>8</TD>
<TD>Canned Fruit</TD>
</TR>
<TR><TD>194</TD>
<TD>8</TD>
<TD>Cantaloupe</TD>
</TR>
<TR><TD>195</TD>
<TD>8</TD>
<TD>Grape</TD>
</TR>
<TR><TD>196</TD>
<TD>8</TD>
<TD>Grapefruit</TD>
</TR>
<TR><TD>197</TD>
<TD>8</TD>
<TD>Hamptons Tomatoes</TD>
</TR>
<TR><TD>198</TD>
<TD>8</TD>
<TD>Macinaw peaches</TD>
</TR>
<TR><TD>199</TD>
<TD>8</TD>
<TD>Mangos</TD>
</TR>
<TR><TD>200</TD>
<TD>8</TD>
<TD>Melons</TD>
</TR>
<TR><TD>201</TD>
<TD>8</TD>
<TD>Nectarine</TD>
</TR>
<TR><TD>202</TD>
<TD>8</TD>
<TD>Oranges</TD>
</TR>
</table>

</body>
</html>

janne · « **Vastaus #4 :** 05.07.09 - klo:11.29 »

jos taulukon rivit ovat pitkiä, niin seurattavuus on ihan toista luokkaa silloin kun parittomien ja parillisten rivien taustaväri on eri.

snifi · « **Vastaus #5 :** 05.07.09 - klo:16.18 »

Vuorottelevat rivit on aika vaikea toteuttaa pelkällä CSS:llä, tässä on vaihtoehtoisesti tehty javascriptillä:

Koodia: [Valitse]

<html><head><title>Table with alternating rows</title>
<style>
#alternate {
  border: 1px solid #666666;
  font-family: verdana, sans-serif;
  font-size: 8pt;
  margin: 0 10px;
}
#alternate th
{
  border-right: 1px solid #666666;
  background-color:#88afe9;
  padding:3px;
}
#alternate tbody tr td {
  padding: 3px 8px;
  border-right: 1px solid #ccddee;
}
</style>

<script type="text/javascript">
<!--
  // this function is need to work around 
  // a bug in IE related to element attributes
  function hasClass(obj) {
     var result = false;
     if (obj.getAttributeNode("class") != null) {
         result = obj.getAttributeNode("class").value;
     }
     return result;
  }   
  function stripe(id) {
    // the flag we'll use to keep track of 
    // whether the current row is odd or even
    var even = false;
    // if arguments are provided to specify the colours
    // of the even & odd rows, then use the them;
    // otherwise use the following defaults:
    var evenColor = arguments[1] ? arguments[1] : "#fff";
    var oddColor = arguments[2] ? arguments[2] : "#eee";
    // obtain a reference to the desired table
    // if no such table exists, abort
    var table = document.getElementById(id);
    if (! table) { return; }
    // by definition, tables can have more than one tbody
    // element, so we'll have to get the list of child
    // &lt;tbody&gt;s 
    var tbodies = table.getElementsByTagName("tbody");
    // and iterate through them...
    for (var h = 0; h < tbodies.length; h++) {
     // find all the &lt;tr&gt; elements... 
      var trs = tbodies[h].getElementsByTagName("tr");
      // ... and iterate through them
      for (var i = 0; i < trs.length; i++) {
      // avoid rows that have a class attribute
        // or backgroundColor style
      if (!hasClass(trs[i]) && ! trs[i].style.backgroundColor) {
         // get all the cells in this row...
          var tds = trs[i].getElementsByTagName("td");
          // and iterate through them...
          for (var j = 0; j < tds.length; j++) {
            var mytd = tds[j];
            // avoid cells that have a class attribute
            // or backgroundColor style
          if (! hasClass(mytd) && ! mytd.style.backgroundColor) {
          mytd.style.backgroundColor = even ? evenColor : oddColor;
            }
          }
        }
        // flip from odd to even, or vice-versa
        even =  ! even;
      }
    }
  }
// -->
</script>
</head><body onload="stripe('alternate', '#fdfbf2', '#ccddee');">

<h4>Table id="alternate"</h4>

<table id="alternate"  cellspacing="0">

<TR><TH>id</TH><TH>type_id</TH><TH>name</TH></TR>

<TR><TD>202</TD>
<TD>8</TD>
<TD>Oranges</TD>
</TR>
<TR><TD>203</TD>
<TD>8</TD>
<TD>Papaya</TD>
</TR>
<TR><TD>204</TD>
<TD>8</TD>
<TD>Peaches</TD>
</TR>
<TR><TD>205</TD>
<TD>8</TD>
<TD>Pineapple</TD>
</TR>
<TR><TD>206</TD>
<TD>8</TD>
<TD>Plantains</TD>
</TR>
<TR><TD>207</TD>
<TD>8</TD>
<TD>Plumbs</TD>
</TR>
<TR><TD>208</TD>
<TD>8</TD>
<TD>Prunes, Figs, any Dried Fruit</TD>
</TR>
<TR><TD>209</TD>
<TD>8</TD>
<TD>Raisins</TD>
</TR>
<TR><TD>210</TD>
<TD>8</TD>
<TD>Shredded Coconut</TD>
</TR>
<TR><TD>211</TD>
<TD>8</TD>
<TD>Strawberries with Chocolate Sauce</TD>
</TR>
<TR><TD>244</TD>
<TD>9</TD>
<TD>JujyFruit</TD>
</TR>
</table>

</body>
</html>

SuperOscar · « **Vastaus #6 :** 05.07.09 - klo:16.38 »

Semmoisen säännön olen kuullut, että typografisesti oikein suunnitellussa taulukossa ei milloinkaan ole pystyviivoja: ainoastaan vaakaviivoja ja tyhjää tilaa palstojen välissä. Jos kokee tarvitsevansa pystyviivoja, on suunnitellut taulukon väärin.

Ks. esim. LaTeXin Booktabs-tyylipaketin dokumentaatiota.

henri_aleksi · « **Vastaus #7 :** 05.07.09 - klo:21.31 »

Lainaus käyttäjältä: snifi - 05.07.09 - klo:16.18

Vuorottelevat rivit on aika vaikea toteuttaa pelkällä CSS:llä, tässä on vaihtoehtoisesti tehty javascriptillä:

Paitsi jos taulukon parsii joka tapauksessa koodissa vaikka php:ssä niin pistää .pariton ja .parillinen classin ja
hoitaa homman css:llä loppuun.

AlbertRetro · « **Vastaus #8 :** 14.07.09 - klo:14.42 »

Miksi tuo teksti on noin hassun näköistä?
Fontit?
Mitä tehdä?

Ystävällisin terveisin Alpertti

timbba · « **Vastaus #9 :** 26.07.09 - klo:06.47 »

Lainaus käyttäjältä: snifi - 04.07.09 - klo:23.36

Osaisiko joku sanoa, mikä taulukon CSS-tyylissä menee väärin, ja miten korjata? Ymmärtäisin että tuo piirtovirhe johtuu reunan kollapsointiominaisuudesta, mutta mitä sille pitäisi tehdä.

Vaihtamalla selainta. Veikataan, että käytössä Firefox, joka ainakin piirtelee noita collapse taulukkoja "väärin".

Edit: Mutta ehkä helpoiten saattaisi korjaantua, kun kokeilisi laittaa tuon "border-collapse: collapse;" tilalle nämä kaksi riviä:

Koodia: [Valitse]

border-collapse: separate;
border-spacing: 0px 0px;

En ole testannut tosin..

snifi · « **Vastaus #10 :** 28.07.09 - klo:17.14 »

Lainaus käyttäjältä: timbba - 26.07.09 - klo:06.47

Edit: Mutta ehkä helpoiten saattaisi korjaantua, kun kokeilisi laittaa tuon "border-collapse: collapse;" tilalle nämä kaksi riviä:

Tuo ei toimi, mutta lähes hyväksyttävänn tuloksen sain kun säädin hieman värejä enemmän toistensa kaltaiseksi.

Koodia: [Valitse]

table.Design11
{
  border: 1px solid #828282;
  border-collapse: collapse;
  font-family: verdana, sans-serif;
  font-size: 8pt;
  margin:5px;
}

table.Design11 th
{
  border: 1px solid #656565;
  background-color: #88afe9;
  padding:3px;
}

table.Design11 td 
{
  border: 1px solid #828282;
  background-color: #fbfbfb;
  padding:3px 8px;
}

Lainaus käyttäjältä: AlbertRetro - 14.07.09 - klo:14.42

Miksi tuo teksti on noin hassun näköistä? Fontit?

Hassun näköistä? Sen pitäisi olla Kubuntun sans-serif -oletusfontti.

snifi · « **Vastaus #11 :** 28.07.09 - klo:17.18 »

Jos jollakulla olisi muita mielestään onnistuneita taulukoita, niin olisi mukava katsella myös niitä ja vertailla sitten.

Ubuntu Suomen keskustelualueet

Uutiset:

Kirjoittaja Aihe: Etsi kaunein taulukko (Luettu 4355 kertaa)

snifi

Etsi kaunein taulukko

UbunTux

Vs: Etsi kaunein taulukko

snifi

Vs: Etsi kaunein taulukko

snifi

Vs: Etsi kaunein taulukko

janne

Vs: Etsi kaunein taulukko

snifi

Vs: Etsi kaunein taulukko

SuperOscar

Vs: Etsi kaunein taulukko

henri_aleksi

Vs: Etsi kaunein taulukko

AlbertRetro

Vs: Etsi kaunein taulukko

timbba

Vs: Etsi kaunein taulukko

snifi

Vs: Etsi kaunein taulukko

snifi

Vs: Etsi kaunein taulukko