« edellinen seuraava »
Sivuja: [1]   Siirry alas

Kirjoittaja Aihe: Etsi kaunein taulukko  (Luettu 4350 kertaa)

snifi

  • Vieras
Etsi kaunein taulukko
« : 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?
Kirjattu

UbunTux

  • Käyttäjä
  • Viestejä: 2046
  • KubunTux
    • Profiili
Vs: Etsi kaunein taulukko
« 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ää.  ;D
Kirjattu
KDE neon
Uudempaa KDE:tä Ubuntulla

snifi

  • Vieras
Vs: Etsi kaunein taulukko
« 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.
Kirjattu

snifi

  • Vieras
Vs: Etsi kaunein taulukko
« 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>


Kirjattu

janne

  • Käyttäjä
  • Viestejä: 5150
    • Profiili
Vs: Etsi kaunein taulukko
« 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.
Kirjattu
Janne

snifi

  • Vieras
Vs: Etsi kaunein taulukko
« 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>
Kirjattu

SuperOscar

  • Käyttäjä
  • Viestejä: 4060
  • Ocatarinetabellatsumtsum!
    • Profiili
    • Legisign.org
Vs: Etsi kaunein taulukko
« 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.
Kirjattu
pöytäkone 1, NUC: openSUSE Leap 15.6, kannettavat 1–3: Debian GNU/Linux 12; pöytäkone 2: openSUSE Tumbleweed; RPi 1: FreeBSD 14-RELEASE; RPi 2: LibreELEC 11

henri_aleksi

  • Käyttäjä
  • Viestejä: 319
    • Profiili
Vs: Etsi kaunein taulukko
« 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.
Kirjattu
"Theory is when you know something, but it doesn't work. Practice is when something works, but you don't know why.
Programmers combine theory and practice: Nothing works and they don't know why."

AlbertRetro

  • Käyttäjä
  • Viestejä: 1084
  • Puun uudelleenistutus auttaa usein... <resetointi>
    • Profiili
Vs: Etsi kaunein taulukko
« 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
Kirjattu
    "...minä mikään viisas ole, tahdon elää vain kuin ihminen..."   http://forum.ubuntu-fi.org/index.php?topic=22423.new#new  counter.li.org #417588

timbba

  • Käyttäjä
  • Viestejä: 1413
    • Profiili
Vs: Etsi kaunein taulukko
« 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..
« Viimeksi muokattu: 26.07.09 - klo:11.30 kirjoittanut timbba »
Kirjattu

snifi

  • Vieras
Vs: Etsi kaunein taulukko
« 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.
Kirjattu

snifi

  • Vieras
Vs: Etsi kaunein taulukko
« 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.
Kirjattu
Sivuja: [1]   Siirry ylös
« edellinen seuraava »