Tutorials >
HTML >
Tabellen
|
|
 Gepost op: 25 oktober 2004 - 22:39 |
|
|
|
Moderator
 |
rowspan
rowspan werkt hetzelfde als colspan, met als verschil dan een tabelcel die het atrribuut rowspan heeft een aantal rijen overspant, in plaats van een aantal kolommen.
Het lastige aan rowspan is, dat je in de tabelrij waar je begint met de rowspan al meteen aan moet geven hoeveel kolommen er nog moeten komen (voor of na de rowspan). Deze kolomcellen (van de tabelrij waarin de colspan begint) vormen meteen de éérste rij van een aantal rijen waarop de rowspan van toepassing is.
Na deze eerste rij met rowspan erin, volgen er dus nog 'rowspan-1' rijen, met eenzelfde aantal kolommen als in de eerste rij, waarover de rowspan geldig is.
Verward ?
Hier is een voorbeeld (knip en plak het voorbeeld in een html-file om te zien wat er gebeurt):
<table border="1">
<tr>
<td rowspan="3">1</td>
<td>1a</td>
<td>1b</td>
</tr>
<tr>
<td>2a</td>
<td>2b</td>
</tr>
<tr>
<td>3a</td>
<td>3b</td>
</tr>
</table>
<table border="1"> <tr> <td rowspan="3">1</td> <td>1a</td> <td>1b</td> </tr> <tr> <td>2a</td> <td>2b</td> </tr> <tr> <td>3a</td> <td>3b</td> </tr> </table>
In de cel met waarde 1 begin je meteen met je colspan... alleen je wilt dat er nog iets komt voor/na de cel met de rowspan erin. Deze kolommen zet je nog in dezelfde rij. Elke gerowspande rij bestaat dus uit twee cellen - in de eerste rij zijn dit 1a en 1b.
Er zijn drie gerowspande rijen, waarin je in de eerste rij dus al hebt aangegeven hoeveel cellen (2) elke rij bevat.
Na de rij waarin je hebt aangegeven over hoeveel rijen de rowspan actief dient te zijn (3) worden dus nog 2 (3-1) rijen verwacht, met elk twee cellen. Dit zijn de rijen met 2a en 2b, en 3a en 3b er in, respectievelijk.
Nog een voorbeeld:
<table border="1">
<tr>
<td rowspan="4">A</td>
<td>1</td>
<td rowspan="4">B</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>
<table border="1"> <tr> <td rowspan="4">A</td> <td>1</td> <td rowspan="4">B</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> </tr> </table>
In de eerste cel zet je twee keer een rowspan die over vier rijen spant. Hierna verwacht de tabel dus hoe dan ook nog 3 (4-1) rijen, elk bestaande uit één cel. Je moet dus eigenlijk in de eerste rij kijken naar het aantal niet-colspannende cellen.
laatste voorbeeld (combinatie van colspan en rowspan):
<table border="1">
<tr>
<td>X</td>
<td colspan="3">K</td>
</tr>
<tr>
<td rowspan="2">R</td>
<td>1a</td>
<td>1b</td>
<td>1c</td>
</tr>
<tr>
<td>2a</td>
<td>2b</td>
<td>2c</td>
</tr>
</table>
<table border="1"> <tr> <td>X</td> <td colspan="3">K</td> </tr> <tr> <td rowspan="2">R</td> <td>1a</td> <td>1b</td> <td>1c</td> </tr> <tr> <td>2a</td> <td>2b</td> <td>2c</td> </tr> </table>
Met de eerste tabelcel is niets bijzonders: het bevat enkel een X. De volgende tabelcel bevat de (welbekende) colspan - deze tabelcel overspant 3 kolommen.
In de volgende rij maken we gebruik van rowspan - de cel R overspant 2 rijen. Het aantal kolommen per rij is in dit geval niet vrij te kiezen: je had eerder al aangegeven hoeveel kolommen er zouden moeten zijn (3). Het restant van de eerste row-spannende rij bevat dus 3 cellen (1a, 1b, 1c).
Hierna is er nog één rij om de rowspan kloppend te maken (2-1). Deze bevat wederom 3 cellen.
En als je dit allemaal te lastig vind, kun je nog altijd tabellen in tabellen gebruiken  . |
|
|
|
|
| Gepost op: 19 november 2005 - 17:37 |
|
|
|
HTML interesse
|
Je hebt bordercolor="#000000" gebruikt, in plaats van dat kan je beter dit gebruiken:
style="border-color:#000000;"
style="border-color:#000000;"
Want volgens mij is het anders niet w3 geldig. |
|
|
|
|
| Gepost op: 19 januari 2006 - 23:03 |
|
|
|
SEO guru
|
"Tabellen worden gebruikt om de inhoud mooi en ordelijk op de pagina te laten."
Misschien erbij vermelden dat tabellen bedoeld zijn om gegevens weer te geven, niet als "opmaak". Daarvoor bestaat er namelijk CSS. |
|
|
|
|
| Gepost op: 25 juli 2006 - 15:31 |
|
|
|
HTML interesse
|
Wel een handige tutorial.
Alleen wel jammer dat alles in hoofdletters is getyped. Zo krijg je ook fouten in de w3 validator. |
|
|
|
|
| Gepost op: 11 juni 2008 - 15:56 |
|
|
|
Lid
|
Zeer handige tutorial, ik had problemen met men header boven men 2 menu's en content te zetten. Want dat was de header even breed als het 1ste menu en het moest de hele lengte van de 2 menu's en content zijn.
Maar dankzij deze tutorial is het opgelost. |
|
|
| Enkel aanvullende informatie is welkom. Geen prijzende of afkeurende reacties. |
|
|
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
