18041 sujets

Questions générales et questions de débutants

Bordures personnalisées pour les cellules d'un tableau

Hello,

J'aimerai mettre des bordures personnalisées à un tableau simple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
	<style type="text/css">
	 td {
	  background-image : url(pointille_vert.gif);
	  background-repeat : repeat-y;
	 }
	 tr {
	  background-image : url(pointille_hor.gif);
	  background-repeat : repeat-x;
	 }
	</style>
	</head>
	<body>
		<table>
			<tr>
				<td>1</td>
				<td>2</td>
			</tr>
			<tr>
				<td>3</td>
				<td>4</td>
			</tr>
		</table>
	</body>
</html>


Mais j'ai appris qu'on ne peut pas donner de background-images aux balises td et tr simultanément.
En effet, avec le code ci-dessous seules les bordures horizontales sont visibles.

Comment peut-on donner des bordures personnalisées aux cellules d'un tableau? Y a-t-il un autre moyen?

merci
Modifié par Pascal68bis (06 Feb 2008 - 11:10)
Faire une ou plusieurs images avec plusieurs bordures (à priori deux) à la fois.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="fr" xml:lang="fr">
	<head>
	<title>Test</title>
	<style type="text/css" media="screen">
	table {
		border-collapse: collapse;
	}
	tr td {
		background: url(pointilles-haut-gauche.png) no-repeat left top;
	}
	tr td+td {
		background: url(pointilles-haut-droite.png) no-repeat right top;
	}
	tr+tr td {
		background: url(pointilles-bas-gauche.png) no-repeat left bottom;
	}
	tr+tr td+td {
		background: url(pointilles-bas-droite.png) no-repeat right bottom;
	}
	</style>
	</head>
	<body>
		<table>
			<tr>
				<td>1</td>
				<td>2</td>
			</tr>
			<tr>
				<td>3</td>
				<td>4</td>
			</tr>
		</table>
	</body>
</html>

Remarques:
- les images doivent être assez grandes car on ne peut pas les répéter;
- on pourrait à la rigueur utiliser une image unique et jouer uniquement sur l'alignement de l'image de fond;
- les sélecteurs CSS utilisés ne sont pas compatibles IE6, c'est juste pour l'exemple;
- on doit pouvoir simplifier... cela dépendra du design exact à réaliser.

Plus globalement, ça rejoint la problématique des coins et bordures personnalisés, documentée ici:
http://web.covertprestige.info/test/35-boites-fluides-bords-coins-en-images.html
Sujet clos
Aller à