|
| Styring af tabeller via CSS Fra : jnm |
Dato : 23-10-05 12:23 |
|
Jeg har brug for at styre tabeller via CSS, men savner lidt overblik.
Findes der ikke en guide, tutorial eller et eksempel hvor jeg kan se "
musikken spille".
Jeg vil gerne kunne styre samtlige tabellens egenskaber og dens placering på
siden ved at lave den indenfor et par <div> tags og på den måde lave flere
forskellige tabel design.
På forhånd tak
Jørgen
| |
Jørn Andersen (23-10-2005)
| Kommentar Fra : Jørn Andersen |
Dato : 23-10-05 14:33 |
|
On Sun, 23 Oct 2005 13:23:07 +0200, "jnm" <mqm@mail.tele.dk> wrote:
>Jeg har brug for at styre tabeller via CSS, men savner lidt overblik.
>
>Findes der ikke en guide, tutorial eller et eksempel hvor jeg kan se "
>musikken spille".
>
>Jeg vil gerne kunne styre samtlige tabellens egenskaber og dens placering på
>siden ved at lave den indenfor et par <div> tags og på den måde lave flere
>forskellige tabel design.
En start kunne være:
Hjemmesideskolen - Tabellers opbygning
<url: http://www.hjemmesideskolen.dk/html/tabel.asp>
- selv om den ikke helt konsekvent bruger CSS
Eksempler på brug af table-layout
<url: http://www.hjemmesideskolen.dk/html/testsider/tablelayout.asp>
Desuden mener jeg, at jeg har set endnu en side på samme site med
noget forskelligt tabel-farvelade , men den kan jeg ikke finde lige
nu.
Og så må vi ikke glemme:
Cascading Style Sheets, level 2
CSS2 Specification
17 Tables
<url: http://www.w3.org/TR/REC-CSS2/tables.html>
Good luck,
Jørn
--
Jørn Andersen,
Brønshøj
| |
Erik Ginnerskov (23-10-2005)
| Kommentar Fra : Erik Ginnerskov |
Dato : 23-10-05 23:09 |
| | |
Allan Vebel (23-10-2005)
| Kommentar Fra : Allan Vebel |
Dato : 23-10-05 14:40 |
|
jnm skrev:
> Findes der ikke en guide, tutorial eller et eksempel
> hvor jeg kan se "musikken spille".
Jeg har lavet en række eksempler for et par år siden,
du kan sikkert finde inspiration her:
http://html-faq.dk/2006.asp
--
Allan Vebel
http://html-faq.dk
| |
Jørn Andersen (23-10-2005)
| Kommentar Fra : Jørn Andersen |
Dato : 23-10-05 15:17 |
|
On Sun, 23 Oct 2005 15:40:00 +0200, "Allan Vebel" <spam@do.not> wrote:
>Jeg har lavet en række eksempler for et par år siden,
>du kan sikkert finde inspiration her:
>
> http://html-faq.dk/2006.asp
Nå, det var dér jeg havde set den ...
Mvh. Jørn
--
Jørn Andersen,
Brønshøj
| |
Jørn Andersen (23-10-2005)
| Kommentar Fra : Jørn Andersen |
Dato : 23-10-05 15:24 |
|
On Sun, 23 Oct 2005 15:40:00 +0200, "Allan Vebel" <spam@do.not> wrote:
>Jeg har lavet en række eksempler for et par år siden,
>du kan sikkert finde inspiration her:
>
> http://html-faq.dk/2006.asp
Lige et spørgsmål:
Hvordan erstatter man cellspacing="0" med noget CSS?
Mvh. Jørn
--
Jørn Andersen,
Brønshøj
| |
Allan Vebel (23-10-2005)
| Kommentar Fra : Allan Vebel |
Dato : 23-10-05 16:09 |
|
Jørn Andersen skrev:
> Hvordan erstatter man cellspacing="0" med noget
> CSS?
Prøv at lege lidt med border-collapse:collapse; - det
skulle kunne gøre det. Eksempel:
table{
border:2px solid blue;
border-collapse:collapse;
}
td,th{
border:2px solid red;
padding:3px;
}
Det er border-collapse:collapse; jeg har brugt på
http://html-faq.dk/2006.asp?xstyle=tabelstyle0.css
--
Allan Vebel
http://html-faq.dk
| |
Jørn Andersen (23-10-2005)
| Kommentar Fra : Jørn Andersen |
Dato : 23-10-05 16:43 |
|
On Sun, 23 Oct 2005 17:09:23 +0200, "Allan Vebel" <spam@do.not> wrote:
>> Hvordan erstatter man cellspacing="0" med noget
>> CSS?
>
>Prøv at lege lidt med border-collapse:collapse; - det
>skulle kunne gøre det. Eksempel:
Tak - jeg havde ellers prøvet at lege med border-collapse, men havde
en fejl i mine selektorer, så den havde ikke den store effekt
Mvh. Jørn
--
Jørn Andersen,
Brønshøj
| |
Erik Ginnerskov (23-10-2005)
| Kommentar Fra : Erik Ginnerskov |
Dato : 23-10-05 23:13 |
|
Jørn Andersen wrote:
> Lige et spørgsmål:
> Hvordan erstatter man cellspacing="0" med noget CSS?
Som Allan skrev, kan cellspacing="0" erstattes med
bordercollapse:collapse; - men hvis du vil have en anden værdi end nul på
din cellspacing, er du nødt til at bruge html-definitionen for at få IE med.
Og cellspacing er stadig valid kode - også i strict.
--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://html-faq.dk/
| |
jnm (24-10-2005)
| Kommentar Fra : jnm |
Dato : 24-10-05 07:49 |
|
Tak for hintene, tågerne letter, men langsomt.
Jeg har lavet en tabel "table1" med denne kode:
<DIV id="table1">
<table>
<caption>Test tabel</caption>
<tr>
<th>Kol 1</th>
<th>Kol 2</th>
</tr>
<tr>
<td>Felt 1.1</td>
<td>Felt 1.2</td>
</tr>
<tr>
<td>Felt 2.1</td>
<td>Felt 2.2</td>
</tr>
</table>
</div>
I mit eksterne style sheet har jeg følgende kode til styring af "table1"
#table1 table {margin-left: 10pt; width:250px; cellspacing:0px;}
#table1 th {font-family: arial; font-size: 12px; color: red; border: solid
1px navy;}
#table1 td {font-family: arial; font-size: 16px; color: black; border: solid
1px navy; }
#table1 caption {font-family: arial; font-size: 16px; font-weight: bold;
color: green;}
Det virker med undtagelse af en ting, som jeg ikke kan få fod på.
Jeg kan ikke få cellernes kanter til at flyde sammen. Jeg får 9 celler med
hver sin ramme og et mellemrum mod nabocellerne. Jeg troede at
cellspacing:0px ville løse dette problem.
Jørgen
| |
Dennis Munding (24-10-2005)
| Kommentar Fra : Dennis Munding |
Dato : 24-10-05 09:44 |
| | |
jnm (24-10-2005)
| Kommentar Fra : jnm |
Dato : 24-10-05 10:04 |
|
Hej Dennis
"Dennis Munding" <mail@invalid.com> skrev i en meddelelse
> cellspacing skal lægges direkte i html'en for at virke - altså i dit
> table-tag:
> table cellspacing="0">
Det havde jeg en anelse om, men troede ikke rigtigt på det. Det er da
urimeligt at man kan styre alt muligt andet, men ikke dette.
Jørgen
| |
jnm (24-10-2005)
| Kommentar Fra : jnm |
Dato : 24-10-05 10:21 |
|
Hej
Når jeg anvender < table cellspacing="0">
Får jeg et spøjst resultat idet der er tale om doppelt streger hvor to
celler møder hinanden. Det ser ikke godt ud! Hvordan undgår jeg det??
Jeg har prøvet med BorderCollapse, men kan ikke få det til at virke.
I CSS har jeg prøvet
#table2 style {border-collapse: collapse; }
I selve siden har jeg prøvet
<table width="96%" cellspacing= "0" style="border-collapse: collapse;">
mvh
Jørgen
"jnm" <mqm@mail.tele.dk> skrev i en meddelelse
news:435ca308$0$38666$edfadb0f@dread12.news.tele.dk...
> Hej Dennis
> "Dennis Munding" <mail@invalid.com> skrev i en meddelelse
> > cellspacing skal lægges direkte i html'en for at virke - altså i dit
> > table-tag:
> > table cellspacing="0">
> Det havde jeg en anelse om, men troede ikke rigtigt på det. Det er da
> urimeligt at man kan styre alt muligt andet, men ikke dette.
>
> Jørgen
>
>
| |
Erik Ginnerskov (24-10-2005)
| Kommentar Fra : Erik Ginnerskov |
Dato : 24-10-05 21:20 |
| | |
Jørn Andersen (23-10-2005)
| Kommentar Fra : Jørn Andersen |
Dato : 23-10-05 16:14 |
|
On Sun, 23 Oct 2005 15:40:00 +0200, "Allan Vebel" <spam@do.not> wrote:
>Jeg har lavet en række eksempler for et par år siden,
>du kan sikkert finde inspiration her:
>
> http://html-faq.dk/2006.asp
Forresten, skal:
border:solid 5px red;
ikke være
border:5px solid red;
- ?
Mvh. Jørn
--
Jørn Andersen,
Brønshøj
| |
Knud Gert Ellentoft (23-10-2005)
| Kommentar Fra : Knud Gert Ellentoft |
Dato : 23-10-05 17:47 |
| | |
Jens Gyldenkærne Cla~ (24-10-2005)
| Kommentar Fra : Jens Gyldenkærne Cla~ |
Dato : 24-10-05 10:57 |
|
jnm skrev:
> Når jeg anvender < table cellspacing="0">
> Får jeg et spøjst resultat idet der er tale om doppelt streger
> hvor to celler møder hinanden. Det ser ikke godt ud!
Må vi se din side (giv et link til en online udgave).
> I CSS har jeg prøvet
> #table2 style {border-collapse: collapse; }
"style" hører ikke hjemme i en css-selektor.
Prøv evt. med:
#table2, #table2 td{ border-collapse: collapse; }
NB: Læs gerne min signatur.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html
| |
jnm (24-10-2005)
| Kommentar Fra : jnm |
Dato : 24-10-05 13:24 |
|
"Jens Gyldenkærne Clausen" <jens@gyros.invalid> skrev i en meddelelse
> "style" hører ikke hjemme i en css-selektor.
>
> Prøv evt. med:
>
> #table2, #table2 td{ border-collapse: collapse; }
>
Den forstår jeg ikke
Jeg har indsat den i mit CSS, men det virker ikke. Er det slet ikke muligt.
Jeg ville geren være fri for at skulle lave indstillinger ud over at vælge
tabellens geografi.
I stedet har jeg prøvet med
<table width="96%" cellspacing= "0" style="border-collapse: collapse;">
det virker fint.
Mit problembarn er at finde på min hjemmeside under knappen kontakt og
linket i bunden Link til eksperimenter...
http://www.mqmanagement.dk/eksperimenter/test.htm
I bunden af denne side er der et link til mit CSS, som hos mig åbner i
FrontPage.
Jørgen
| |
Dennis Munding (24-10-2005)
| Kommentar Fra : Dennis Munding |
Dato : 24-10-05 17:25 |
|
Hej igen Jørgen!
"jnm" <mqm@mail.tele.dk> skrev i en meddelelse
news:435cd1f9$0$38669$edfadb0f@dread12.news.tele.dk...
> > #table2, #table2 td{ border-collapse: collapse; }
> >
> Den forstår jeg ikke
Jens mener, at du i dit stylesheet - hvor du har definationerne til
#table2 - skal tilføje border-collapse:collapse;...
Hvis du gør det, er det unødvendigt at skrive cellspacing="0" i dit
table-tag.....
> I stedet har jeg prøvet med
> <table width="96%" cellspacing= "0" style="border-collapse: collapse;">
> det virker fint.
Her laver du sådan set dobbelt-arbejde - du skal enten vælge cellspacing="0"
eller border-collapse:collapse - ikke begge dele, det er der ingen grund
til...
Vi opsumerer lige - vælg en af følgende løsninger:
1) I dit stylesheet tilføjer du: border-collapse:collapse; i definationerne
for #table2....
2) I dit table-tag indsætter du: cellspacing="0"....
Ikke begge dele - det virker - har selv testet det!
Med venlig hilsen
--
Dennis Munding
Web-master
http://www.skovaa-munding.dk/ http://www.mundings-memorial.dk/
http://www.cantica.dk/ http://www.eds-denmark.dk/
| |
Jens Gyldenkærne Cla~ (24-10-2005)
| Kommentar Fra : Jens Gyldenkærne Cla~ |
Dato : 24-10-05 13:48 |
| | |
jnm (24-10-2005)
| Kommentar Fra : jnm |
Dato : 24-10-05 14:25 |
|
"Jens Gyldenkærne Clausen" <jens@gyros.invalid> skrev i en meddelelse
> Tak for linket. Du har en del fejl i såvel html- som css-koden -
> start med at kigge på dem.
Jeg var ikke klar over at siden var så syg. Den virkede jo med den direkte
Border collapse indsat.
Jeg forstår godt en hentydning. Det må alt andet være nemmere at hjælpe hvis
grundlaget er i orden.
Jeg har sidst prøvet at validere for et par år siden, så jeg er ikke helt
emd på alle fejlmeldingerne.
> NB: Du kan spare en hel del kode ved at bruge mere css end du gør
> nu - der er fx ingen grund til at angive align="center" på samtlige
> tabelceller, og tilsvarende er det ikke nødvendigt at angive
> bredder på kolonnerne mere end én gang.
Ja den er jeg med på, men er ikke kommet dertil endnu.
Jørgen
| |
Tidemann (24-10-2005)
| Kommentar Fra : Tidemann |
Dato : 24-10-05 17:31 |
|
Hvis du sætter border-collapse på #table2 table
#table2 table {
width:96%;
margin-left: 10pt;
border: 0;
border-collapse: collapse;
}
får du en enkelt streg!
Du kan omdøbe dine overskrifter i tabellen:
#table2 th {
font-family: arial;
font-size: 14px;
color: red;
border: 1px solid navy;
text-align: center;
}
..table2 9%{
width: 9%;
}
..table2 6%{
width: 6%;
}
..table2 65%{
width: 65%;
}
..table2 10%{
width: 10%;
}
#table2 td {
font-family: arial;
font-size: 14px;
color: red;
border: 1px solid navy;
text-align: center;
}
og gi hver overskrift en class:
<th class="table2 9%">Page ID</th>
<th class="table2 6%">Issue</th>
<th class="table2 65%">Description and changes</th>
<th class="table2 10%">Approver</th>
<th class="table2 10%">Date</th>
når du gir´ dem class i stedet for id kan de benyttes flere gange på samme
side!
--
Venlig hilsen
Marianne
design af: - www.ragdollys-cat-link.dk - www.dhejne.dk
www.formdinfremtid.dk - www.royalmontana.dk
| |
jnm (24-10-2005)
| Kommentar Fra : jnm |
Dato : 24-10-05 17:36 |
|
Jeg har nu været igennem skærsilden.
CSS er valideret via jigsaw.w3.org/css-validator og alle fejlene er rettede.
Der er endnu et antal advarsler eller forslag til forbedringer, men jeg kan
ikke nå mere før på fredag.
Selve testsiden har jeg valideret validator.w3.org og har fjernet alle
fejlene vedrørende HTML, men kan ikke klare de sidste 5 fejl, der alle har
at gøre med de java scripts, jeg anvender på siden.
Er der en behejrtet sjæl, der vil prøve at sepå min testside placeret her.
Link til eksperimenter...
http://www.mqmanagement.dk/eksperimenter/test.htm
I bunden af denne side er der et link til mit CSS, som hos mig åbner i
FrontPage.
mvh
Jørgen
| |
Tidemann (24-10-2005)
| Kommentar Fra : Tidemann |
Dato : 24-10-05 17:59 |
|
"jnm" <mqm@mail.tele.dk> skrev i en meddelelse
news:435d0ce8$0$38618$edfadb0f@dread12.news.tele.dk...
> Jeg har nu været igennem skærsilden.
>
> CSS er valideret via jigsaw.w3.org/css-validator og alle fejlene er rettede.
> Der er endnu et antal advarsler eller forslag til forbedringer, men jeg kan
> ikke nå mere før på fredag.
>
> Selve testsiden har jeg valideret validator.w3.org og har fjernet alle
> fejlene vedrørende HTML, men kan ikke klare de sidste 5 fejl, der alle har
> at gøre med de java scripts, jeg anvender på siden.
>
> Er der en behejrtet sjæl, der vil prøve at sepå min testside placeret her.
> Link til eksperimenter...
> http://www.mqmanagement.dk/eksperimenter/test.htm
>
> I bunden af denne side er der et link til mit CSS, som hos mig åbner i
> FrontPage.
>
Det skal være onload, onresize og onscroll.
Altså med små bogstaver!
Tror jeg
Kan ikke huske om det er sådan:
<script type="text/javascript">
--
Venlig hilsen
Marianne
design af: - www.ragdollys-cat-link.dk - www.dhejne.dk
www.formdinfremtid.dk - www.royalmontana.dk
| |
Jens Gyldenkærne Cla~ (25-10-2005)
| Kommentar Fra : Jens Gyldenkærne Cla~ |
Dato : 25-10-05 11:13 |
|
jnm skrev:
> Selve testsiden har jeg valideret validator.w3.org og har
> fjernet alle fejlene vedrørende HTML, men kan ikke klare de
> sidste 5 fejl, der alle har at gøre med de java scripts, jeg
> anvender på siden.
1: required attribute "type" not specified
Ret <script language="JavaScript"> til
<script type="text/javascript">
2: end tag for "meta" omitted
Ret <meta ...> til <meta ... />
3: there is no attribute "onLoad"
Ret onLoad til onload (såvel elementer som parametre skal skrives
med småt i xhtml)
4-5: there is no attribute "onResize" / "onScroll"
onResize og onScroll er ikke standardiserede hændelser. Hvis de
fandtes i xhtml, skulle de skrives onresize og onscroll, men det
vil ikke hjælpe at ændre dem.
Du kan se de hændelser der er listet i html-standarden her:
< http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.3>
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html
| |
jnm (28-10-2005)
| Kommentar Fra : jnm |
Dato : 28-10-05 12:43 |
|
"Jens Gyldenkærne Clausen" <jens@gyros.invalid> skrev
>
> 4-5: there is no attribute "onResize" / "onScroll"
>
> onResize og onScroll er ikke standardiserede hændelser. Hvis de
> fandtes i xhtml, skulle de skrives onresize og onscroll, men det
> vil ikke hjælpe at ændre dem.
Hej Jens
Nu har jeg været inde og rette det, jeg kunne.
Når jeg nu validerer min HTML side får jeg følgende nedenstående svada:
Errors and Warnings
Line 16, character 55:
.... der" content="none; default">
^Error: end tag for meta omitted; end tags
are required in XML for non-empty elements; empty elements require an end
tag or the start tag must end with />
Line 16, character 1:
<meta name="Microsoft Border" content="none; default">
^start tag was here
Line 19, character 38:
.... load="setcorners()" onresize="setcorners()" onscroll="setcor ...
^Error: there is no attribute onresize for
this element (in this HTML version)
Line 19, character 62:
.... size="setcorners()" onscroll="setcorners()"><!--msnavigation ...
^Error: there is no attribute onscroll for
this element (in this HTML version)
Line 21, character 62:
.... ><strong></strong></font><br>
^Error: end tag for br omitted; end tags
are required in XML for non-empty elements; empty elements require an end
tag or the start tag must end with />
Line 21, character 58:
.... ="6"><strong></strong></font><br>
^start tag was here
Mine kommentarer:
Linie 16 er underlig. Jeg har indsat en /> sluttag, men den bliver anulleret
af FrontPage og derfor ikke synlig for validator. Det gør jo ikke livet
nemmere.
Vedrørende linierne 19 og 21 er jeg lidt på herrenns mark. Koden virker, men
kan ikke validere.
Hvad gør man så, hvis man skal opføre sig ordentligt/fornuftigt. Jeg er ikke
en "kodeørn"
mvh
Jørgen
| |
Tidemann (28-10-2005)
| Kommentar Fra : Tidemann |
Dato : 28-10-05 23:54 |
|
"jnm" skrev
> Mine kommentarer:
>
> Linie 16 er underlig. Jeg har indsat en /> sluttag, men den bliver anulleret
> af FrontPage og derfor ikke synlig for validator. Det gør jo ikke livet
> nemmere.
>
Det kan ændres i FP´s funktioner -- sideindstillinger -- html-kilde og flueben
ved "gem eksisterende HTML-koder"
Jeg havde også problemer med det engang!
--
Venlig hilsen
Marianne
design af: - www.ragdollys-cat-link.dk - www.dhejne.dk
www.formdinfremtid.dk - www.royalmontana.dk
| |
Jens Gyldenkærne Cla~ (28-10-2005)
| Kommentar Fra : Jens Gyldenkærne Cla~ |
Dato : 28-10-05 20:13 |
|
jnm skrev:
> Linie 16 er underlig. Jeg har indsat en /> sluttag, men den
> bliver anulleret af FrontPage og derfor ikke synlig for
> validator.
Editorer der ændrer i den kode man selv skriver er en pestillens.
Jeg ved ikke hvad det er for en Frontpage-version du benytter, men
tidligere udgaver af programmet er notorisk berygtede for at
indlægge "snavs" i koden - og rette bag ens ryg.
"Microsoft Border"-koden er så vidt jeg kan se komplet overflødig -
så du kan jo prøve at slette den helt (og se om Frontpage så sætter
den ind igen ...)
> Vedrørende linierne 19 og 21 er jeg lidt på herrenns mark.
> Koden virker, men kan ikke validere.
Hvis du har brug for de to hændelser, må du leve med at kode ikke
kan valideres. Det er ikke noget der vil skabe problemer i
browserne - enten virker koden eller også virker den ikke, men den
vil ikke give problemer med at parse resten af dokumentet (som
andre html-fejl i visse tilfælde kan).
Men tjek i første omgang hvad der sker hvis du sletter de to
hændelser (omdøb dem evt. til xonresize og xonscroll - så er det
hurtigt at genskabe dem hvis det skaber problemer).
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html
| |
|
|