Avatar billede kristianiversen Nybegynder
23. marts 2008 - 12:57 Der er 14 kommentarer og
1 løsning

Kan colspan klare dette?

Hej eksperter,

Jeg er igang med at lave et design vha. tabels. Ved godt at nogle siger det er ulovligt, men dette er et gammelt design som jeg bygger videre på.

Jeg vil høre om colspan kan klare følgende situation:

http://home.webonnet.dk/rod/colspan.bmp

Jeg kunne godt tænke mig at bruge colspan på kryds og tværs.

Jeg har prøvet med at sætte
boks 1: colspan = 2
boks 2: ingen colspan
boks 3: colspan = 2
boks 4: ingen colspan

Med venlig hilsen
Kristian Iversen
Avatar billede keysersoze Ekspert
23. marts 2008 - 13:01 #1
hvis jeg forsåtr korrekt;

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td rowspan="2"></td>
    <td colspan="2"></td>
    <td></td>
    <td rowspan="2"></td>
</tr>
<tr>
    <td></td>
    <td colspan="2"></td>
</tr>
</table>
Avatar billede kristianiversen Nybegynder
23. marts 2008 - 13:10 #2
Det tror jeg ikke du gør. Jeg skal prøve at udtrykke mig bedre.

Boks 3 skal gå ind over boks 2, men kun halvvejs indover boks 1.

Boks 1 skal samtidig kun gå halvvejs ind over boks 3, men dække over hele boks 4.

Den er kringlet..

Jeg glemte at sige, at I ikke behøves at tænke på de to unavngivne bokse ved siderne.
Avatar billede kristianiversen Nybegynder
23. marts 2008 - 13:13 #3
Jeg kiggede forresten på dit foreslag, men det virker ikke for mig som jeg gerne ville have det til.
Avatar billede keysersoze Ekspert
23. marts 2008 - 13:13 #4
Sådan vil jeg også umiddelbart mene at min opfører sig hvis du bare sætter bredde på de forskellige bokse.
Avatar billede kristianiversen Nybegynder
23. marts 2008 - 13:32 #5
Jeg har prøvet følgende:

<html><body>

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td rowspan="2">111</td>
    <td width="70">hhhhhhhhhhhhhhhh</td>
    <td width="30">mmmmmmm</td>
    <td rowspan="2">111</td>
</tr>
<tr>
    <td width="30">muuuh</td>
    <td colspan="2" width="70">hejhejhejhejhejhe</td>
</tr>
</table>

</body></html>

Dette giver resultatet:

http://home.webonnet.dk/rod/colspan%20test.html
eller vist med billede igennem firefox
http://home.webonnet.dk/rod/oejebliksbillede5.png

Det jeg egentligt ville have haft var noget lignende det her:
http://home.webonnet.dk/rod/oensket.png

Som man kan se på det sidste billede lapper hejhejhejhejhejhejj ind over hhhhhhhhhhh.

Håber du kan forstå.
Avatar billede olebole Juniormester
23. marts 2008 - 14:25 #6
<ole>

Når man blander col- og rowspan, kommer man ofte ud i problemer, hvis rækker/celler skal have bestemte størrelser. Husk på, tabeller i udgangspunktet slet ikke er beregnet til den slags  ;o)

/mvh
</bole>
Avatar billede dkfire Nybegynder
23. marts 2008 - 17:26 #7
Din fejl skyldes også at du mangler en colspan. Du har ikke lavet det samme som keysersoze 23/03-2008 13:01:32 skrev.

Prøv i stedet at gøre som han skrev:
<html><body>

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td rowspan="2">111</td>
    <td width="70" colspan="2">hhhhhhhhhhhhhhhh</td>
    <td width="30">mmmmmmm</td>
    <td rowspan="2">111</td>
</tr>
<tr>
    <td width="30">muuuh</td>
    <td colspan="2" width="70">hejhejhejhejhejhe</td>
</tr>
</table>

</body></html>

Så kommer det til at passe med rækker og kolonner.
Avatar billede kristianiversen Nybegynder
23. marts 2008 - 17:46 #8
Hej dkfire,

Det er sandt at der forsvandt et colspan (hvordan det så kunne gå til begriber jeg ikke). Tak fordi at du opdagede det.

Trods at det nu er rettet, synes jeg stadig ikke at få det rigtige resultat.

Jeg får stadig en side der ligner http://home.webonnet.dk/rod/oejebliksbillede5.png - bortset fra at hejhejhejhejhejhe nu ikke længere lapper ind over 111.

