Ubuntu Suomen keskustelualueet
Muut alueet => Yleistä keskustelua => Aiheen aloitti: 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?
-
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
-
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://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/)
http://icant.co.uk/csstablegallery/index.php?css=97#r97 (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.
-
(http://pp.kpnet.fi/jhii/galerio/pics/bluetable.png)
Tässä olisi yksi taulukko, mutta tämän kanssa on ongelma:
(http://pp.kpnet.fi/jhii/galerio/pics/table_errors.png)
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ä.
<!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>
-
jos taulukon rivit ovat pitkiä, niin seurattavuus on ihan toista luokkaa silloin kun parittomien ja parillisten rivien taustaväri on eri.
-
(http://pp.kpnet.fi/jhii/galerio/pics/alternate.png)
Vuorottelevat rivit on aika vaikea toteuttaa pelkällä CSS:llä, tässä on vaihtoehtoisesti tehty javascriptillä:
<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
// <tbody>s
var tbodies = table.getElementsByTagName("tbody");
// and iterate through them...
for (var h = 0; h < tbodies.length; h++) {
// find all the <tr> 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>
-
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 (http://www.ctan.org/tex-archive/macros/latex/contrib/booktabs/) dokumentaatiota.
-
(http://pp.kpnet.fi/jhii/galerio/pics/alternate.png)
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.
-
Miksi tuo teksti on noin hassun näköistä?
Fontit?
Mitä tehdä?
Ystävällisin terveisin Alpertti
-
(http://pp.kpnet.fi/jhii/galerio/pics/table_errors.png)
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ä:
border-collapse: separate;
border-spacing: 0px 0px;
En ole testannut tosin..
-
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.
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;
}
Miksi tuo teksti on noin hassun näköistä? Fontit?
Hassun näköistä? Sen pitäisi olla Kubuntun sans-serif -oletusfontti.
-
Jos jollakulla olisi muita mielestään onnistuneita taulukoita, niin olisi mukava katsella myös niitä ja vertailla sitten.