rutenett i tabeller

[fleur]

har laget en tabell som ser slik ut foreløpig: Problemet er at jeg vil ha rutenettabell, når jeg har border=1 kommer det bare border rundt hele tabellen, ikke mellom cellene. Hvordan får jeg til det?

 

Et annet problem: I den første cella på den andre raden vil jeg ha delt opp setninga i 3 rader. Er snakk om et navn, med adresse og postnummer/sted. De skal stå på hver sin linje. Men det som da skjer er at innholdet i neste celle (stilling) kommer på linje/høyde med adressen og ikke på linjen med navn. Det samme skjer i den siste cella..får ikke mail1 på linje med Navn og mail2 på linje med Adresse. Noen som kan hjelpe?

 

<table class="tabell">

<tr>

<td>test</td>

<td>test</td><

<td>test</td>

<td>test</td>

<td>test</td>

<td>test</td>

</tr>

<tr>

<td>Navn<br />Adresse<br />Postnr/sted</td>

<td>stilling</td>

<td>test</td>

<td>test</td>

<td>test</td>

<td>mail1<br /> mail2</td>

</tr>

</table>

 

CSS:

 

.tabell {

font-size: 10px;

border: 2px solid #000;

margin-left: 15px;

width: 640px;

}

[Arve Systad]

td,tr { border: 1px solid black collapse; }

 

Trur omtrent at det der skal funke fint.

[epsil]

td,tr { border: 1px solid black collapse; }

collapse er ikke en gyldig verdi for border-egenskapen. Skriv i stedet

 

table {
    border-collapse: collapse
}
td, th {
    border: 1px solid #000000
}

I tillegg vil du kanskje ha litt ekstra luft rundt innholdet i cellene. Utvid den andre stilregelen (som gjelder for tabellceller og tabelloverskrifter) med en passende padding-deklarasjon:

 

td, th {
   border: 1px solid #000000;
   padding: .5em;
}

Denne verdien er relativ, og vil derfor fungere uavhengig av hvilken skriftstørrelse som er valgt (enten med en absolutt verdi i stilsettet – noe som ikke er anbefalt – eller med en innstilling i nettleseren til den besøkende).

Endret 6. mars 2004 av ePsiLON47

[fleur]

hmm...fikk ikke teksten på linje med hverandre...

 

og hvis jeg definererer td, tr { blabla så får jeg jo kant rundt cellene på ALLE tabeller. Har flere tabeller, men alle skal ikke ha border rundt cellene. Betyr det at jeg må skrive td class="test" og tr class="test" på ALLE rader og kolonner? Det blir isåfall MYE skriving av klasser.

[epsil]

hmm...fikk ikke teksten på linje med hverandre...

Jeg leste litt fort igjennom. Dette kan du ordne med vertical-align-egenskapen, slik:

 

td, th {
    border: 1px solid #000000;
    padding: .5em;
    vertical-align: top;
}

Men dette er avhengig av at nettleseren støtter CSS. En bedre løsning hadde vært å plassere navn, adresse og postnummer/sted i hver sin kolonne, og dermed samle alle data om en person på én linje (forutsatt at tabellens bredde ikke påvirkes av bredden til visningsområdet).

 

og hvis jeg definererer td, tr { blabla så får jeg jo kant rundt cellene på ALLE tabeller. Har flere tabeller, men alle skal ikke ha border rundt cellene. Betyr det at jeg må skrive td class="test" og tr class="test" på ALLE rader og kolonner? Det blir isåfall MYE skriving av klasser.

Nei, det holder med å sette en klasse på table-elementet til alle «rutenettabeller» (for eksempel «tabell»), og så forandre selektorene i stilreglene til

 

.tabell {
    border-collapse: collapse
}
.tabell td, .tabell th {
    border: 1px solid #000000;
    padding: .5em;
    vertical-align: top;
}

[fleur]

tusen takk, det fungerte