Empiétement
de cellules HTML
Définition
Empiétement cellule ou captation : L'empiétement
cellule dans un tableau
HTML
ce
fait soit sur les lignes (horizontalité des cellules), soit
sur
les
colonnes (verticalité des cellules),
l'empiétement horizontal ou vertical se fait grâce
aux attribut rowspan et colspan.
Dans l'exemple ci-dessous la cellule 1
empiéte sur les cellules 2, 3 et 4, grâce
à l'attribut rowspan
Exemple
d'empiétement tableau
HTML
avec l'attribut rowspan (en
gras, ci-dessous) :
|
|
Code
source :
<table style="width: 200px;" border="0" cellpadding="0"
cellspacing="0">
<tbody><tr>
<td style="border: 1px solid black; height: 100px; text-align:
center; vertical-align: middle;"
rowspan="3">1</td>
<td style="border-style: solid; border-color: black;
border-width: 1px 1px 1px 0px; text-align: center; vertical-align:
middle;">2</td>
</tr><tr>
<td
style="border-style: solid; border-color: black;
border-width: 0px 1px 0px 0px; text-align: center; vertical-align:
middle;">3</td>
</tr><tr>
<td
style="border-style: solid; border-color: black;
border-width: 1px 1px 1px 0px; text-align: center; vertical-align:
middle;">4</td>
</tr>
</tbody>
</table>
|
Dans l'exemple ci-dessous la cellule A
empiéte sur les cellules B, C et D, grâce
à l'attribut colspan
Exemple
d'empiétement tableau
HTML
avec l'attribut colspan (en
gras, ci-dessous) :
|
|
Code
source :
<table style="width: 200px;" border="0"
cellpadding="0" cellspacing="0">
<tbody><tr>
<td
style="border: 1px solid black; height: 100px; text-align:
center; vertical-align: middle;"
colspan="3">A</td>
</tr><tr>
<td
style="border-style: solid; border-color: black;
border-width: 0px 1px 1px; text-align: center; vertical-align: middle;
height: 100px;">B</td>
<td
style="border-style: solid; border-color: black;
border-width: 0px 1px 1px 0px; text-align: center; vertical-align:
middle;">C</td>
<td
style="border-style: solid; border-color: black;
border-width: 0px 1px 1px 0px; text-align: center; vertical-align:
middle;">D</td>
</tr>
</tbody>
</table>
|
Rappel : en HTML
une balise ouverte
doit-être refermée, sauf : voir liste des balises HTML
Exemples tableau
HTML
multi-cellule avec les attribut rowspan et colspan :
Titre
de
la page : Création
d'un tableau HTML
Le site visiograf.org
a été
réalisé avec le souci de correspondre aux normes
du W3C,
pour vérifier la validation
HTML
4.01
Transitional copiez
l'adresse de la présente page :
http://www.visiograf.org/creation_tableau.html
cliquez ici
et collez cette adresse dans le champ Address:,
de la rubrique Validate by URL
puis
cliquez sur Check
pour
vérifier la validation
CSS
2.1
cliquez ici,
et collez de nouveau l'adresse dans le champs Adresse: puis cliquez sur
Vérifier
