Tableau : ligne avec fond transparent une fois sur deux

Bonjour,

Je souhaiterai créer un tableau de 7 colonnes égales en largeur avec des lignes alternant tantôt un fond transparent, tantôt un fond gris.

Les résultats obtenus sont loins d'être satisfaisant.

Voilà ce que je souhaite obtenir :

#suivicom { margin:30px 0px 0px 0px; /*border:solid black 1px;*/ width:540px; height:250px;
}
#suivicom table { 
}
#suivicom tr.entete td { width:14%; height:45px; font-size:8px; background-color:none; }
#suivicom tr { background-color:#999999; height:8px; }
#suivicom tr.inter { background-color:none; height:8px; }

 <div id="suivicom">
          <table width="540" border="0">
            <tr class="entete">
              <td>NUM&Eacute;RO COMMANDE</td>
              <td>SUFFIXE COMMANDE</td>
              <td>R&Eacute;F&Eacute;RENCE CLIENT</td>
              <td>DATE LIVRAISON SOUHAIT&Eacute;E</td>
              <td>DATE<br />
              EXP&Eacute;DITION</td>
              <td>&Eacute;TAT DE LA COMMANDE</td>
              <td>SUIVI</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr class="inter">
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr class="inter">
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr class="inter">
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
          </table>

Modifié par karnabal (21 Aug 2006 - 11:41)

Deux choses :

1 - D'une, tes hauteurs de ligne à 8px ne serviront à rien, vu les propriétés des tableaux (une cellule s'étire en hauteur lorsqu'elle en a besoin), les retraits internes des cellules, etc. De plus, il est peu intéressant de fixer la taille du texte en pixels (surtout à 8px !), d'autant plus que ce paramètre sera tout simplement négligé par certains navigateurs qui permettent de fixer une taille minimale pour le texte (chez moi, aucune police ne s'afficher à moins de 12px de hauteur de caractère). À titre informatif, chez moi la cellule moyenne de ton tableau fait 20px de hauteur. Sa taille augmente ou diminue selon la taille par défaut que je donne au texte.

2 - D'autre part, tu ne peux pas demander la couleur "none" pour la propriété background-color. La couleur "none" n'existe pas. Tu peux soit demander la couleur transparente (background-color: transparent;), soit demander à ne pas avoir de fond (image ou couleur) du tout avec background: none;. La deuxième solution me semble mieux supportée par les divers navigateurs (à confirmer).

Bonjour,

background: none signifie background-image: none en raccourci et ne concerne pas la couleur

(background n'est qu'une syntaxe, et non une propriété dotée de valeurs spécifiques)
Modifié par Laurent Denis (21 Aug 2006 - 12:18)

Merci de vos interventions à tous les deux.

Je précise que l'on m'a donné des valeurs fixes pour l'ensemble du projet. C'est un graphiste (visiblement pas très porté sur le web) qui a réalisé l'ensemble du webdesign qu'on me demande aujourd'hui d'intégrer. Petite anecdote, les tailles de tous les textes m'ont été donné en points avec une table de conversion artisanale pour passer tout ça en pixels.

Voilà pourquoi j'indique les valeurs en pixels. Pour mes sites 100% maison je ne travaille les textes qu'en valeurs relatives.

Voici mon code modifié :

#suivicom { margin:30px 0px 0px 0px; /*border:solid black 1px;*/ width:540px; height:250px;
}
#suivicom table { background:none;
}
#suivicom tr.entete td { width:14%; height:45px; font-size:8px; background-color:transparent; }
#suivicom tr { }
#suivicom tr.inter {  background-color:#999999; }

Résultat

Ca progresse mais j'ai encore :

1. Des lignes de hauteurs différentes.

