Table en css
Résolu
jjaco
Messages postés
575
Statut
Membre
-
coeus Messages postés 3296 Statut Membre -
coeus Messages postés 3296 Statut Membre -
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
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
A voir également:
- Table en css
- Table ascii - Guide
- Table des matières word - Guide
- Table des caractères - Guide
- Tableau croisé dynamique ou table de pilote - Guide
- Table des annexes word - Forum Word
6 réponses
C'est bizarre, j'ai essayé avec ce code (identique à ton dernier, je pense) :
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.
<!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.
arthezius
Messages postés
3756
Statut
Membre
475
Effectivement il fonctionne très bien de mon côté aussi.
Salut !
Ce que je te conseille, pour aller vite, c'est de jouer avec les styles CSS suivants :
Normalement, ça devrait faire un travail propre illico.
Dis-moi si ça marche !
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 !
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;
}
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;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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:
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.
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
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
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 :
Et tu rajoutes le CSS :
Ç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; }