---

Jeg har 3 kolonner med tekst som ser sådan ud -

1 januar 100
2 februar 200
3 marts 300
....
....

Jeg vil gerne have de 3 kolonner til at stå lige over hinanden,
hvilket de ikke gør nu. De er rykket frem eller tilbage alt efter
hvor langt de forskellige ord/tal er.

Min ide var at lave en tabel med en border = 0, men jeg ville
hellere gøre det med CSS. Men her har jeg også et problem.
Jeg har lavet en box hvor i disse 3 kolonner er placeret. Jeg ville
så lave CSS kode hvor den først kolonne er rykket 100px til højre
iforhold til boxens venstre kant, næste kolonne 200px i forhold til
boxens venstre kant, osv. Men problemet er at kolonnerne rykker sig i
forhold til hinanden og ikke i forhold i boxens venstre kant.

Hvordan klare jeg det problem ?

---

SpookiePower skrev:
> Jeg har 3 kolonner med tekst som ser sådan ud -
>
> 1 januar 100
> 2 februar 200
> 3 marts 300
> ....
> ....
>
> Jeg vil gerne have de 3 kolonner til at stå lige over hinanden,
> hvilket de ikke gør nu. De er rykket frem eller tilbage alt efter
> hvor langt de forskellige ord/tal er.
>
> Min ide var at lave en tabel med en border = 0, men jeg ville
> hellere gøre det med CSS. Men her har jeg også et problem.
> Jeg har lavet en box hvor i disse 3 kolonner er placeret. Jeg ville
> så lave CSS kode hvor den først kolonne er rykket 100px til højre
> iforhold til boxens venstre kant, næste kolonne 200px i forhold til
> boxens venstre kant, osv. Men problemet er at kolonnerne rykker sig i
> forhold til hinanden og ikke i forhold i boxens venstre kant.
>
> Hvordan klare jeg det problem ?

#col1 {
width:100px;
float:left;
}
#col2 {
width:100px;
float:left;
}
#col3 {
width:100px;
float:left;
}
Et left-floatet element flyder op på højre side af det
foregående element i kildekoden, så højt det kan komme
i forhold til forældreelementet (containing block).

Hvis det altså er det du vil. Opstillingen ligner jo
en tabel, og man skal vel bruge table-markøren til
tabeller, også i moderne webdesign?

--

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

---

On Tue, 20 Nov 2007 12:52:42 +0100, SpookiePower <boxjunk2600@gmail.com>
wrote:

>Jeg har 3 kolonner med tekst som ser sådan ud -
>
>1 januar 100
>2 februar 200
>3 marts 300
<snip>

>Min ide var at lave en tabel med en border = 0, men jeg ville
>hellere gøre det med CSS.

Tabel-data bør ligge i en tabel - ikke i separate div-bokse.

Når der jævnligt siges - bl.a. i den gruppe - at man ikke bør bruge
tabeller, så menes der, at man ikke bør bruge tabeller til
*layout-formål*.

Tabller bør helt klart bruges til at markere tabel-data.
Du kan så bruge CSS til at style din tabel - og indholdet i den.

Good luck!

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

---

Jørn Andersen wrote:

> Tabel-data bør ligge i en tabel - ikke i separate div-bokse.
>
> Når der jævnligt siges - bl.a. i den gruppe - at man ikke bør bruge
> tabeller, så menes der, at man ikke bør bruge tabeller til
> *layout-formål*.
>
> Tabller bør helt klart bruges til at markere tabel-data.
> Du kan så bruge CSS til at style din tabel - og indholdet i den.

Jeg forsøgte faktisk med en tabel med 3 kolonner. Det virkede
også, men ikke helt efter hensigten. Tabellen lavede jeg 400 pixel
i bredden, men selv de 3 felter der var i hver række, fik forskellige
længder end de andre felter. Så det så ret forvirrende ud. Hvordan kan
man sætte bredden på hver kolonne og ikke kun på selve tabellen ?

---

SpookiePower skrev:

>længder end de andre felter. Så det så ret forvirrende ud. Hvordan kan
>man sætte bredden på hver kolonne og ikke kun på selve tabellen ?

I CSS kan man skrive:

   td { width: 20px; }

Hvis både th og td skal have samme bredde, skriver du:

   th, td { width: 20px; }

