28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je essaye de mettre en forme un tableau pour le rendre un peu plus sympa visuellement.

j aimerai que les bordures des colonnes de mon tableau ne s affiche pas
J ai fait pas mal d essai... mais rien n y fait...

je n arrive meme pas à changer le style des bordures internes de mon tableau...

Quelqu un aurait il la solution ?
merci
Modifié par lcoder (14 Oct 2009 - 11:36)
c'est surprenant mais meme ça... ne fonctionne pas !

et en + je voudrais juste avoir des bordure pour les ligne ...

merci
Voici mon code ...


HTML

	<table  cellpadding="0" cellspacing="0" border="0" class="tabtest" >
	    <thead>
	    <tr height="50" bgcolor="#3D9FC5">
	      <th>titre1 </th>
	      <th>titre2</th>
	      <th>titre3</th>
	      <th>titre4</th>
	    </tr>
	    </thead>
	    
	<tbody >
	<tr height="30">
		<td align="center" style="padding:5px;width:120px;">TEXTE</td>
		<td width="220" style="padding:5px;">TEXTE</td>
		<td width="80" style="padding:5px;text-align:right;">TEXTE</td>
		<td width="220" style="padding:5px;">TEXTE</td>
	
	</tr>
	</tbody>
	</table>



CSS


.tabtest{
border-width:0px;
border-style:None;
border:0px;
}


merci
Bonjour lcoder,

Alors, je t'ai retouché ton morceau de code XHTML et CSS.

Voilà le code XHTML valide :


<!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" >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Bienvenue sur mon site !</title>
		<link rel="stylesheet" type="text/css" href="design.css" media="all" />
    </head>
	
   <body>
   
	<table  cellpadding="0" cellspacing="0" border="0" class="tabtest" >
	    <thead>
			<tr class="entete">
				<th>titre1 </th>
				<th>titre2</th>
				<th>titre3</th>
				<th>titre4</th>
			</tr>
	    </thead>

		<tbody >
			<tr class="ligne_centre">
				<td class="texte_un">TEXTE</td>
				<td class="texte_deux">TEXTE</td>
				<td class="texte_trois">TEXTE</td>
				<td class="texte_quatre">TEXTE</td>
			</tr>
		</tbody>
	</table>

   </body>
</html>


Qu'est-ce que j'ai modifié ?

Tout d'abord, j'ai corrigé les quelques fautes qui étaient présentes, ensuite j'ai crée une feuille de style externe nommée design.css afin de séparer le code XHTML du code CSS.
J'ai attribué des classes à tes tr et à td afin de leurs appliquer le code css de les ,personnaliser si tu préfères.
Bien sûr tu peux, si tu le souhaites, modifier le nom de ces class.

De plus, les balises bgcolor, size, sont invalides et obsolètes, voir cet article.

Voilà ce que ça donne pour le code CSS valide:


/* CSS */

.tabtest {
	border-width: 0px;
	border-style: None;
	border: 0px;
}

tr.entete {
	height: 50px;
	background-color: #3D9FC5;
}

tr.ligne_centre {
	height: 30px;
}

td.texte_un {
	padding: 5px;
	width: 120px;
}

td.texte_deux {
	padding: 5px;
}

td.texte_trois {
	padding: 5px;
	text-align: right;
}

td.texte_quatre {
	padding: 5px;
}


Comme tu peux le constater, ton tableau a le même design que précédemment.

a écrit :
et en + je voudrais juste avoir des bordure pour les ligne ...


Applique la propriété
border: 1px solid #c00;
sur tes td et observe Smiley cligne .