Er det kun mig det ikke kører for, eller hvordan ser jeres ud?
Avatar billede dkfire Nybegynder
23. marts 2008 - 17:53 #9
Prøv at sætte nogle kanter på, så kan du se hvordan cellerne ligger.
Avatar billede kristianiversen Nybegynder
23. marts 2008 - 23:11 #10
De ligger ikke ret vel, dvs. stadig det samme som jeg kunne øjne i post 23/03-2008 17:46:00.

Da jeg ikke har fået det til at virke, har jeg lavet en (rigtig dårlig) nødløsning med at lægge en tabel i den nederste række i stedet for celle 1 og 2.

Hvis der er nogle der ønsker point for deres arbejde, så læg et svar. Jeg lader spørgsmålet stå åbent i et par dage.

Tak for hjælpen alle.

Med venlig hilsen
Kristian Iversen
Avatar billede olebole Juniormester
23. marts 2008 - 23:51 #11
Nu ville det vel være meget smart at bruge noget indhold, der svarer nogenlunde til det, man vil teste ... ellers kan man jo få alverdens sære resultater  ;o)

<table cellspacing="0" cellpadding="0" border="1">
<tr>
    <td rowspan="2">111</td>
    <td width="70" colspan="2">hh hh hh hh hh hh hh hh</td>
    <td width="30">mm mm mm m</td>
    <td rowspan="2">111</td>
</tr>
<tr>
    <td width="30">mu u uh</td>
    <td colspan="2" width="70">he jh ej he jh ej he jh e</td>
</tr>
</table>

- men som jeg anførte i mit første indlæg, giver samtidig brug af row- og colspan meget ofte problemer med højde og bredde på rækker og celler.
Hvis man vælger noget mere passende indhold, virker dit eksempel fint i FF - men ikke i IE.
Avatar billede kristianiversen Nybegynder
24. marts 2008 - 00:07 #12
Det skal virke i både IE og FF så det duer desværre heller ikke.

Af interesse prøvede jeg alligevel at sætte din rettede version ind i browser, men stadig uden ønsket resultat. Hvilken DTD bruger du eller hvad er det der gør at jeg, åbenbart som den eneste, ikke kan få jeres eksempler til at virke som planlagt?

Min kode ser nu således ud og cellerne er stadig ligeså firkantede og umedgørlige som hvis jeg ikke havde brugt colspan:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html><body>

<table cellspacing="0" cellpadding="0" border="1">
<tr>
    <td rowspan="2">111</td>
    <td width="70" colspan="2">hh hh hh hh hh hh hh hh</td>
    <td width="30">mm mm mm m</td>
    <td rowspan="2">111</td>
</tr>
<tr>
    <td width="30">mu u uh</td>
    <td colspan="2" width="70">he jh ej he jh ej he jh e</td>
</tr>
</table>

</body></html>
Avatar billede olebole Juniormester
24. marts 2008 - 00:16 #13
Jeg brugte Strict, men det er ligemeget, om du bruger Transitional eller Strict. Derudover forstår jeg ikke, hvad du skriver. Mon ikke, du ser præcis det samme, som os? Det virker, som forventet, i FF - men ikke i IE.

At det ikke er godt nok, er helt klart - men sådan er det nu engang med simultant brug af col- og rowspan.

Har du overhovedet noget at bruge en tabel til?
Avatar billede kristianiversen Nybegynder
24. marts 2008 - 00:39 #14
Det kan godt ske at jeg ser det samme som jer. Det var ærgerligt.

Jeg havde noget at bruge denne slags tabel til da jeg startede spørgsmålet, men som man kan læse i 23/03-2008 23:11:41 fandt jeg en alternativ løsning. At jeg spurgte videre ind til det, skyldtes at jeg var interesseret i at vide om det kunne lade sig gøre - hvis jeg nu skulle bruge det en anden gang.

Jeg opgiver her, I der har hjulpet med at prøve at få mig til at forstå det må meget gerne lægge et svar.

Med venlig hilsen
Kristian Iversen
Avatar billede olebole Juniormester
24. marts 2008 - 01:44 #15
Hvis det skal virke crossbrowser, skal du ud i noget à la:

<table style="width:160px;table-layout:fixed" cellspacing="0" cellpadding="0" border="1">
<col><col style="width:30px"><col style="width:40px"><col style="width:30px"><col>
<tr>
    <td rowspan="2">111</td>
    <td width="70" colspan="2">hh hh hh hh hh hh hh hh</td>
    <td width="30">mm mm mm m</td>
    <td rowspan="2">111</td>
</tr>
<tr>
    <td width="30">mu u uh</td>
    <td colspan="2" width="70">he jh ej he jh ej he jh e</td>
</tr>
</table>
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester