---

Hej

Jeg ved ekstremt lidt om CSS. Jeg kunne en lille smule for nogle år
siden, men det er rustet væk igen.

Jeg er ved at lave min egen wiki, som desværre er en offline-wiki indtil
næste måned.

Den kommer til at indeholde rigtig mange tabeller, og jeg vil derfor
gerne gøre det så nemt som muligt at lave tabeller.


Kan man bruge CSS til at styre hvordan tabeller ser ud som default?

Jeg har lavet denne lille test-tabel i HTML
<table>
<tr>
<td>1</td> <td>2</td>
</tr>
<tr>
<td>3</td> <td>4</td>
</tr>
</table>

Og når jeg åbner den i Internet Explorer får jeg en tabel uden borders.

Det tilsvarende sker når jeg laver en tabel i wikitext (et markup-sprog
der er noget enklere end HTML, og som af mediawiki-softwaren bliver
oversat til HTML).

Det jeg så har gjort i wikitekst-udgaven er at sætte følgende kommandoer
ind i den enkelte tabel:

cellpadding="3" cellspacing="3" border="1"

(Det virker på samme måde i wikitext som i HTML.)


Problemet er bare, at der skal oprettes *mange* tabeller i min wiki, i
de kommende år.

Allerhelst vil jeg modificere wiki'ens CSS sådan at alle tabeller
automatisk har sat cellpadding, -spacing og borders som ønsket, uden at
man behøver skrive det i hver enkelt tabel.

Hvis det er umuligt, vil jeg gerne have den enklest og dovnest mulige
løsning, hvor så meget af arbejdet som muligt kan gøres én gang for
alle. (Og jeg gætter på at det er via CSS.)

--
Peter Knutsen

---

Den 12-07-2010 11:21, Peter Knutsen skrev:
> Hej
>
> Jeg ved ekstremt lidt om CSS. Jeg kunne en lille smule for nogle år
> siden, men det er rustet væk igen.
>
> Jeg er ved at lave min egen wiki, som desværre er en offline-wiki indtil
> næste måned.
>
> Den kommer til at indeholde rigtig mange tabeller, og jeg vil derfor
> gerne gøre det så nemt som muligt at lave tabeller.
>
>
> Kan man bruge CSS til at styre hvordan tabeller ser ud som default?
>
> Jeg har lavet denne lille test-tabel i HTML
> <table>
> <tr>
> <td>1</td> <td>2</td>
> </tr>
> <tr>
> <td>3</td> <td>4</td>
> </tr>
> </table>
>
> Og når jeg åbner den i Internet Explorer får jeg en tabel uden borders.
>
> Det tilsvarende sker når jeg laver en tabel i wikitext (et markup-sprog
> der er noget enklere end HTML, og som af mediawiki-softwaren bliver
> oversat til HTML).
>
> Det jeg så har gjort i wikitekst-udgaven er at sætte følgende kommandoer
> ind i den enkelte tabel:
>
> cellpadding="3" cellspacing="3" border="1"
>
> (Det virker på samme måde i wikitext som i HTML.)
>
>
> Problemet er bare, at der skal oprettes *mange* tabeller i min wiki, i
> de kommende år.
>
> Allerhelst vil jeg modificere wiki'ens CSS sådan at alle tabeller
> automatisk har sat cellpadding, -spacing og borders som ønsket, uden at
> man behøver skrive det i hver enkelt tabel.
>
> Hvis det er umuligt, vil jeg gerne have den enklest og dovnest mulige
> løsning, hvor så meget af arbejdet som muligt kan gøres én gang for
> alle. (Og jeg gætter på at det er via CSS.)
>
Hej Peter

Umiddelbart vil jeg mene, at du kan definere nogle CSS-egenskaber for et
ID eller en class, som du knytter til tabellerne.
Se http://www.html.dk/tutorials/css/lektion7.asp

Måske kan du gøre noget i stil med nedenstående

table.tabelstandard
{
border:1px solid #000000;
border-spacing:3px;
padding:3px;
}

Måske skal der tilføjes nogle egenskaber for celler:

td.padding
{
padding:3px;
}

<table class="tabelstandard">
......

</table>


Venlig hilsen
Martin

---

On 12/07/2010 12:02, Martin Ploug wrote:
> Umiddelbart vil jeg mene, at du kan definere nogle CSS-egenskaber for et
> ID eller en class, som du knytter til tabellerne.

Jeg har godt set at nogle MediaWiki'er vistnok gør det, men så skal jeg
smide en class="ting" ind i hver eneste tabel, og det er det jeg meget
gerne vil undgå.

