Positionering tabel

[Helpmijtoch]

Dag allemaal,

Ik heb jullie hulp nodig. Ik ben leek qua html.:shocked: Zie plaatje... ik moet exact nabouwen wat er op dit plaatje staat.

Ik heb even omcircelt waar ik niet uitkom. Dit gedeelte krijg ik maar niet exact gepositioneerd (zoals op de afbeelding). Ik werk nu met tabellen, maar ik zal het wel anders moeten doen.

Ik ben niet te beroerd om te googlen maar ik heb geen flauw idee wat ik als zoekterm voor dit moet gebruiken... Wie kan mij helpen?

Bedankt!

 

[csshunter]

Dat zou in principe eenvoudig moeten zijn, zowel met een tabel als zonder (bv. met twee naast elkaar geplaatste <div>'s).
Even een paar vragen:

1. Waar heb je de theorie vandaan, waarmee je de tabel hebt opgebouwd?
2. Waarmee maak je de pagina? Met Kladblok, of met een 'WYSIWYG'-editor, of met een of andere online 'Sitebuilder'?
3. En hoe ziet je code er uit, waarmee het mislukt?

Zonder patiënt is het moeilijk om een diagnose te stellen!

Met vriendelijke groet,
CSShunter

 

[csshunter]

ik moet exact nabouwen...

O, en vraag 4:

• Van wie moet dat? Is het toevallig een huiswerk-opdracht? (op het forum is 't niet de bedoeling om kant & klare huiswerk-oplossingen aan te bieden; wel: tips over de richting waarin je het moet zoeken).
• Vandaar ook mijn aanvullende vragen voordat ik richting antwoord ging.

Nog een tip: check je html en css met de html- en css-validator als iets fout gaat.
(en anders ook ) (zie m'n handtekening).

 

[JeroenE]

Goed gezien, csshunter, daarom heb ik mijn vorig antwoord verwijderd

 

[Helpmijtoch]

O, en vraag 4:

• Van wie moet dat? Is het toevallig een huiswerk-opdracht? (op het forum is 't niet de bedoeling om kant & klare huiswerk-oplossingen aan te bieden; wel: tips over de richting waarin je het moet zoeken).
• Vandaar ook mijn aanvullende vragen voordat ik richting antwoord ging.

Nog een tip: check je html en css met de html- en css-validator als iets fout gaat.
(en anders ook ) (zie m'n handtekening).

Ik heb de halve waarheid vertel... Het is inderdaad een schoolopdracht. Maar...de opdracht is niet: bouw de printscreen exact na. Het gaat in deze opdracht om variabelen ophalen (php). Deze opdracht is inmiddels succesvol afgerond.

Maar nu vind ik het voor mezelf de kick om hem exact na te bouwen. Dus netjes naast elkaar. Alleen weet ik niet hoe het moet.

Zoals gevraagd, hierbij de code die ik nu heb:

                <tr>
                    <td>Rapportcijfer:</td>
                    <td><input type="text" name="rapportcijfer" /></td>
                </tr>
                <tr>
                    <td>Leeftijd:</td>
                    <td><input type="text" name="leeftijd" /></td>
                </tr>
                <tr>
                    <td>
                        <input type="radio" name="super" />Super<br />
                        <input type="radio" name="goed" />Goed<br />
                        <input type="radio" name="matig" />Matig<br />
                        <input type="radio" name="slecht" />Slecht<br />
                    </td>
                </tr>
                <tr>
                    <td><input type="submit" value="Verwerk" /></td>
                </tr>

Dit levert op:

 

[JeroenE]

Wat op de rij staat met je radio-inputs, zet je als derde "td" (tabledata) in de "tr" (tablerow) van je rapportcijfer. Voeg in de "td" het atribuut "rowspan" toe (net zoals je in de input het atribuut type gebruikt) met als waarde 3 omdat je drie rijen in het totaal zult hebben: die met het rapportcijfer, die met de leeftijd en die met de knop verwerk.
Zo zullen die radio-inputs mooi naast de andere elementen komen te staan zoals in het voorbeeld dat je namaakt.

 

[Helpmijtoch]

Wat op de rij staat met je radio-inputs, zet je als derde "td" (tabledata) in de "tr" (tablerow) van je rapportcijfer. Voeg in de "td" het atribuut "rowspan" toe (net zoals je in de input het atribuut type gebruikt) met als waarde 3 omdat je drie rijen in het totaal zult hebben: die met het rapportcijfer, die met de leeftijd en die met de knop verwerk.
Zo zullen die radio-inputs mooi naast de andere elementen komen te staan zoals in het voorbeeld dat je namaakt.

Geweldig Jeroen! Dat is hem. Het is zo simpel, maar je moet het maar net weten :thumb:
Dank!

 

[JeroenE]

Hier is een goede handleiding voor html.