Sujet Précédent Sujet Suivant

Table en css

Résolu/Fermé
jjaco Messages postés 530 Date d'inscription dimanche 20 janvier 2008 Statut Membre Dernière intervention 2 juin 2024 - 14 juin 2011 à 22:21
coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 - 15 juin 2011 à 22:10
Bonjour,
voici un tableau en html
<html>
<head>
<title>table html</title>
</head>
<body>
<table width="75%"" border="2">

<tr height="400">
<td width="33%" bgcolor="#c0c0c0">1</td>
<td width="33%" bgcolor="#c0c0c0">2</td>
<td width="33%" bgcolor="#c0c0c0">3</td>
</tr>
<tr height="400"">
<td width="33%" bgcolor="#c0c0c0">4</td>
<td width="33%" bgcolor="#c0c0c0">5</td>
<td width="33%" bgcolor="#c0c0c0">6</td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>

</body>
</html>
j'aimerais créer une feuille de syle comme ceci:
/* CSS Document */
.table
{
border: medium solid #6495ed;
border-collapse: collapse;
width: 75%;
}
.tbody
{
}
.tr
{
height: 400px;
}
.td
{
border: thin solid #6495ed;
width: 33%;
padding: 5px;
text-align: center;
background-color: #fc0c0c0;
}

et la page html correspondante:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso 8859-1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>table</title>
<link href="table.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class= "table">
<div class="tr">
<div class="td"> 1 </div>
<div class="td"> 2 </div>
<div class="td"> 3 </div>
</div>
<div class="tr">
<div class="td"> 4 </div>
<div class="td"> 5 </div>
<div class="td"> 6 </div>
</div>
</div>
</body>
</html>

Au resultat, j'ai bien un cadre de 75% de ma page, dans lequel apparait des cellules de 33% du cadre (tableau) colorée en gris (#C0C0C0), d'une hauteur de 400px, avec les chiffre écrits centré etc...,
MAIS, les cellules ne sont pas alignées horizontalement par groupe de 3: elles se succèdent à la queueleuleu verticalement
j'ai surement ommis quelque chose

Merci à tous jjaco

6 réponses

Réponse 1 / 6
coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
Modifié par coeus le 15/06/2011 à 14:01
C'est bizarre, j'ai essayé avec ce code (identique à ton dernier, je pense) : 

<!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"> 
 <head> 
 <style> 
  .table { 
   display:table; 
   border: medium solid #6495ed; 
   border-collapse: collapse; 
   width: 75%; 
   } 

  .tbody { } 

  .tr { 
   display:table-row; 
   height: 400px; 
   } 

  .td { 
   display:table-cell; 
   border: thin solid #6495ed; 
   width: 33%; 
   padding: 5px; 
   text-align: center; 
   background-color: #fc0c0c0; 
   } 
 </style> 
 </head> 
 <body> 
  <div class= "table"> 
   <div class="tr"> 
    <div class="td"> 1 </div> 
    <div class="td"> 2 </div> 
    <div class="td"> 3 </div> 
   </div> 
   <div class="tr"> 
    <div class="td"> 4 </div> 
    <div class="td"> 5 </div> 
    <div class="td"> 6 </div> 
   </div> 
  </div> 
 </body> 
</html>


Et ça marche très bien. J'ai testé dans Firefox ET Explorer 8.
J'ai même essayé sans le <doctype> : même résultat...
Bien sûr faut encore spécifier les tailles, les couleurs, etc...
Je suis un paranoïaque à l'inverse : je crois que l'univers conspire à me rendre heureux.
1
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
15 juin 2011 à 14:49
Effectivement il fonctionne très bien de mon côté aussi.
0
Réponse 2 / 6
hanen_k Messages postés 13 Date d'inscription jeudi 9 juin 2011 Statut Membre Dernière intervention 14 juin 2011
14 juin 2011 à 22:57
c'est quoi ton problème j'ai pas bien compris ??
0
Réponse 3 / 6
coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
14 juin 2011 à 22:59
Salut !

Ce que je te conseille, pour aller vite, c'est de jouer avec les styles CSS suivants : 

.table { display:table; }
.tr { display:table-row; }
.td { display:table-cell; }

Normalement, ça devrait faire un travail propre illico.
Dis-moi si ça marche !
0
Réponse 4 / 6
jjaco Messages postés 530 Date d'inscription dimanche 20 janvier 2008 Statut Membre Dernière intervention 2 juin 2024 45
14 juin 2011 à 23:23
Comme ceci?, ça donne pas mieux
je dois tout de même indiquer des parametres, bordure, hauteur, largeur etc...

/* CSS Document */
.table
{ display:table;
border: medium solid #6495ed;
border-collapse: collapse;
width: 75%;
}
.tbody
{
}
.tr
{ display:table-row;
height: 400px;
}
.td
{ display:table-cell;
border: thin solid #6495ed;
width: 33%;
height: 400px;
padding: 5px;
text-align: center;
background-color: #c0c0c0;
}
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
15 juin 2011 à 06:04
Tu as dans ton premier code un tableau html et ensuite une série de div...
Par défaut, les div sont de type block et donc prennent toute la largeur de la ligne ce qui force la suivante à passer à la ligne suivante.

Rajoute dans ton CSS: 
div.td{width:32.2%;float: left;}
Tu devrais avoir tes "cellules" sur une seule ligne.
0
Réponse 6 / 6
jjaco Messages postés 530 Date d'inscription dimanche 20 janvier 2008 Statut Membre Dernière intervention 2 juin 2024 45
15 juin 2011 à 22:06
meci arthezius, ça fonctionne...
encore une question
c'est mieux .table ou #table avec respectivement div class ou div id ?

toutes mes cellules sont grises puisque j'ai choisi c0c0c0
mais comment faire si je souhaite changer la couleur d'une cellule en red par ex?


merci
0
coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
15 juin 2011 à 22:10
c'est mieux .table ou #table

Ça dépend ce que tu veux faire. Si tu es sûr(e) et certain(e) de n'avoir que cette table à avoir ce design sur une page, alors un ID serait conseillé. Mais si tu veux que plusieurs tables partagent la même apparence, alors pas le choix, ce sera une classe.

comment faire si je souhaite changer la couleur d'une cellule en red

Tu changes le code de ta div : 

<div class="td rouge">...</div>

Et tu rajoutes le CSS : 

div.td.rouge { background-color:#F00; }
0

Discussions similaires

Table des matières dont les titres n'apparaissent pas..
Synua -
ggg -

10 réponses
Intégrer une table des annexes et des matières sur word
clairon69 -
Jo -

20 réponses
Création du sommaire sous Word
Licorne rose -
C-Claire -

11 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
insérer une table d'illustration
wood15 -
Cloe -

8 réponses