Hvis jeg skal lave 1000 tabeller, så skal jeg skrive class="ting" 1000
gange, og jeg vil hellere have at CSS'en fortæller browseren at en tabel
som default skal have borders uden at der behøver stå noget som helst i
hver enkelt tabel.

> Se http://www.html.dk/tutorials/css/lektion7.asp

Jeg kigger på det.

> Måske kan du gøre noget i stil med nedenstående
>
> table.tabelstandard
> {
> border:1px solid #000000;
> border-spacing:3px;
> padding:3px;
> }
>
> Måske skal der tilføjes nogle egenskaber for celler:
>
> td.padding
> {
> padding:3px;
> }
>
> <table class="tabelstandard">
> .....

Det er netop den dér jeg meget gerne vil undgå at skulle skrive 1000
gange i samtlige tabeller. (Og især fordi - enkelte - andre også skal
kunne redigere i min wiki, og det skal være så simpelt som muligt for dem).

Så er det næsten lige før jeg bare skal droppe CSS i denne sammenhæng,
og så skrive border="1" i hver tabel, og leve med default spacing og
padding (som vist ikke ligger så langt fra de værdier jeg synes er
optimale. Det har jeg endnu ikke efterprøvet).

> </table>

--
Peter Knutsen

---

Peter Knutsen skrev:

> Kan man bruge CSS til at styre hvordan tabeller
> ser ud som default?
>
> Jeg har lavet denne lille test-tabel i HTML
> <table>
> <tr>
> <td>1</td> <td>2</td>
> </tr>
> <tr>
> <td>3</td> <td>4</td>
> </tr>
> </table>

Ja, det hele kan styres med css, for eksempel:

table{
border:solid 1px #ccc;
border-collapse:collapse;
margin:50px;
width:300px;
}

td, th{
border:solid 1px #ccc;
padding:5px;
text-align:left;
}

Se også: http://vebel.dk/test/tabeltest/

> cellpadding="3" cellspacing="3" border="1"

Det er den gammeldags måde at gøre det på,
og det kræver netop at det sættes ind i samtlige
tabeller.

Med ovenstående kommer alle tabeller til at se
sådan ud - lige indtil du definerer noget andet:

<table id="enanden" summary="enanden">
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>

.... og

#enanden table{
border:solid 3px red;
}
#enanden td{
border:solid 3px green;
}

--
Allan Vebel
http://vebel.dk | http://html-faq.dk
http://webdesigngruppen.dk

---

On 12/07/2010 12:10, Allan Vebel wrote:
> Peter Knutsen skrev:
>
>> Kan man bruge CSS til at styre hvordan tabeller
>> ser ud som default?
>>
>> Jeg har lavet denne lille test-tabel i HTML
>> <table>
>> <tr>
>> <td>1</td> <td>2</td>
>> </tr>
>> <tr>
>> <td>3</td> <td>4</td>
>> </tr>
>> </table>
>
> Ja, det hele kan styres med css, for eksempel:
>
> table{
> border:solid 1px #ccc;

Hvad er det for noget med at bruge tre hex-bogstaver? Jeg har set i
nogle CSS'er fra MediaWiki at man ind imelem kun bruger tre, men jeg er
vant til altid at bruge seks, altså #FFFFFF eller #FFF999CCC.

Er det noget du lige gider fortælle lidt om? (Alt efter hvor godt det
virker lyder det interessant, for jeg synes ikke det er tit jeg har
behov for at styre farverne med 1/256 præcision; ofte er 1/16 nok.)

> border-collapse:collapse;

Og denne her, hvad er det konkret den gør? Jeg har aldrig kunnet
gennemskue det.

> margin:50px;
> width:300px;
> }
>
> td, th{
> border:solid 1px #ccc;
> padding:5px;
> text-align:left;
> }
>
> Se også: http://vebel.dk/test/tabeltest/
>
>> cellpadding="3" cellspacing="3" border="1"
>
> Det er den gammeldags måde at gøre det på,
> og det kræver netop at det sættes ind i samtlige
> tabeller.
>
> Med ovenstående kommer alle tabeller til at se
> sådan ud - lige indtil du definerer noget andet:
>
> <table id="enanden" summary="enanden">

Så behøver jeg altså ikke skrive noget som helst i tabellerne? Altså i
stil med class="ting" og lignende.

Jeg vil straks afprøve det!

(Jeg har i øvrigt lige afprøvet nøgen/default cellspacing/-padding,
altså når man ikke specificerer noget, og det er ubrugeligt grimt.)

> <tr>
> <td>5</td>
> <td>6</td>
> </tr>
> </table>
>
> ... og
>
> #enanden table{
> border:solid 3px red;
> }
> #enanden td{
> border:solid 3px green;
> }

