---

Hey Ng.

Sidder og roder lidt med Css og tabeller.

jeg kan godt få css til at virke på tabellen,
men da jeg har mange poster i tabellen, kunne jeg godt tænke mig
at hver anden række i tabellen har en anden farve, for at gøre
det hele mere overskuelig.

Eks.

grå
hvid
grå
hvid

Kan det gøres i css og hvordan, eller skal der noget serverside
blandes ind i det?

Mikkel




--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Den 09-12-07 08.40 skrev Mikkel Jakobsen følgende:

> jeg kan godt få css til at virke på tabellen,
> men da jeg har mange poster i tabellen, kunne jeg godt tænke mig
> at hver anden række i tabellen har en anden farve, for at gøre
> det hele mere overskuelig.

Det kan gøres ved at lave en css-klasse, som du så påfører hver anden
række. Det kan selvfølgelig gøres manuelt, men dels er det et større
arbejde, hvis du har mange rækker, og dels falder det hele fra hinanden,
hvis du på et tidspunkt vil fjerne eller tilføje en række midt inde i
tabellen.

Det kan ganske givet gøres meget nemmere med serverside script eller
JavaScript, prøv at spørge i de relevante grupper.

--
Mvh. Kim Ludvigsen
Polimiken - en levende netavis, der tør, hvor selv Ekstra Bladet tier.
http://polimiken.dk

---

On 09 Dec 2007 07:40:49 GMT, Mikkel Jakobsen <spam@bonzai.adsl.dk>
wrote:

>men da jeg har mange poster i tabellen, kunne jeg godt tænke mig
>at hver anden række i tabellen har en anden farve, for at gøre
>det hele mere overskuelig.
<snip>
>Kan det gøres i css og hvordan, eller skal der noget serverside
>blandes ind i det?

Det kan godt gøres med css alene - det er bare gang i tastaturet

Men hvis din tabel alligevel bliver genereret serverside, så er det
klart nemmest at gøre det der.

Endelig kan det laves clientside (JScript), men det vil jeg nok forsøge
at undgå.

Good luck!

--
Jørn Andersen,
Brønshøj

---

Mikkel Jakobsen <spam@bonzai.adsl.dk> writes:

> men da jeg har mange poster i tabellen, kunne jeg godt tænke mig
> at hver anden række i tabellen har en anden farve, for at gøre
> det hele mere overskuelig.
....
> grå
> hvid
> grå
> hvid
>
> Kan det gøres i css og hvordan, eller skal der noget serverside
> blandes ind i det?

