Tableaux évolués

Principe

Pour faire se chevaucher les cellules, on pratique la fusion (horizontale, ou verticale, ou les deux...)

Se souvenir que chaque ligne doit avoir le même nombre de cellules.

Horizontalement : colspan

Figure 1 - Des cellules comptent double ou triple, mais toujours 3 par ligne
<table border="1" width="300">
<tr>
	<TD colspan="2" bgcolor="#FF00FF">&nbsp;</td>
	<td>&nbsp;</td>
</tr>
<tr>
	<td width="100">&nbsp;</td>
	<td width="100">&nbsp;</td>
	<td width="100">&nbsp;</td>
</tr>
<tr>
	<td>&nbsp;</td>
	<td colspan="2" bgcolor="#FFCC66">&nbsp;</td>
</tr>
<tr>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
</tr>
<tr>
	<TD colspan="3" bgcolor="#FF0000">&nbsp;</td>
</tr>
</table>

On note (lignes 7 à 9) que l'on dimensionne les cellules uniquement sur une ligne. Les largeurs se répercuteront sur les cellules au dessus ou en dessous

Verticalement : rowspan

Figure 2 
<TABLE border="1" width="300">
<TR>
     <TD width="100" rowspan="2" bgcolor="#FF00FF">&nbsp;</TD>
     <TD>&nbsp;</TD>
     <TD>&nbsp;</TD>
</TR>
<TR>
     <TD width="100">&nbsp;</TD>
     <TD width="100">&nbsp;</TD>
</TR>
<TR>
     <TD>&nbsp;</TD>
     <TD rowspan="3" bgcolor="#FFCC66">&nbsp;</TD>
     <TD>&nbsp;</TD>
</TR>
<TR>
     <TD>&nbsp;</TD>
     <TD>&nbsp;</TD>
</TR>
<TR>
     <TD bgcolor="#FF0000">&nbsp;</TD>
     <TD>&nbsp;</TD>
</TR>
</TABLE>

Colonne invisible

En utilisant COLGROUP et COL on crée une colonne virtuelle, qui permet de placer des attributs sur toutes les cellules de la colonne en question. Par exemple des couleurs, ou une largeur...

Figure 3 - Un tableau avec une bonne utilisation de COLGROUP
<TABLE border="1" cellspacing="0" cellpadding="0">
<COLGROUP>
    <COL style="background-color:#4a38f8" width="30"></COL>
    <COL style="background-color:#ff4040" width="50"></COL>
    <COL style="background-color:#3fff7e" width="70"></COL>
    <COL style="background-color:#ffd03f" width="90"></COL>
</COLGROUP>
<TR><TD height="10"></TD><TD></TD><TD></TD><TD></TD></TR>
<TR><TD height="30"></TD><TD></TD><TD></TD><TD></TD></TR>
<TR><TD height="60"></TD><TD></TD><TD></TD><TD></TD></TR>
<TR><TD height="90"></TD><TD></TD><TD></TD><TD></TD></TR>
</TABLE>

Et cela donne :

Présentation

Supports de cours

Et aussi...

Tableaux évolués

Principe

Horizontalement : colspan

Verticalement : rowspan

Colonne invisible