--
Peter Knutsen

---

On 12/07/2010 13:40, Peter Knutsen wrote:
[...]
> Jeg vil straks afprøve det!

Jeg har modificeret CSS'en lidt, og nu passer den næsten til mine
ønsker, bortset fra én ting:

> /* Tables layout*/
> /* First 2 section defines default tables, later additions may define specific types of tables*/
>
> table{
> border:1px solid;
> margin:2px;
> }
>
> td, th{
> border:1px solid;
> padding:3px;
> text-align:left;
> }
>
> /*After this, place sections defining special-purpose tables*/
>
> /* Here ends the inserted section on table layouts*/

Jeg vil gerne have de "traditionelle" 3D-agtige kanter på min tabel, men
når jeg bruger "solid" eller "solid #000000" så får jeg kanter uden
3D-effekten.

Hvad skal jeg skrive i stedet for "solid"? Jeg har prøvet at fjerne
"solid" helt, men så får jeg slet ingen kanter/borders.

Nej hov, der er én ting mere: Når jeg lader en celle i tabellen stå helt
som, så vil jeg gerne have at dens indre kanter forsvinder, sådan som
det sker i almindelig HTML når bare man har sat border ="1". Det gør den
ikke med Allans CSS.

--
Peter Knutsen

---

Peter Knutsen skrev:

> Hvad skal jeg skrive i stedet for "solid"? Jeg
> har prøvet at fjerne "solid" helt, men så får jeg
> slet ingen kanter/borders.

Prøv med:

table{
border:inset 1px #ccc;
/*border-collapse:collapse;*/
border-spacing:1px;
margin:50px;
width:300px;
}

td, th{
border:inset 1px #ccc;
padding:5px;
text-align:left;
}

Så kan du naturligvis ikke bruge border-collapse,
så kan du eksperimentere lidt med border-spacing.

På "border" er muglighed for at bruge:

dotted, dashed, solid, double, groove, ridge, inset,
outset og none

--
Allan Vebel
http://vebel.dk | http://html-faq.dk
http://webdesigngruppen.dk

---

On 12/07/2010 14:20, Allan Vebel wrote:
[...]
> Så kan du naturligvis ikke bruge border-collapse,
> så kan du eksperimentere lidt med border-spacing.

Tak, jeg prøver og melder tilbage.

Angående border-collapse, er det så noget man kan smide i almindelig
HTML? Jeg vil gerne prøve at sammenligne to tabeller, en med og en uden
border-collapse, men jeg gider ikke lige og rode med min wikis CSS for
at lave det.

> På "border" er muglighed for at bruge:
>
> dotted, dashed, solid, double, groove, ridge, inset,
> outset og none

Tak! Nu har jeg lidt at lege med, selv om det lyder som om "inset" er
det jeg vil ha'.

--
Peter Knutsen

---

Den 12-07-2010 15:11, Peter Knutsen skrev:
> On 12/07/2010 14:20, Allan Vebel wrote:
> [...]
>> Så kan du naturligvis ikke bruge border-collapse,
>> så kan du eksperimentere lidt med border-spacing.
>
> Tak, jeg prøver og melder tilbage.
>
> Angående border-collapse, er det så noget man kan smide i almindelig
> HTML? Jeg vil gerne prøve at sammenligne to tabeller, en med og en uden
> border-collapse, men jeg gider ikke lige og rode med min wikis CSS for
> at lave det.
>
>> På "border" er muglighed for at bruge:
>>
>> dotted, dashed, solid, double, groove, ridge, inset,
>> outset og none
>
> Tak! Nu har jeg lidt at lege med, selv om det lyder som om "inset" er
> det jeg vil ha'.
>


> Angående border-collapse, er det så noget man kan smide i almindelig
> HTML? Jeg vil gerne prøve at sammenligne to tabeller, en med og en
> uden border-collapse, men jeg gider ikke lige og rode med min wikis
> CSS for at lave det.

Du kan tilføje style="border-collapse:collapse;" i dit table-tag, men så
skal du måske også lige kunne se en border på tabellen og på cellerne.

Måske noget i stil med:

<table style="border-collapse:collapse;border:1px solid #000000;">

<tr>
<td style="border-collapse:collapse;border:1px solid #000000;">celle</td>
</tr>

</table>

---