Det kan ikke gøres med ren CSS (ok, det kan det, men så skal du have
en regel for hver linje, og de bliver hurtigt MEGET lange:
For række otte:
td + td + td + td + td + td + td + td { background: white; }
(Og så forstår IE det sikkert heller ikke, det er jo CSS 2!)

Den måde det oftest løses på er at sætte forskellige klasser på
alternerende rækker:
<tr class="oddRow"> .... </tr>
<tr class="evenRow"> ... </tr>
etc.
Man kan evt udelade den ene og bruge default-udseendet til den.
Det skal under alle omstændigheder indsættes. Det gøres sikkert
nemt hvis man opbygger tabellen med et server-side script.

Hvis man laver tabellen i hånden, så skal man enten indsætte
klasserne selv, eller man skal have et program der efter-processerer
ens HTML inden man uploader det til serveren.

Man kan også lave et script der gennemløber tabellen og sætter
klasserne på når siden bliver indlæst, men det fejler selvfølgelig
hvis Javascript er slået fra.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

---

8X
>> Kan det gøres i css og hvordan, eller skal der noget serverside
>> blandes ind i det?
>
> Det kan ikke gøres med ren CSS (ok, det kan det, men så skal du have
> en regel for hver linje, og de bliver hurtigt MEGET lange:
> For række otte:
> td + td + td + td + td + td + td + td { background: white; }
> (Og så forstår IE det sikkert heller ikke, det er jo CSS 2!)
>
> Den måde det oftest løses på er at sætte forskellige klasser på
> alternerende rækker:
> <tr class="oddRow"> .... </tr>
> <tr class="evenRow"> ... </tr>
> etc.
> Man kan evt udelade den ene og bruge default-udseendet til den.
> Det skal under alle omstændigheder indsættes. Det gøres sikkert
> nemt hvis man opbygger tabellen med et server-side script.
8X

Er den sidste ikke ren CSS?

Birger
-----
http://bbsorensen.dk

---

Birger skrev:

> Er den sidste ikke ren CSS?

Jo.

--
Bertel
http://bertel.lundhansen.dk/   FIDUSO: http://fiduso.dk/

---

"Bertel Lund Hansen" <unospamo@lundhansen.dk> skrev i en meddelelse
news:26nnl3taajr20j68a69d81h8degsgmpakl@4ax.com...
> Birger skrev:
>
>> Er den sidste ikke ren CSS?
>
> Jo.
>
> --
> Bertel
> http://bertel.lundhansen.dk/ FIDUSO: http://fiduso.dk/

Det mente jeg også nok.
Og det er den løsning jeg ville vælge, enten det skal skrives manuelt eller
fremstilles af serverside script...

Birger
-----
http://bbsorensen.dk

---

"Birger" <sdc@bbsorensen.com> writes:

>> Den måde det oftest løses på er at sætte forskellige klasser på
>> alternerende rækker:
>> <tr class="oddRow"> .... </tr>
>> <tr class="evenRow"> ... </tr>
>> etc.
>> Man kan evt udelade den ene og bruge default-udseendet til den.
>> Det skal under alle omstændigheder indsættes. Det gøres sikkert
>> nemt hvis man opbygger tabellen med et server-side script.
>
> Er den sidste ikke ren CSS?

Nej, den kræver at man tilpasser HTML'en også.

Hvis det var ren CSS, så ville du kunne skifte til at highlighte
hver tredje række, i stedet for hver anden, ved *udelukkende* at
skifte sin CSS. Det er det der er idéen med CSS, og det ville
være godt, men det bliver ikke før browserne understøtter CSS3.

I dette eksempel har man fastlåst sin HTML til at kunne adskille
lige og ulige rækker. Altså indeholder HTML'en oplysninger der
egentligt er ren præsentation, og som derfor burde holdes i CSS'en.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

---

"Lasse Reichstein Nielsen" <lrn@hotpop.com> skrev i en meddelelse
news:fxychwj8.fsf@hotpop.com...
> "Birger" <sdc@bbsorensen.com> writes:
>
>>> Den måde det oftest løses på er at sætte forskellige klasser på
>>> alternerende rækker:
>>> <tr class="oddRow"> .... </tr>
>>> <tr class="evenRow"> ... </tr>
>>> etc.
>>> Man kan evt udelade den ene og bruge default-udseendet til den.
>>> Det skal under alle omstændigheder indsættes. Det gøres sikkert
>>> nemt hvis man opbygger tabellen med et server-side script.
>>
>> Er den sidste ikke ren CSS?
>
> Nej, den kræver at man tilpasser HTML'en også.
>
> Hvis det var ren CSS, så ville du kunne skifte til at highlighte
> hver tredje række, i stedet for hver anden, ved *udelukkende* at
> skifte sin CSS. Det er det der er idéen med CSS, og det ville
> være godt, men det bliver ikke før browserne understøtter CSS3.
>
> I dette eksempel har man fastlåst sin HTML til at kunne adskille
> lige og ulige rækker. Altså indeholder HTML'en oplysninger der
> egentligt er ren præsentation, og som derfor burde holdes i CSS'en.
>
> /L
> --
> Lasse Reichstein Nielsen - lrn@hotpop.com
> DHTML Death Colors:
> <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
> 'Faith without judgement merely degrades the spirit divine.'


Point taken.

Dit eksempel
"
For række otte:
td + td + td + td + td + td + td + td { background: white; }
"
skal vel for øvrigt hedde tr i stedet for td?
Har ikke beskæftiget mig med CSS3, og jeg finder + som selector forvirrende.


Birger
-----
http://bbsorensen.dk

---

Lasse Reichstein Nielsen skrev:

> > Er den sidste ikke ren CSS?

> Nej, den kræver at man tilpasser HTML'en også.

Det er en pedantisk skelnen.

> Hvis det var ren CSS, så ville du kunne skifte til at highlighte
> hver tredje række, i stedet for hver anden, ved *udelukkende* at
> skifte sin CSS.

Det er jo rigtigt. Men når jeg har lagt en div med en klasse uden
om noget indhold i HTML, så er HTML'en jo også tilpasset.

--
Bertel
http://bertel.lundhansen.dk/   FIDUSO: http://fiduso.dk/

---

"Birger" <sdc@bbsorensen.com> writes:

> Point taken.
>
> Dit eksempel
> "
> For række otte:
> td + td + td + td + td + td + td + td { background: white; }
> "
> skal vel for øvrigt hedde tr i stedet for td?

Ups, ja.

> Har ikke beskæftiget mig med CSS3, og jeg finder + som selector forvirrende.

Det er skam CSS 2, og forstås af alle moderne standardoverholdende browsere
(altså /ikke/ IE, som stadig ikke kan klare en ti år gammel standard).

I CSS 2 kan man sætte selektorer sammen på flere forskellige måder:

foo, bar { /* bar og foo elementer */ }
foo bar { /* bar-elementer der er inde i foo-elementer */ }
foo > bar { /* bar-elementer der er direkte børn af foo-elementer*/}
foo + bar { /* bar-elementer der er lige efter et foo-element */}

Her kan foo og bar begge være komplicerede selektors.

IE 6 forstår kun de to første, og jeg er ikke sikker på at IE 7 er bedre.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

---

Bertel Lund Hansen <unospamo@lundhansen.dk> writes:

> Det er en pedantisk skelnen.

Tak, det var sødt sagt :)

> Det er jo rigtigt. Men når jeg har lagt en div med en klasse uden
> om noget indhold i HTML, så er HTML'en jo også tilpasset.

Ja, og hvis klassen har semantisk betydning, så er det fint.
Hvis man skriver
<h1 class="chapter">Yadda yadda</h1>
så kan man stadig skifte alle sine kapiteloverskrifters udseende ud,
uden at skulle ændre sin HTML, fordi at noget er en kapiteloverskrift
ændrer sig ikke.

Modsat med at sætte klasser på elementer, som kun er der som hook til
en bestemt CSS-regel.
Eksempler som <span class="redText floatLeft"> skal man lade være med.
Så kan man lige så godt lave en style-attribut. Man skal alligevel
rette alle steder hvor det står hvis man vil lave det om (eller, endnu
værre, lave en regel om til "redText { color: green; }").

Eksemplet her er en mellemting. Det er rigtigt at en table-række er
enten en lige eller ulige hveranden-række, uafhængigt af stylingen.
På den anden side er man stadig bundet til kun at kunne variere
styling på hveranden række, og ikke, fx, hver tredje. Altså ens
HTML er bygget til en bestemt type styling.
HTML-klasserne er kun indsat som hack fordi CSS ikke p.t. er
tilstrækkeligt til at opnå det man egentlig gerne vil.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

---

Lasse Reichstein Nielsen skrev:

> På den anden side er man stadig bundet til kun at kunne variere
> styling på hveranden række, og ikke, fx, hver tredje. Altså ens
> HTML er bygget til en bestemt type styling.

Jeg kan godt se din pointe.

--
Bertel
http://bertel.lundhansen.dk/   FIDUSO: http://fiduso.dk/

---

Tak for svarene.

Er det rigtigt konkluderet at det ikke direkte kan gøres i CSS,
men at der skal noget serve side ind over?

Tabellen bliver generet af en 'while' sætning i php.

kan det så gøret sådan?
<tr class="graa"><td>noget</td></tr>(lige rækker)
<tr class="hvid"><td>noget</td></tr>(ulige rækker)

Mikkel



--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Mikkel Jakobsen skrev:

> Tabellen bliver generet af en 'while' sætning i php.

$nr=0;
while (køerne ikke er kommet hjem endnu)
   if ($nr++%2) echo "<tr class="hvid"><td>noget</td></tr>\n";
   else echo "<tr class="graa"><td>noget</td></tr>\n";

--
Bertel
http://bertel.lundhansen.dk/   FIDUSO: http://fiduso.dk/

---

Mikkel Jakobsen skrev:
> Tak for svarene.
>
> Er det rigtigt konkluderet at det ikke direkte kan gøres i CSS,
> men at der skal noget serve side ind over?
>
> Tabellen bliver generet af en 'while' sætning i php.
>
> kan det så gøret sådan?
> <tr class="graa"><td>noget</td></tr>(lige rækker)
> <tr class="hvid"><td>noget</td></tr>(ulige rækker)
>

Nej. Client-Side JavaScript er alt rigeligt til
det, jf. en tidligere diskussion om dette emne.
<script type="text/javascript">
function colorRows(){
var rows = document.getElementById("tabel-ID").
   --> getElementsByTagName("tr")
for (i=1;i<rows.length;i=i+2){
rows[i].style.backgroundColor = "#ddd";
}
}
onload=colorRows;
</script>

kolorerer hver anden tabelrække.
--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

Jørgen Farum Jensen skrev:

> > Tabellen bliver generet af en 'while' sætning i php.

> Nej. Client-Side JavaScript er alt rigeligt til
> det

Når tabellen nu genereres i PHP, er der ingen grund til at lægge
JavaScript ovenpå.

--
Bertel
http://bertel.lundhansen.dk/   FIDUSO: http://fiduso.dk/

---

> kan det så gøret sådan?
> <tr class="graa"><td>noget</td></tr>(lige rækker)
> <tr class="hvid"><td>noget</td></tr>(ulige rækker)

Ja!
Serverside er ikke nødvendigt, men det letter absolut det hele.
Og når din tabel i forvejen genereres af PHP, er der ingen grund til at
bruge javascript også.
Personligt undgår jeg altid javascript, hvis jeg kan opnå samme effekt med
serverside-scripts og/eller css.

I php bruger jeg gerne:

while(tabellen løbes igennem) {
if($klasse == "bg1") {
$klasse = "bg2";
} else {
$klasse = "bg1";
}
echo " <tr class=\"$klasse\">\n" // osv.
}

Ovenstående kommer af, at ingen af de to baggrundsfarver er default i
tabellen.

---

Philip Nunnegaard skrev:

> Personligt undgår jeg altid javascript, hvis jeg kan opnå samme effekt med
> serverside-scripts og/eller css.

Det kan du aldrig. Den nye side bliver ikke serveret lige så
hurtigt som JavaScript kan gøre sit arbejde. Og der er ting der
kun er mulige med JavaScript.

Det der overbeviste mig om at min skepsis over for JavaScript var
ubegrundet, var et krav jeg stillede til et browserprogram jeg
lavede i ColdFusion (svarer til PHP). Det var muligt at vælge
både en tidsperiode og en underdeling af samme; det kunne f.eks.
være en uge opdelt i dage. Som underdeling kunne man også vælge
en måned fordi perioden også kunne være et år - men det gav jo
ikke meget mening at underdele en uge i måneder. Uden JavaScript
ville brugeren kunn sende en side afsted hvor en uge
tilsyneladende var opdelt i måneder. Et par sekunder efter ville
han få besked om at det ikke var muligt, og så måtte han vælge
om.

Med JavaScript kunne jeg dynamisk fjerne de ulogiske
underdelinger, og så kunne man ikke vælge forkert. Det er
brugervenligt.

Endnu vigtigere var det at jeg med en anden rutine kunne sørge
for at hvis man valgte en dato, så blev prikken ved "Datovalg"
sat. Ellers kunne man stå og vælge datoer i lang tid blot for at
opdage at den sektion slet ikke var aktiveret. Serveren ville så
vælge en standardperiode. Måske opdagede brugeren slet ikke
fejlen.

Du kan afprøve en lignende sikring på min søgeside:

   http://bertel.lundhansen.dk/search.php

under "Googles usenetsøgeside". Hvis du prøver at angive en dato,
flytter prikken væk fra linjen med standardperioder ned til
linjen med specifikke datoer. Jeg var ellers alt for tit løbet
ind i at mine valg af tidspunkter blev ignoreret når jeg fik
svarsiden fra Google fordi jeg havde glemt at sætte prikken.

--
Bertel
http://bertel.lundhansen.dk/   FIDUSO: http://fiduso.dk/

---

"Bertel Lund Hansen" <unospamo@lundhansen.dk> skrev i en meddelelse
news:r4tol31b60hsqpovg4auuimigkoicccuuu@4ax.com...
> Philip Nunnegaard skrev:
>
>> Personligt undgår jeg altid javascript, hvis jeg kan opnå samme effekt
>> med
>> serverside-scripts og/eller css.
>
> Det kan du aldrig. Den nye side bliver ikke serveret lige så
> hurtigt som JavaScript kan gøre sit arbejde. Og der er ting der
> kun er mulige med JavaScript.
>
> Det der overbeviste mig om at min skepsis over for JavaScript var
> ubegrundet, var et krav jeg stillede til et browserprogram jeg
> lavede i ColdFusion (svarer til PHP). Det var muligt at vælge
> både en tidsperiode og en underdeling af samme; det kunne f.eks.
> være en uge opdelt i dage. Som underdeling kunne man også vælge
> en måned fordi perioden også kunne være et år - men det gav jo
> ikke meget mening at underdele en uge i måneder. Uden JavaScript
> ville brugeren kunn sende en side afsted hvor en uge
> tilsyneladende var opdelt i måneder. Et par sekunder efter ville
> han få besked om at det ikke var muligt, og så måtte han vælge
> om.
>
> Med JavaScript kunne jeg dynamisk fjerne de ulogiske
> underdelinger, og så kunne man ikke vælge forkert. Det er
> brugervenligt.
>
> Endnu vigtigere var det at jeg med en anden rutine kunne sørge
> for at hvis man valgte en dato, så blev prikken ved "Datovalg"
> sat. Ellers kunne man stå og vælge datoer i lang tid blot for at
> opdage at den sektion slet ikke var aktiveret. Serveren ville så
> vælge en standardperiode. Måske opdagede brugeren slet ikke
> fejlen.
>
> Du kan afprøve en lignende sikring på min søgeside:
>
> http://bertel.lundhansen.dk/search.php
>
> under "Googles usenetsøgeside". Hvis du prøver at angive en dato,
> flytter prikken væk fra linjen med standardperioder ned til
> linjen med specifikke datoer. Jeg var ellers alt for tit løbet
> ind i at mine valg af tidspunkter blev ignoreret når jeg fik
> svarsiden fra Google fordi jeg havde glemt at sætte prikken.
>
> --
> Bertel
> http://bertel.lundhansen.dk/ FIDUSO: http://fiduso.dk/

Mange mennesker er helt unødvendigt "script forskrækkede". Så langt kan jeg
følge dig.
Det hjælper dem bare ikke noget, at du ikke deaktiverer script.
Hvis de har deaktiveret scripting, køres scriptet ikke hos dem..

Der er tale om at sætte farver på rækker i en tabel, som bliver genereret af
PHP.
Ikke om at hente en ekstra side.
Jeg tror ikke du får ret mange til at tro på, at det er hurtigere at gøre
det i script, end at sætte en class, samtidig med at resten af koden
genereres.


Birger
-----
http://bbsorensen.dk

---

Birger skrev:

> Hvis de har deaktiveret scripting, køres scriptet ikke hos dem..

Korrekt. Men alle mine eksempler fungerer uden JavaScript. Det
stiller bare en brugervenligere løsning til rådighed.

> Jeg tror ikke du får ret mange til at tro på, at det er hurtigere at gøre
> det i script, end at sætte en class, samtidig med at resten af koden
> genereres.

Du har ikke læst hvad jeg har skrevet tidligere.

--
Bertel
http://bertel.lundhansen.dk/   FIDUSO: http://fiduso.dk/