Søg
Avatar billede kusken Nybegynder
11. november 2008 - 16:43 Der er 14 kommentarer og
2 løsninger

Cellspacing top

Hej.

Jeg har prøvet at google emnet, men er ikke rigtigt blever klogere.

Jeg roder i øjeblikket rundt med nogle tabeller, og vil høre om det er muligt at definere cellspacing for forskellige "dele" af cellen. Jeg ønsker at have top-delen til at være 0, mens de andre skal være 10.

Grafisk: http://www.myupload.dk/showfile/r108477a7df5.jpg

På forhånd tak.
Avatar billede webcreator Nybegynder
11. november 2008 - 16:47 #1
Hej Kusken.

Du kan bruge Cascading Style Sheets (CSS) til den slags. Prøv at tjekke denne siden ud: http://www.w3schools.com/css/css_padding.asp
Avatar billede w13 Novice
11. november 2008 - 17:47 #2
Det mener jeg ikke, du kan nej. Så skal du f.eks. bruge div-elementer.
Avatar billede olebole Juniormester
11. november 2008 - 22:30 #3
<ole>

Hvis den havde været bredt understøttet, kunne du bruge CSS2 property'en border-spacing - men så kan man kun sætte top og bund med én værdi, samt venstre og højre med en anden. Man kan således ikke sætte topværdien til en anden end bundværdien  :o|

En anden ting er, at CSS2 stadig ikke er bredt understøttet, så du må nok ud i andre løsninger, som w13 foreslår

/mvh
</bole>
Avatar billede webcreator Nybegynder
11. november 2008 - 22:51 #4
Hej igen.

Mit forslag med CSS-løsningen baserede sig på et mere moderne udseende, hvor den gammeldags (knap så kønne) border-property bruges (<table border="1">).

Jeg havde forestillet mig noget i stil med den første tabel i nedenstående eksempel.
Den 2. tabel i eksemplet vil jeg dog mene, opfylder spørgers ønske.

--------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Test</title>
    <style type="text/css">
    body
    {
        font-family: verdana;
        font-size: 11px;
        color: #808080;
    }

    table.myschema
    {
        border-collapse: collapse;
    }

    td.normal
    {
        border: 1px solid #808080;
        padding: 5px;
    }

    td.top
    {
        padding-top: 25px;
    }

    td.spacer
    {
        height: 25px;
        border: 0px;
    }
    </style>
</head>
<body>

<div>

<table cellspacing="0" cellpadding="0" border="0" class="myschema">
<tr>
  <td class="normal top">Test 1</td>
  <td class="normal top">Test 2</td>
  <td class="normal top">Test 3</td>
</tr>
<tr>
  <td class="normal">Hello 1</td>
  <td class="normal">Hello 2</td>
  <td class="normal">Hello 3</td>
</tr>
</table>

<br><br>

<table cellspacing="10" cellpadding="0" border="1">
<tr>
  <td class="spacer"></td>
  <td class="spacer"></td>
  <td class="spacer"></td>
</tr>
<tr>
  <td>Test 1</td>
  <td>Test 2</td>
  <td>Test 3</td>
</tr>
<tr>
  <td>Hello 1</td>
  <td>Hello 2</td>
  <td>Hello 3</td>
</tr>
</table>

</div>

</body>
</html>
Avatar billede webcreator Nybegynder
11. november 2008 - 22:52 #5
Mit forslag med CSS-løsningen baserede sig på et mere moderne udseende, hvor den gammeldags (knap så kønne) border-property bruges (<table border="1">).

Der skulle stå:

Mit forslag med CSS-løsningen baserede sig på et mere moderne udseende, hvor den gammeldags (knap så kønne) border-property _IKKE_ bruges (<table border="1">).
Avatar billede webcreator Nybegynder
11. november 2008 - 22:53 #6
Ovenstående er testet i Firefox - jeg kører Linux, og har ikke IE installeret.
Avatar billede olebole Juniormester
11. november 2008 - 23:05 #7
'CSS-løsning' er nok et lidt stort ord at bruge. Løsningen bygger på en sammenblanding af CSS og HTML-attributter og ekstra elementer. Med CSS lader det sig ikke gøre  =)

PS: Interessant DTD  ;o)
Avatar billede webcreator Nybegynder
11. november 2008 - 23:19 #8
Nu er CSS vel ikke meget værd uden Markup :p
Mja, kan godt se at den smider en warning ved validering - men den validerer da uden fejl :)
Avatar billede olebole Juniormester
11. november 2008 - 23:27 #9
Ja, det er jo selvindlysende, at CSS ikke kan noget uden markup - hvorfor det naturligvis heller var det, jeg skrev  ;o)

Ja, den validerer, men ikke mod HTML 4.01 Strict  =)

Læg mærke til, validatoren skriver:
    "This document was successfully checked as -//W3C//DTD HTML 4.01 Strict//EN!"

- hvor den ville have skrevet:
    "This document was successfully checked as HTML 4.01 Strict!"

- hvis du havde brugt en 4.01 Strict DTD  ;o)
Avatar billede webcreator Nybegynder
11. november 2008 - 23:34 #10
Aha, det var rart at vide, tak for det :)
Jeg vil dog tro at koden validerer glimrende med det korrekte DTD også :)
Avatar billede olebole Juniormester
12. november 2008 - 00:44 #11
Det vil den også  =)
Avatar billede olebole Juniormester
12. november 2008 - 00:54 #12
Du kan prøve at teste denne kode i FF eller Opera:

.gnu {
    border-collapse: separate;
    border-spacing: 40px 10px;
    border: 1px solid black;
}
.gnu td {
    border: 1px solid black;
}

- og:

<table class="gnu">
<tbody>
    <tr>
      <td>Test 1</td>
      <td>Test 2</td>
      <td>Test 3</td>
    </tr>
    <tr>
      <td>Hello 1</td>
      <td>Hello 2</td>
      <td>Hello 3</td>
    </tr>
</tbody>
</table>

Dét er en CSS-løsning! Ikke, at den gør, som det, der efterspørges - men jeg vil blot vise dig, hvordan border-collapse og -spacing kan bruges  =)
Avatar billede olebole Juniormester
12. november 2008 - 00:56 #13
Bemærk i øvrigt, at i udtrykket:
    border-spacing: 40px 10px;

- angiver de 40px den horisontale afstand mellem cellerne, og de 10px den vertikale. Det er stik modsat af, hvad man burde forvente i CSS  ;o)
Avatar billede webcreator Nybegynder
12. november 2008 - 07:32 #14
Ja, det var spøjst. Jeg har ikke selv haft brug for den form for spacing tidligere, men det er da rart at kende til muligheden :)
Avatar billede kusken Nybegynder
12. november 2008 - 20:52 #15
Hej.

Undskyld for det sene svar, men jeg har ikke lige været i nærheden af en computer.

Ud fra webcreator's forslag kunne jeg løse mit problem. Tak for svaret.
Avatar billede webcreator Nybegynder
12. november 2008 - 21:06 #16
Intet problem, tak for points :9
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
52 min siden Hvordan får jeg reCAPTCHA på min hjemmeside? Af Strawberry i PHP
I dag 16:10 Tomt felt i Start Af ErikHg i Windows
I går 23:00 Hyperlink til tekst Af Nanarsi i Excel
18/0121:03 Forlænge ringetid Af 1Dorte i Apps til Android
17/0117:38 Video ikoner Af Malm i Windows
White papers
Flere white papers »