Den 12-07-2010 15:17, Martin Ploug skrev:
> Den 12-07-2010 15:11, Peter Knutsen skrev:
>> On 12/07/2010 14:20, Allan Vebel wrote:
>> [...]
>>> Så kan du naturligvis ikke bruge border-collapse,
>>> så kan du eksperimentere lidt med border-spacing.
>>
>> Tak, jeg prøver og melder tilbage.
>>
>> Angående border-collapse, er det så noget man kan smide i almindelig
>> HTML? Jeg vil gerne prøve at sammenligne to tabeller, en med og en uden
>> border-collapse, men jeg gider ikke lige og rode med min wikis CSS for
>> at lave det.
>>
>>> På "border" er muglighed for at bruge:
>>>
>>> dotted, dashed, solid, double, groove, ridge, inset,
>>> outset og none
>>
>> Tak! Nu har jeg lidt at lege med, selv om det lyder som om "inset" er
>> det jeg vil ha'.
>>
>
>
> > Angående border-collapse, er det så noget man kan smide i almindelig
> > HTML? Jeg vil gerne prøve at sammenligne to tabeller, en med og en
> > uden border-collapse, men jeg gider ikke lige og rode med min wikis
> > CSS for at lave det.
>
> Du kan tilføje style="border-collapse:collapse;" i dit table-tag, men så
> skal du måske også lige kunne se en border på tabellen og på cellerne.
>
> Måske noget i stil med:
>
> <table style="border-collapse:collapse;border:1px solid #000000;">
>
> <tr>
> <td style="border-collapse:collapse;border:1px solid #000000;">celle</td>
> </tr>
>
> </table>

Ups, border-collapse:collapse; skal vist ikke også være på cellerne, min
fejl.

---

On 12/07/2010 14:20, Allan Vebel wrote:
[...]
> table{
> border:inset 1px #ccc;
> /*border-collapse:collapse;*/
> border-spacing:1px;
> margin:50px;
> width:300px;
> }
>
> td, th{
> border:inset 1px #ccc;
> padding:5px;
> text-align:left;
> }
[...]

Tak! Nu har jeg 3D-virkningen, altså det at nogle kanter er en mørk
farve og andre kanter er en lysere farve.

Jeg vil dog gerne kunne styre begge farverne, Oh nu ser ud som om at jeg
kun styrer den lyse. Når jeg specificerer #fff så er den lyse kant
næsten umulig at skelne fra baggrunden (som er en #FFFFF0, der skal
ligne lidt pergamentgult). #ccc er bedre (men burde måske egentlig være
#ccccb0), men hvordan styrer jeg den mørke farve?

Eller det kan man måske slet ikke styre?

Jeg forsøgte med

> border:inset 1px #ccc #f00;

Men det virkede ikke. Der var i hvert fald ingen af kanterne der blev røde.

--
Peter Knutsen

---

On 12/07/2010 15:28, Peter Knutsen wrote:
> On 12/07/2010 14:20, Allan Vebel wrote:
> [...]
>> table{
>> border:inset 1px #ccc;
>> /*border-collapse:collapse;*/
>> border-spacing:1px;
>> margin:50px;
>> width:300px;
>> }
>>
>> td, th{
>> border:inset 1px #ccc;
>> padding:5px;
>> text-align:left;
>> }
> [...]
>
> Tak! Nu har jeg 3D-virkningen, altså det at nogle kanter er en mørk
> farve og andre kanter er en lysere farve.

Til gengæld har jeg stadig ikke den effekt, som man har led almindelig
HTML, bare man sætter border="1", hvor en tom celle mangler
inset-effekten, idet dens indre kanter simpelthen ikke tegnes

Sammenlign disse to:

<table border="1" cellpadding="3" cellspacing="3">
<tr>
<td>1</td> <td>2</td> <td>3</td>
</tr>
<tr>
<td>4</td> <td>5</td> <td>6</td>
</tr>
<tr>
<td>7</td> <td>8</td> <td>9</td>
</tr>
</table>

<table border="1" cellpadding="3" cellspacing="3">
<tr>
<td>1</td> <td>2</td> <td>3</td>
</tr>
<tr>
<td>4</td> <td></td> <td>6</td>
</tr>
<tr>
<td>7</td> <td>8</td> <td>9</td>
</tr>
</table>

I den 2. tabel er den midterste celle tom, og det gør at dens indre
kanter ikke bliver tegnet. Det giver en flot virkning og gør det
hurtigere at se hvilke celler der er tomme, altså uden indhold, hvilket
er meget nyttigt for mit projekt, da der vil være en del sådanne tomme
celler.

Hvordan får jeg det med i min CSS? (Man skulle tro at "inset" gjorde det
automatisk, men det er altså ikke tilfældet.)


.... Jeg har lige efterprøvet min test-HTML i forskellige browsere, og
det virker på samme måde i FireFox, Internet Explorer og Opera, altså at
den indre kant ikke tegnes. Til gengæld tegner Chrome (fra Google) den
indre kant.