2. Les contours des colonnes que je souhaite de la même couleur que le fond de la ligne pour les lignes colorées (voir capture d'écran).

Une idée pour remédier à ces deux problèmes ?
Modifié par karnabal (21 Aug 2006 - 12:44)

Laurent Denis a écrit :
background: none signifie background-image: none en raccourci et ne concerne pas la couleur

D'après un petit test effectué à l'instant, les navigateurs suivants ne sont pas de cet avis :
- Firefox 1.5 ;
- Opera 9 ;
- Konqueror 3.5 ;
- Internet Explorer 6.0.

Voici le fichier de test utilisé. Un background-color: transparent fait disparaître la couleur de fond, de même qu'un background: none. Par contre, le background-image: none et le background-color: none n'ont pas d'effet.

J'en conclus donc que background: none n'est une formulation courte pour background-color: none ou pour background-image: none.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test sur "background: none"</title>
	<style type="text/css">
	p {background-color: yellow; padding: .4em;}
	code {color: red;}
	</style>
</head>
<body>
	<p>Tous les paragraphes : <code>p {background-color: yellow;}</code></p>
	<p style="background-color: none;">Ce paragraphe : <code>background-color: none;</code></p>
	<p style="background-color: transparent;">Ce paragraphe : <code>background-color: transparent;</code></p>
	<p style="background-image: none;">Ce paragraphe : <code>background-image: none;</code></p>
	<p style="background: none;">Ce paragraphe : <code>background: none;</code></p>
</body>
</html>

Modifié par mpop (21 Aug 2006 - 19:24)

Pour répondre à karnabal :
Je trouve ça dommage d'utiliser des lignes de tableau vide pour créer ces espaces blancs. D'autant plus que si on regarde la capture d'écran que tu donne, on se rend compte que le texte de certaines entrées utilise deux lignes et non pas une seule. D'où : deux lignes graphiques (une grise puis une blanche) = une seule ligne de tableau.

Ce que j'ai réussi à faire comme suit :

#suivicom table {border-collapse: collapse;}
#suivicom td {
	height: 2.7em; vertical-align: top;
	background: #ddd url(blanc.png) left 1.4em repeat-x;
}

L'image "blanc.png" est une image toute blanche de 1px (ou plus si on veut) de large, et suffisamment grande en hauteur (en PNG on peut monter à 100 ou 200 pixels sans inquiétude), au cas où. Elle est placée à gauche de la cellule, et à 1.4em du haut de la cellule. Le haut de la cellule est donc gris (couleur de fond), et le bas est blanc (couleur de l'image).

On peut donc virer les lignes inutiles.

Et le border-collapse permet de supprimer les petites bordures blanches.

Pour le moins astucieux, malheureusement ça ne marche pas.

#suivicom { margin:30px 0px 0px 0px; /*border:solid black 1px;*/ width:540px; height:250px;
}
#suivicom table {border-collapse: collapse; }

#suivicom td {
	height: 2.7em; vertical-align: top;
	background: #ddd url(blanc.png) left 1.4em repeat-x;
	font-size:9px;
}
#suivicom tr.entete td { width:14%; height:45px; font-size:8px; }

C'est là.

J'ai essayé en décomposant

background: #ddd url(blanc.png) left 1.4em repeat-x;

en

background-color:#ddd; background-image:url(images/blanc.png); background-position:left; etc

On obtient l'effet escompté mais mon texte ne tombe pas systématiquement en face des "lignes".

#suivicom table {border-collapse: collapse; }

#suivicom td {
	border:solid black 1px;
	height: 16px; 
	vertical-align:top;
	background-color:#E7E7E7;
	font-size:10px;
	background-image:url(images/blanc.png);
	background-position:left;
	background-repeat:repeat-x;
}

Modifié par karnabal (22 Aug 2006 - 10:03)

karnabal a écrit :
On obtient l'effet escompté mais mon texte ne tombe pas systématiquement en face des "lignes".

C'est à dire ?

Tu as bien utilisé les propriétés suivantes pour le fond ?

background-color: #ddd;
background-image: url(images/blanc.png);
background-position: left 1.4em;
background-repeat: repeat-x;

Aussi, le 1.4em (le fond est placé à 1,4em du haut de l'élément) devra peut-être être affiné, en fonction de la taille de la cellule.
La cellule doit faire la taille de deux lignes de texte, et l'image de fond doit être placée à partir de la moitié de la cellule, en gros.

Attention au fait que les cellules de tableau s'étendent en fonction de leur contenu !