Bonsoir,
Je ne suis pas un spécialiste de ipb, mais j'ai déjà été confronté au pb des background dans les tables.
Comme personne n'a propose, je vous soumet ce que j'ai fait, mais attention c'est un peu lourdingue et pas très esthétique au niveau du code.
-- Reformulation du problème --
En appliquant des backgrounds dans les row, les uns les mettent au niveau du row les autres au niveau data. Lorsque le background est une image que l'on veut sur tout le row, il y a pb. (Je ne rentre pas dans qui a tord qui a raison par rapport à W3C).
-- Proposition 1 --
Si la largeur de la table est fixe (ce qui semble être votre cas) ET si vous etes un habitué du graphisme, vous pouvez découper votre image en autant de partie qu'il y a de td. C'est minutieux mais pas très long.
Ensuite vous affectez chaque td avec class ou id correspondant au background qui comprend la partie de l'image voulue.
-- Proposition 2 --
On ne touche pas à l'image, au dégradé.
Dans votre "table" disons de niveau 1, vous mettez le style dont vous avez besoin.
Ensuite pour chaque "tr" de cette table on applique un "background" different au moyen d'un "div":
- la "tr" de la table niveau 1 n'a qu'une seule "td",
- cette "td" commence par un "div",
- elle se poursuit par une nouvelle "table" de niveau 2, qui comprend les colonnes que vous souhaitez,
- on clôt la "table" de niveau 2, on clôt le "div", on clôt la "td" de niveau1, la "tr" de niveau 1,
- on passe à la "tr" de niveau 1 suivante.
Ceci peut donner un code du genre:
-- XHTML 1.0 --
<body>
<table class="niv1">
<colgroup>
<col span="2" />
</colgroup>
<thead>
<tr>
<th>titre col1</th>
<th>titre col2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="datimag">data A1</td>
<td>data A2</td>
</tr>
<tr>
<td>data B1</td>
<td>data B2</td>
</tr>
<tr>
<td colspan="2">
<div class="fondligne3">
<table> <!-- niveau2 -->
<colgroup>
<col span="2" />
</colgroup>
<tbody>
<tr>
<td>dataC1</td>
<td>dataC2</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="fondligne4">
<table> <!-- niveau2 -->
<colgroup>
<col span="2" />
</colgroup>
<tbody>
<tr>
<td>dataD1</td>
<td>dataD2</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
-- CSS --
body {color: #000000; background: #606060}
table.niv1
{width: 400px; background: #808080}
col
{width: 50%}
td.datimag
{background: url("OngRes03.bmp") no-repeat 0px 0px}
div.fondligne3
{background: url("OngOcc03.bmp") repeat 0px 0px}
div.fondligne4
{background: url("OngInf05.bmp") repeat 0px 0px}
table.image2
{width: 400px}
Attention aux "margin", "padding", et autres "border-spacing" par defaut. J'ai mis des fonds différents pour attirer votre attention, mais vous savez sans doute!