Jeg bruger normalt Firefox til at browse min lokale wiki, og jeg vil
umiddelbart hævde at det er standard browseradfærd ikke at tegne den
indre kant i en tom celle.

--
Peter Knutsen

---

Peter Knutsen forklarede den 12-07-2010:
8X
> Jeg vil dog gerne kunne styre begge farverne, Oh nu ser ud som om at jeg kun
> styrer den lyse. Når jeg specificerer #fff så er den lyse kant næsten umulig
> at skelne fra baggrunden (som er en #FFFFF0, der skal ligne lidt
> pergamentgult). #ccc er bedre (men burde måske egentlig være #ccccb0), men
> hvordan styrer jeg den mørke farve?

Det lader sig ikke gøre.
Browserne betemmer selv de to farver, når du angiver en type, der
anvender 2 (3D-effekt) - og det er meget forskelligt i forskellige
browsere.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

On 12/07/2010 15:58, Birger Sørensen wrote:
> Peter Knutsen forklarede den 12-07-2010:
> 8X
>> Jeg vil dog gerne kunne styre begge farverne, Oh nu ser ud som om at
>> jeg kun styrer den lyse. Når jeg specificerer #fff så er den lyse kant
>> næsten umulig at skelne fra baggrunden (som er en #FFFFF0, der skal
>> ligne lidt pergamentgult). #ccc er bedre (men burde måske egentlig
>> være #ccccb0), men hvordan styrer jeg den mørke farve?
>
> Det lader sig ikke gøre.
> Browserne betemmer selv de to farver, når du angiver en type, der
> anvender 2 (3D-effekt) - og det er meget forskelligt i forskellige
> browsere.

Jamen hvorfor så angive farven #ccc?

Desuden så det ud som om, da jeg ændrede #ccc til f.eks. #fff, at det
gjorde en forskel.


Desuden vil jeg stadig gerne høre om mit problem med tomme celler, som
ikke opfører sig sådan som tomme celler plejer at gøre, i de browsere
jeg plejer at bruge.

--
Peter Knutsen

---

Peter Knutsen skrev:

> Jamen hvorfor så angive farven #ccc?

Det er en grå farve jeg har valgt, bare for at
kanten ikke skal blive for dominerende.

> Desuden så det ud som om, da jeg ændrede
> #ccc til f.eks. #fff, at det gjorde en forskel.

Ja, så er du gået fra grå til hvid

> Desuden vil jeg stadig gerne høre om mit
> problem med tomme celler

I en tom celler sætter du en No Break Space:

<td>&nbsp;</td>

Så skulle den opføre sig normalt.

--
Allan Vebel
http://vebel.dk | http://html-faq.dk
http://webdesigngruppen.dk

---

Allan Vebel sendte dette med sin computer:
> Peter Knutsen skrev:
>
>> Jamen hvorfor så angive farven #ccc?
>
> Det er en grå farve jeg har valgt, bare for at
> kanten ikke skal blive for dominerende.
>
>> Desuden så det ud som om, da jeg ændrede
>> #ccc til f.eks. #fff, at det gjorde en forskel.
>
> Ja, så er du gået fra grå til hvid
>
>> Desuden vil jeg stadig gerne høre om mit
>> problem med tomme celler
>
> I en tom celler sætter du en No Break Space:
>
> <td>&nbsp;</td>
>
> Så skulle den opføre sig normalt.

Jeg tror Peter er efter, ikke at have border om ikke udfyldte celler.
Eller vel rettere, ikke den halve border. Men jeg tror ikke det virker
med CSS. Der er borderen jo sat til at collapse - altså naboceller
deler samme border, og efter som der står noget i nabocellen, skal
borderen tegnes.
Jeg har i øvrigt ikke megen erfaring med "moderne" tabeller - bruger
det kun i sjældne tilfælde til tabulære data, som de er beregnet til,
og har ikke haft brug for en masse fancy præsentation af data.
Faktisk bruger jeg egentlig hellere div'er, og styrer visningen med
CSS, og finder det ofte nemmere.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Birger Sørensen skrev:

> Jeg tror Peter er efter, ikke at have border om
> ikke udfyldte celler. Eller vel rettere, ikke den
> halve border.

Han må jo bare eksperimentere med det det, til
det ser tilfredsstillende ud - jeg har givet mit bud.

Der findes tonsvis af andre bud på nettet, det er
bare at søge.

Jeg skulle bare lige sætte ham i gang, fordi han
var lidt rusten.

--
Allan Vebel
http://vebel.dk | http://html-faq.dk
http://webdesigngruppen.dk

---

