[HTML] Tabel probleempje

[RuudvandeBeeten]

Beste mensen,

Eindresultaat:
Zo moet de tabel eruit komen te zien. (in CSS maak ik de vakken op!)


Ik ben begonnen met de eerste 2 regels. Het vak img heb ik laten doorlopen.

code:

<table border="1" width="545">
    <tr>
        <td>Titel</td><td>votes</td><td rowspan="2">img</td>
    </tr>
    <tr>
        <td colspan="2">omschrijving</td>
    </tr>
</table>

De 3de (en laatste) regel wil ik nu invoegen.
De rowspan van img zou nu op 3 moeten staan. Als ik dit verander komt de tabel er zo uit te zien.

code:

<table border="1" width="545">
    <tr>
        <td>Titel</td><td>votes</td><td rowspan="3">img</td>
    </tr>
    <tr>
        <td colspan="2">omschrijving</td>
    </tr>
    <tr>
        <td>Aantal</td><td>Vote</td><td>Reacties</td>
    </tr>
</table>

Ik heb vanalles geprobeerd met col en rowspan maar kom er niet uit.
Iemand die mij helpen kan?

Gr

Ruud

[dev10]

HTML:

<table border="1" width="545">
    <tr>
        <td>Titel</td><td colspan="2">Datum &amp; Tijd</td><td rowspan="3">img</td>
    </tr>
    <tr>
        <td colspan="3">omschrijving</td>
    </tr>
    <tr>
        <td>Aantal</td><td>Vote</td><td>Reacties</td>
    </tr>
</table>

Zoiets? Dit is trouwens gewoon basis HTML-kennis hoor.


Hint: extra kolom toevoegen.

[Cousin Boneless]

Het probleem is dat er aan de bovenzijde minder kolommen moeten komen dan onderaan (boven 2, onder 3). Qua uitlijning kan dit niet in één tabel. Ookal wordt het afgeraden om tabellen te nesten. Dit zou ik er van gemaakt hebben:

HTML:

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td>
                        <table style="width:100%">
                            <tr>
                                <td>(header1)</td>
                                <td>(header2)</td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>(content)</td>
                </tr>
                <tr>
                    <td>
                        <table style="width:100%">
                            <tr>
                                <td>(footer1)</td>
                                <td>(footer2)</td>
                                <td>(footer3)</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
        <td>(image)</td>
    </tr>
</table>

En dan natuurlijk wel opmaken in CSS..

[RuudvandeBeeten]

code:

<td colspan="2">Datum &amp; Tijd</td>

Heb ik helemaal overheen gekeken. Ik schaam me dood.
Bedankt

[disjfa]

Het is veel gemakkelijker met normaal html hé, dat weet je. Dan kan je het later ook veel gemakkelijker aanapssen.

[ Voor 31% gewijzigd door disjfa op 22-07-2008 13:19 ]

[RuudvandeBeeten]

Cousin Boneless schreef op dinsdag 22 juli 2008 @ 13:15:
Het probleem is dat er aan de bovenzijde minder kolommen moeten komen dan onderaan (boven 2, onder 3). Qua uitlijning kan dit niet in één tabel. Ookal wordt het afgeraden om tabellen te nesten. Dit zou ik er van gemaakt hebben:

HTML:

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td>
                        <table style="width:100%">
                            <tr>
                                <td>(header1)</td>
                                <td>(header2)</td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>(content)</td>
                </tr>
                <tr>
                    <td>
                        <table style="width:100%">
                            <tr>
                                <td>(footer1)</td>
                                <td>(footer2)</td>
                                <td>(footer3)</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
        <td>(image)</td>
    </tr>
</table>

En dan natuurlijk wel opmaken in CSS..

Wat heeft het nesten in dit geval voor een voordeel? De manier van letinon werkt namelijk ook, en is makkelijker te begrijpen.

[Cousin Boneless]

De 'Titel' en 'aantal' kolom zijn in dat geval even breed. In je screenshot niet.

[Verwijderd]

Maar om dan 4(!) tables te gaan nesten
Ik zou met css-floats wat block-elementen op de goede manier rangschikken. Kan ook zeker een hel zijn daarentegen

[RuudvandeBeeten]

Verwijderd schreef op dinsdag 22 juli 2008 @ 14:11:
Maar om dan 4(!) tables te gaan nesten
Ik zou met css-floats wat block-elementen op de goede manier rangschikken. Kan ook zeker een hel zijn daarentegen

De tabel moet ongeveer 10 keer d.m.v. een loop op het scherm onder elkaar getoont worden.
Ik had met divs inderdaad al een goed resultaat, maar omdat divs voor opmaak gemaakt zijn, werd mij
geadviseerd om tabellen te gaan gebruiken.

[Bosmonster]

Dit is toch opmaak? In ieder geval geen tabulaire data.

Je zou wel, als je dit 10x onder elkaar herhaalt, een List kunnen gebruiken (UL/OL). Want die is, je raadt het al, bedoeld voor een lijst van bij elkaar horende gegevens. Daarbinnen blijft het opmaak en zijn divs prima geschikt om alles op zn plek te krijgen.

[ Voor 16% gewijzigd door Bosmonster op 22-07-2008 16:04 ]

[Verwijderd]

Bosmonster schreef op dinsdag 22 juli 2008 @ 16:03:
Dit is toch opmaak? In ieder geval geen tabulaire data.

Met een klein voorbehoud, omdat ik natuurlijk niet precies weet wat de aard en de bedoeling van de data is, maar volgens mij is hier wel degelijk sprake van tabulaire data.

[-db-]

RuudvandeBeeten schreef op dinsdag 22 juli 2008 @ 14:31:
[...]

De tabel moet ongeveer 10 keer d.m.v. een loop op het scherm onder elkaar getoont worden.
Ik had met divs inderdaad al een goed resultaat, maar omdat divs voor opmaak gemaakt zijn, werd mij
geadviseerd om tabellen te gaan gebruiken.

Als je divs en classes gebruikt en dan de CSS in de header of in een aparte file zet ben je volgens mij veel efficienter bezig, zowel in lengte als in overzichtelijkheid van de code. Daarbij krijg je ook nog eens meer vrijheid in vormgeving.

Dit het ik ervan gemaakt (alleen getest in IE7), het vak omschrijving bepaald nu de hoogte:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <style type="text/css">
    .container{
        position:relative;
        width:545px;
        float:left;
        }
    .titel{
        position:absolute;
        top:0px;
        left:0px;
        width:180px;
        height:20px;
        background:#ddd;
        }
    .datumtijd{
        position:absolute;
        top:0px;
        left:180px;
        width:180px;
        height:20px;
        background:#ddd;
        }
    .img{
        position:absolute;
        top:0px;
        left:360px;
        width:185px;
        height:100%;
        background:#666;
        color:#fff;
        }
    .aantal{
        position:absolute;
        bottom:0px;
        left:0px;
        width:120px;
        height:20px;
        background:#ddd;
        }
    .vote{
        position:absolute;
        bottom:0px;
        left:120px;
        width:120px;
        height:20px;
        background:#ddd;
        }
    .reactie{
        position:absolute;
        bottom:0px;
        left:240px;
        width:120px;
        height:20px;
        background:#ddd;
        }
    .omschrijving{
        position:relative;
        width:360px;
        margin:20px 0px 20px 0px;
        background:#999;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="omschrijving">Omschrijving</div>
    <div class="titel">titel</div>
    <div class="img">Plaatje</div>  
    <div class="datumtijd">datum en tijd</div>
    <div class="aantal"> aantal</div>
    <div class="vote">vote</div>
    <div class="reactie">reactie</div>
</div>
</body>
</html>

[ Voor 56% gewijzigd door -db- op 22-07-2008 21:13 ]

[Cousin Boneless]

Maar om dan 4(!) tables te gaan nesten
Ik zou met css-floats wat block-elementen op de goede manier rangschikken. Kan ook zeker een hel zijn daarentegen

Ik zou hier ook gaan voor een CSS layout overigens (althans een poging doen). Maar ik wil toch even mijn vier table layout verdedigen.
Ik dacht dat het ging om een layout van een website. En ik knip zoiets dan automatisch in logische eenheden: een topmenu, een bottom menu, content met menu's. Erg handig als je er componenten van maakt; je hebt dan één container-cell waarin je één component plaatst. Ik gebruik ook vrijwel nooit rowspans, omdat je daarmee dus inderdaad snel het overzicht verliest als het wat complexer wordt.

[funkwurm]

Wild idee als je toch voor de tabel wilt gaan (iets zegt me dat dit opstandige tweakers gaat opleveren)

HTML:

<table>
  <tr><td colspan="2">Titel</td><td colspan="2">Datum en tijd</td><td rowspan="3">img</td></tr>
  <tr><td colspan="4">Omschrijving</td></tr>
  <tr><td>Aantal</td><td colspan="2">vote</td><td>reactie</td></tr>
</table>

Firefox, Opera en Safari pakken hem aardig bij mij. IE Mac 5.2 doet een beetje raar, maar dat is anno 2008 niet meer relevant dunkt me.

[crisp]

Als je een 'fixed' table-layout wilt hebben gebruik dan ook de css-property table-layout: fixed en zet een colgroup bovenaan de table waarin je voor iedere kolom de juiste (vaste) breedte opgeeft.

[Bosmonster]

Verwijderd schreef op dinsdag 22 juli 2008 @ 19:12:
[...]

Met een klein voorbehoud, omdat ik natuurlijk niet precies weet wat de aard en de bedoeling van de data is, maar volgens mij is hier wel degelijk sprake van tabulaire data.

Verkeerd gelezen, dacht dat het een reactiesysteem was en dit de reacties. Dit is inderdaad tabulaire data.