Husk dog at en kolonne vil udvide sig hvis det er helt nødvendigt
- altså hvis der f.eks. er et ord på 50 bogstaver, så bliver
kolonnen bred selv om width er sat til 20px.

Hvis det skal være forskelligt i forskellige tabeller, kan du
gøre sådan:

..pointtabel td { width: 20px; }

..kamptabel td { width: 100px; }

I HTML skal der så bare stå:

   <table class='pointtabel'> (plus al resten)

og

   <table class='kamptabel'> (plus al resten)

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

---

Bertel Lund Hansen wrote:

<snip>

Mange tak, det vil jeg kigge nærmere på.

---

SpookiePower wrote:
> Jeg forsøgte faktisk med en tabel med 3 kolonner. Det virkede
> også, men ikke helt efter hensigten. Tabellen lavede jeg 400 pixel
> i bredden, men selv de 3 felter der var i hver række, fik forskellige
> længder end de andre felter. Så det så ret forvirrende ud. Hvordan kan
> man sætte bredden på hver kolonne og ikke kun på selve tabellen ?

Her en måde at sætte bredden af søjlerne i en tabel:

<style>
table {
   background-color:black;
}
td {
   background-color:yellow;
   height:25px;
   padding:0 .5em;
}
td {
   width:100px; /* 1. søjle */
}
td+td {
   width:200px; /* 2. søjle */
}
td+td+td {
   width:100px; /* 3. søjle */
}
</style>
<table>
<tr><td>1<td>januar<td>100
<tr><td>2<td>februar<td>100
<tr><td>3<td>marts<td>100
</table>

---

John S. Thomsen wrote:

<snip>

> td {
> width:100px; /* 1. søjle */
> }
> td+td {
> width:200px; /* 2. søjle */
> }
> td+td+td {
> width:100px; /* 3. søjle */
> }
> </style>
> <table>
> <tr><td>1<td>januar<td>100
> <tr><td>2<td>februar<td>100
> <tr><td>3<td>marts<td>100
> </table>

Når jeg kopier din kode ind i et html dokument, så virker
det præcist som jeg gerne vil have det til. Men når jeg
smider det ind i min asp kode, så går det galt. Men det
er nok fordi jeg ikke gør det rigtigt.

Men det undre mig lidt hvordan cellerne i tabellen ved hvilken
bredde de skal have. Jeg kan se du har skrevet td, td+td, ...
men jeg kan ikke se en fobindelse til cellerne.

En anden ting der undre mig, er at du ikke afslutter en
celle med </td> og at 100 bare for lov til at "hænge" der
for enden. Det virker fint, men jeg ville gerne vide hvordan
det fungere.

---

SpookiePower skrev:

>Når jeg kopier din kode ind i et html dokument, så virker
>det præcist som jeg gerne vil have det til. Men når jeg
>smider det ind i min asp kode, så går det galt. Men det
>er nok fordi jeg ikke gør det rigtigt.

Alt mellem <style> og </style> skal stå i head-sektionen. I
øvrigt skal der stå:

   <style type='text/css'>

hvis det skal være rigtigt.

>Men det undre mig lidt hvordan cellerne i tabellen ved hvilken
>bredde de skal have. Jeg kan se du har skrevet td, td+td, ...
>men jeg kan ikke se en fobindelse til cellerne.

td refererer til en celle. Hvis der står td+td, refererer det til
celle nummer to, osv.

>En anden ting der undre mig, er at du ikke afslutter en
>celle med </td> og at 100 bare for lov til at "hænge" der
>for enden. Det virker fint, men jeg ville gerne vide hvordan
>det fungere.

Det er lovligt i HTML ikke at afslutte <td>. Når parseren møder
det næste <td>, ved den at det foregående er lukket.

Imidlertid vil jeg råde til at man altid bruger lukkekoden selv
om det er tilladt uden. Det er mere overskueligt at læse, og i de
mere avancerede doctyper (som f.eks. XML) er det ikke tilladt at
undlade lukkekoden.

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

---

SpookiePower wrote:
> John S. Thomsen wrote:
>
> <snip>
>
>> td {
>> width:100px; /* 1. søjle */
>> }
>> td+td {
>> width:200px; /* 2. søjle */
>> }
>> td+td+td {
>> width:100px; /* 3. søjle */
>> }
>> </style>
>> <table>
>> <tr><td>1<td>januar<td>100
>> <tr><td>2<td>februar<td>100
>> <tr><td>3<td>marts<td>100
>> </table>
>
> Når jeg kopier din kode ind i et html dokument, så virker
> det præcist som jeg gerne vil have det til. Men når jeg
> smider det ind i min asp kode, så går det galt. Men det
> er nok fordi jeg ikke gør det rigtigt.

Måske. Jeg ved det ikke. Jeg bruger ikke asp.

> Men det undre mig lidt hvordan cellerne i tabellen ved hvilken
> bredde de skal have. Jeg kan se du har skrevet td, td+td, ...
> men jeg kan ikke se en fobindelse til cellerne.

Nærmere granskning af CSS 2.1 paragraf 6.4.1 punkt 3 samt paragraf 6.4.3
giver svaret på det.

http://www.w3.org/TR/CSS21/cascade.html#cascading-order
http://www.w3.org/TR/CSS21/cascade.html#specificity

Her har jeg plukket det ud, som er væsentligt i dette tilfælde:

"more specific selectors will override more general ones."
"count the number of element names ... in the selector (= d)"

selektoren td består af 1 element
selektoren td+td består af 2 elementer
....

Når man kigger på et td element i tabellen, så vinder den selektor, som
har flest elementer.

Selektoren td+td+td, som svarer til 3 <td> elementer lige efter
hinanden, matcher 3. søjle, hvilket betyder at den selektor bestemmer
over bredden af 3. søjle.

Selektoren td+td+td matcher ikke 1. og 2. søjle og har derfor intet at
skulle have sagt i disse tilfælde.

Selektoren td+td matcher 2. søjle og 3. søjle, men da 3. søjle bestemmes
af den mere specifikke selektor td+td+td, så får selektoren td+td kun
noget at skulle have sagt over 2. søjle.

Selektoren td matcher alle søjle, men med samme slags argumenter som
ovenover, så bestemmer selektoren td kun over 1. søjle, selv om den også
matcher 2. og 3. søjle.

> En anden ting der undre mig, er at du ikke afslutter en
> celle med </td> og at 100 bare for lov til at "hænge" der
> for enden. Det virker fint, men jeg ville gerne vide hvordan
> det fungere.

Jeg bruger klassisk HTML syntaks, hvor man i visse tilfælde gerne må
undlade en række tags fortrinsvis sluttags.

Det nuværende udkast til en HTML5 specifikation har et sæt regler for
den slags, hvorfra følgende to citater stammer:

Regel 1: "A tr element's end tag may be omitted if the tr element is
immediately followed by another tr element, or if there is no more
content in the parent element."

Regel 2: "A td element's end tag may be omitted if the td element is
immediately followed by a td or th element, or if there is no more
content in the parent element."

<table>
<tr><td>1<td>januar<td>100
<tr><td>2<td>februar<td>100
<tr><td>3<td>marts<td>100
</table>

I denne tabel er der 3 <tr>. De første 2 <tr> efterfølges af endnu et
<tr>, så derfor kan </tr> udelades. Det 3. <tr> efterfølges ikke at
flere elementer i <table>, så derfor kan </tr> også udelades her.

Samme argumentation gør </td> til en frivillighedens sag om man ønsker
at medtage eller ej.

Det gælder selvfølgelig kun i html og ikke xhtml, hvor den slags
undladelser er en dødssynd, men intet tyder på at xhtml overtager nettet
foreløbig. Så sent som i går kom denne melding fra Google:

"Google have no interest in XHTML"

som kan læses på dette link:

http://lists.w3.org/Archives/Public/public-html/2007Nov/0332.html

når man erstatter "We" med "Google" og "the XML serialisation" med XHTML
i dette citat:

"We have no interest in the XML serialisation"

---

John S. Thomsen skrev:

> td {
> width:100px; /* 1. søjle */
> }
> td+td {
> width:200px; /* 2. søjle */
> }
> td+td+td {
> width:100px; /* 3. søjle */
> }

Her ser det ud til at du bruger nærmest
søskende selektoren. Det bør du vel ikke
råde nogen til uden samtidig at fortælle,
at IE<7 ikke kan tolke denne selektor?

> </style>
> <table>
> <tr><td>1<td>januar<td>100
> <tr><td>2<td>februar<td>100
> <tr><td>3<td>marts<td>100
> </table>

Og selvom det er lovligt (?) er
det vel ikke god kodeskik ikke
at afslutte sine blokmarkører?

--

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