On 13/07/2010 00:28, Allan Vebel wrote:
> Birger Sørensen skrev:
>
>> Jeg tror Peter er efter, ikke at have border om
>> ikke udfyldte celler. Eller vel rettere, ikke den
>> halve border.
>
> Han må jo bare eksperimentere med det det, til
> det ser tilfredsstillende ud - jeg har givet mit bud.

Jeg ved slet ikke hvad jeg kan eksperimentere med. Jeg kan ikke få øje
på ting jeg kan justere.

> Der findes tonsvis af andre bud på nettet, det er
> bare at søge.
>
> Jeg skulle bare lige sætte ham i gang, fordi han
> var lidt rusten.

Jeg kunne kun en lille bitte smule CSS, dér for nogle år siden, og mine
forsøg på at Google-søge på CSS giver ikke rigtig noget om tabeller.

--
Peter Knutsen

---

Peter Knutsen skrev:

> Jeg ved slet ikke hvad jeg kan eksperimentere
> med. Jeg kan ikke få øje på ting jeg kan justere.

Border!

> Jeg kunne kun en lille bitte smule CSS, dér for
> nogle år siden, og mine forsøg på at Google-søge
> på CSS giver ikke rigtig noget om tabeller.

På
http://hjemmesideskolen.dk/html/css2.php?id=css10
skal du finde alt hvad der står om border.

Det har ikke så meget med tabeller at gøre - border
kan bruges på mange andre elementer, og det er
nemt at styre med css, se også:

http://vebel.dk/test/tabeltest2/

--
Allan Vebel
http://vebel.dk | http://html-faq.dk
http://webdesigngruppen.dk

---

On 12/07/2010 23:54, Birger Sørensen wrote:
> Allan Vebel sendte dette med sin computer:
>> Peter Knutsen skrev:
>>> Desuden vil jeg stadig gerne høre om mit
>>> problem med tomme celler
>>
>> I en tom celler sætter du en No Break Space:
>>
>> <td>&nbsp;</td>
>>
>> Så skulle den opføre sig normalt.
>
> Jeg tror Peter er efter, ikke at have border om ikke udfyldte celler.

Ja, netop.

> Eller vel rettere, ikke den halve border. Men jeg tror ikke det virker
> med CSS. Der er borderen jo sat til at collapse - altså naboceller deler

Jeg har ikke collapse-tingen med i min CSS.

> samme border, og efter som der står noget i nabocellen, skal borderen
> tegnes.

Nej, mine celler har hver deres border.

> Jeg har i øvrigt ikke megen erfaring med "moderne" tabeller - bruger det
> kun i sjældne tilfælde til tabulære data, som de er beregnet til, og har
> ikke haft brug for en masse fancy præsentation af data.
> Faktisk bruger jeg egentlig hellere div'er, og styrer visningen med CSS,
> og finder det ofte nemmere.

Det er muligt jeg skal droppe at bruge CSS til tabeller, så. Så skal
hver tabel bare indeholde instukser om spacing, padding og border.
Såvidt jeg husker så opfører sådanne tabeller sig normalt.

Jeg prøver lige at #'e tabel-delen af min CSS, og lave en normal tabel
med en eller to tomme celler, for at se om den gør som jeg vil ha'.

--
Peter Knutsen

---

On 13/07/2010 10:30, Peter Knutsen wrote:
> Det er muligt jeg skal droppe at bruge CSS til tabeller, så. Så skal
> hver tabel bare indeholde instukser om spacing, padding og border.
> Såvidt jeg husker så opfører sådanne tabeller sig normalt.
>
> Jeg prøver lige at #'e tabel-delen af min CSS, og lave en normal tabel
> med en eller to tomme celler, for at se om den gør som jeg vil ha'.

Det gør den ikke. Der er stadig kant om den tomme celle. Æv.

--
Peter Knutsen

---

On 13/07/2010 10:36, Peter Knutsen wrote:
> On 13/07/2010 10:30, Peter Knutsen wrote:
>> Det er muligt jeg skal droppe at bruge CSS til tabeller, så. Så skal
>> hver tabel bare indeholde instukser om spacing, padding og border.
>> Såvidt jeg husker så opfører sådanne tabeller sig normalt.
>>
>> Jeg prøver lige at #'e tabel-delen af min CSS, og lave en normal tabel
>> med en eller to tomme celler, for at se om den gør som jeg vil ha'.
>
> Det gør den ikke. Der er stadig kant om den tomme celle. Æv.

Jeg har ved at læse op på wikitext (i WikiBooks, en samling af "bøger")
fundet ud af at jeg kan slå den indre kant fra, i den enkelte celle, ved
at skrive

