aan alle goede dingen komt een eind, webmasterplein.net 2003 - 2013
wij danken jullie voor al mooie momenten die dankzij dit forum ontstonden - Derk, Rutger en Stef

Opmaak van een <table>

Het echte opmaakwerk, alles vragen over HTMLen, CSSen en Javascripten.

Opmaak van een <table>

Berichtdoor Ichiko » 13 jan 2009 11:10

Hoi,

Ik probeer de opmaak van mijn tabel goed te krijgen, maar heb hier wat problemen mee. In de daadwerkelijke versie is de tabel gevuld met textboxen en dergelijke. Voor het beschrijven van mijn probleem heb ik het even zo eenvoudig mogelijk gehouden.

In eerste instantie had ik de volgende tabel:
Code: Selecteer alles
<table>
        <tr>
            <td>Cel 1 -> Label met naam van invoerveld</td>
            <td>Cel 2 -> Textbox voor invoer</td>
            <td width="60px"></td>
            <td>Cel 3 -> Label met naam van invoerveld</td>
            <td>Cel 4 -> Textbox voor invoer</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

Deze tabel wordt prima uitgelijnd, waarbij de woorden in Cel 1 netjes achter elkaar komen te staan op 1 regel. Cel 2 komt netjes stijf tegen Cel 1.
Het idee is om op het scherm twee kolommen te creëren van invoervelden. Deze kolommen worden nog gescheiden door een stukje lege opvulling van 60px.

Voor de klus waar ik nu op zit wordt gevraagd om de regels van de tabel te onderscheiden met kleuren. Om het geheel mooi te houden moet de tabel nu zo breed zijn als het gehele scherm. Dit leek mij het makkelijkste te bereiken door de tabel op 100% breedte te zetten. Het probleem is dan dat de kolommen ver uit elkaar gaan staan, want alle kolommen worden verdeeld over de gehele breedte.

Iets anders wat ik geprobeerd heb is om de achterste kolom op 100% te zetten.
Code: Selecteer alles
<table>
        <tr>
            <td>Cel 1 -> Label met naam van invoerveld</td>
            <td>Cel 2 -> Textbox voor invoer</td>
            <td width="60px"></td>
            <td>Cel 3 -> Label met naam van invoerveld</td>
            <td>Cel 4 -> Textbox voor invoer</td>
            <td style="width:100%"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

Opzich komt dit al een heel eind in de buurt. Echter, wat nu fout gaat is dat de midden kolom van 60px weg gedrukt wordt. Maar ook cel 1 en cel 2 worden in elkaar gedrukt, namelijk op zo'n manier dat de woorden niet meer op 1 regel staan.

Ik zou graag willen dat mijn kolom van 60px blijft, en dat de woorden van de labels achter elkaar blijven staan.

Alvast bedankt voor de hulp!
Ichiko
wmpr
 
Berichten: 1
Geregistreerd: 13 jan 2009 10:28

Keer terug naar HTML, CSS, Javascript



cron