style="border:none"

inden i den.

Det skal så bare skrives i *alle* tomme celler, hvilket jeg synes er ret
uelegant. Netop sådan noget som man skulle tro CSS kunne håndtere.

--
Peter Knutsen

---

On 13/07/2010 10:58, Peter Knutsen wrote:
> Jeg har ved at læse op på wikitext (i WikiBooks, en samling af "bøger")
> fundet ud af at jeg kan slå den indre kant fra, i den enkelte celle, ved
> at skrive
>
> style="border:none"
>
> inden i den.
>
> Det skal så bare skrives i *alle* tomme celler, hvilket jeg synes er ret
> uelegant. Netop sådan noget som man skulle tro CSS kunne håndtere.

Nu har jeg selv fundet noget, der ser *meget* brugbart og ultra-relevant ud.
< http://www.w3.org/TR/CSS2/tables.html#empty-cells >

Jeg vil lige prøve om jeg selv kan få lirket det ind i min CSS for
tabeller, og i fald det ikke virker, så spørger jeg om yderligere hjælp.

Mit gæt er dog, at MediaWiki's CSS allerede indeholder den pågældende
kommando slået fra, så spørgsmålet er om jeg kan "override" den.

--
Peter Knutsen

---

On 13/07/2010 15:45, Peter Knutsen wrote:
> Nu har jeg selv fundet noget, der ser *meget* brugbart og ultra-relevant
> ud.
> < http://www.w3.org/TR/CSS2/tables.html#empty-cells >
>
> Jeg vil lige prøve om jeg selv kan få lirket det ind i min CSS for
> tabeller, og i fald det ikke virker, så spørger jeg om yderligere hjælp.

Det virkede!

> Mit gæt er dog, at MediaWiki's CSS allerede indeholder den pågældende
> kommando slået fra, så spørgsmålet er om jeg kan "override" den.

Jeg prøvede også at søge CSS'en igennem, og der stod ikke noget om tomme
celler, så hvis der er noget der styrer det (og det er der jo nok) så må
det ligge i en mere overordnet CSS. Det vigtigste er også at den CSS jeg
redigerer i kan "override" den mere overordnede, og det kan den jo.

--
Peter Knutsen

---

Peter Knutsen frembragte:
> On 13/07/2010 15:45, Peter Knutsen wrote:
>> Nu har jeg selv fundet noget, der ser *meget* brugbart og ultra-relevant
>> ud.
>> < http://www.w3.org/TR/CSS2/tables.html#empty-cells >
>>
>> Jeg vil lige prøve om jeg selv kan få lirket det ind i min CSS for
>> tabeller, og i fald det ikke virker, så spørger jeg om yderligere hjælp.
>
> Det virkede!
>
>> Mit gæt er dog, at MediaWiki's CSS allerede indeholder den pågældende
>> kommando slået fra, så spørgsmålet er om jeg kan "override" den.
>
> Jeg prøvede også at søge CSS'en igennem, og der stod ikke noget om tomme
> celler, så hvis der er noget der styrer det (og det er der jo nok) så må det
> ligge i en mere overordnet CSS. Det vigtigste er også at den CSS jeg
> redigerer i kan "override" den mere overordnede, og det kan den jo.

Det kommer an på..
Generelt, vil den senest angivne være den der anvendes.
Men der er regler, som at klasser for id'er overrider klasser for
class, som overrider for tags - og hvis du skriver det i HTML-tagget,
overrider det alt andet - hvis ikke een af dem er angivet med
!important, for så er det anderledes... med forbehold, for det er
simpelthen ikke til at huske.
Kan være du for table skal angive empty-cells,
table {
   empty-cells : hide !important;
}
for at være sikker på den ikke overskrives - i hvert fald så sikker du
kan blive.
http://www.w3.org/TR/CSS2/cascade.html#important-rules

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

On 13/07/2010 17:12, Birger Sørensen wrote:
[...]
> Kan være du for table skal angive empty-cells,
> table {
> empty-cells : hide !important;
> }
> for at være sikker på den ikke overskrives - i hvert fald så sikker du
> kan blive.
> http://www.w3.org/TR/CSS2/cascade.html#important-rules

Tak, jeg har smidt !Important ind ved empty-cells, og også ved border.

--
Peter Knutsen

---

On 12/07/2010 20:29, Allan Vebel wrote:
> Peter Knutsen skrev:
>
>> Jamen hvorfor så angive farven #ccc?
>
> Det er en grå farve jeg har valgt, bare for at
> kanten ikke skal blive for dominerende.

Jamen så styrer jeg jo også et eller andet med farve, selv om Birger
skrev at jeg ikke kan styre det overhovedet.

>> Desuden så det ud som om, da jeg ændrede
>> #ccc til f.eks. #fff, at det gjorde en forskel.
>
> Ja, så er du gået fra grå til hvid

Ja, det må være den lyse farve jeg styrer. Men den mørke farve kan ikke
styres?

>> Desuden vil jeg stadig gerne høre om mit
>> problem med tomme celler
>
> I en tom celler sætter du en No Break Space:
>
> <td>&nbsp;</td>
>
> Så skulle den opføre sig normalt.

Det gør den ikke.

--
Peter Knutsen

---

Peter Knutsen skrev den 13-07-2010:
> On 12/07/2010 20:29, Allan Vebel wrote:
>> Peter Knutsen skrev:
>>
>>> Jamen hvorfor så angive farven #ccc?
>>
>> Det er en grå farve jeg har valgt, bare for at
>> kanten ikke skal blive for dominerende.
>
> Jamen så styrer jeg jo også et eller andet med farve, selv om Birger skrev at
> jeg ikke kan styre det overhovedet.
>
>>> Desuden så det ud som om, da jeg ændrede
>>> #ccc til f.eks. #fff, at det gjorde en forskel.
>>
>> Ja, så er du gået fra grå til hvid
>
> Ja, det må være den lyse farve jeg styrer. Men den mørke farve kan ikke
> styres?
>
>>> Desuden vil jeg stadig gerne høre om mit
>>> problem med tomme celler
>>
>> I en tom celler sætter du en No Break Space:
>>
>> <td>&nbsp;</td>
>>
>> Så skulle den opføre sig normalt.
>
> Det gør den ikke.

http://bbsorensen.com/test/tabel/
Så er der lidt at lege med, og det er ret enkelt.
Hvis du åbner den i forskellige browsere, vil du også se, at de
forskellige browsere, ikke giver samme resultat mht 3D virkning af
farvevalg.
FF og Opera, giver her effekten, mens IE er flad, og Chrome lidt af
hvert.
Man kan godt styre farverne selv, men kun den ene for typerne groove og
ridge.
Man skal så angive border-top-color osv, for elementerne. Det kan jo
gøres generelt i css'en, så det burde kunne lade sig gøre at
eksperimentere sig til et brugbart resultat, der er ens i forskellige
browsere.

Se iøvrigt
http://www.w3.org/TR/CSS21/tables.html
og/eller de enkelte properties
http://www.w3.org/TR/CSS21/propidx.html

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Peter Knutsen skrev:

> Hvad er det for noget med at bruge tre
> hex-bogstaver? Jeg har set i nogle CSS'er fra
> MediaWiki at man ind imelem kun bruger tre,
> men jeg er vant til altid at bruge seks, altså
> #FFFFFF eller #FFF999CCC.

Skal farven bare være hvis, er det underordnet
om du skriver #fff eller #ffffff. De seks karakterer
giver blot nogle flere kombinationsmuligheder:

Se også
http://hjemmesideskolen.dk/html/256farve.php
og
http://hjemmesideskolen.dk/html/nyside.php?id=ns5

>> border-collapse:collapse;
>
> Og denne her, hvad er det konkret den gør? Jeg
> har aldrig kunnet gennemskue det.

Den klapper kanten sammen, så der ikke er nogen
afstand - prøv det, og du vil få meget større indsigt
i funktionen.

> Så behøver jeg altså ikke skrive noget som helst i
> tabellerne? Altså i stil med class="ting" og lignende.

Nej, kun dem der skal se anderledes ud.

--
Allan Vebel
http://vebel.dk | http://html-faq.dk
http://webdesigngruppen.dk

---

Peter Knutsen skrev:
> On 12/07/2010 12:10, Allan Vebel wrote:
>> Peter Knutsen skrev:
>>
>>> Kan man bruge CSS til at styre hvordan tabeller
>>> ser ud som default?
>>>
>>> Jeg har lavet denne lille test-tabel i HTML
>>> <table>
>>> <tr>
>>> <td>1</td> <td>2</td>
>>> </tr>
>>> <tr>
>>> <td>3</td> <td>4</td>
>>> </tr>
>>> </table>
>>
>> Ja, det hele kan styres med css, for eksempel:
>>
>> table{
>> border:solid 1px #ccc;
>
> Hvad er det for noget med at bruge tre hex-bogstaver? Jeg har set i nogle
> CSS'er fra MediaWiki at man ind imelem kun bruger tre, men jeg er vant til
> altid at bruge seks, altså #FFFFFF eller #FFF999CCC.

http://www.w3.org/TR/CSS21/syndata.html#color-units

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk