Table 100% CSS - aide

Version imprimable

Bonjour.

Y a un temps, j'utilisais des balises table dans mes codes mais maintenant, je chercher à utiliser que du CSS. J'ai réussi à faire ce qui suit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<html>
<head>
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css">
 
.table { display: table; }
.group {display: table-row-group; }
.row { display: table-row; }
.cell { display: table-cell; border:1px solid black; }
 
  </style>
</head>
 
<body>
 
<div class="table">
  <div class="group">
 
    <div class="row">
      <div class="cell" style="width:174px;background-color:blue">
        ligne1 - gauche
      </div>
      <div class="cell" style="width:802px;background-color:yellow">
        ligne1 - centre du coté droit
      </div>
  </div>
 
  <div class="row">
    <div class="cell" style="border:1px solid gray">
      ligne 2 - tout l'espace
    </div>  
  </div>
 
  <div class="row">
    <div class="cell" style="border:1px solid gray">
      ligne 3 - tout l'espace
    </div>
  </div>
 
  </div>
</div>
 
</body>
</html>

Je n'arrive pas à faire une ligne ou plusieurs lignes pleine.
Mon code ci-haut va vous donner une idée ce que je veux faire.

J'ai vraiment besoin d'une aide puisque je trouve pas d'exemple
pour ce que je veux faire.

ça serait sympat. Merci.

11/05/2013, 10h06
rodolphebrd

Bonjour,

Si j'ai bien compris il faut appliquer width:100% à la classe "cell"
11/05/2013, 10h16
dancom5

oui.

rangé 1 à 2 colonnes
rangé 2 à 1 colonne qui prends la place de 2 colonnes.
rangé 3 à 1 colonne qui prends aussi la place de 2.
rangé .....

c'est pour savoir comment le faire.

Avec caption, je peux faire 1 colonne qui prends la largeur.
mais, on ne peut pas faire 10 rangées avec caption et ce n'est pas le best.
11/05/2013, 11h36
dancom5
Merci pour le lien mais ce n'est pas des block séparés de la
table que je veux.

Normalement, si j'utilisais des balises TABLE, je mettrais que
Code:

1 2 <td rowspan="2">....</td>
mais en CSS, ça n'existe pas. Pas selon mes recherches actuelles.

Je pourrais utiliser aussi CAPTION mais je ne peux pas faire 10 rangées
avec. cela.

C'est l'équivalent de ceci que je veux faire :
Code:

1 2 3 4 5 6 7 8 9 <table> <tr> <td>asdf</td> <td>asdf</td> </tr> <tr> <td>asdf</td> </tr> </table>
Pour obtenir 1 rangée à 2 colonnes
et 1 rangé à 1 colonne qui fait toute la place.

Bien sur, je ne veux pas utiliser de balise de Table,
c'est du CSS comme table-row, etc que je veux utiliser
dans une feuille de style.

J'ai passé plusieurs heures à chercher, et rien du tout.

Voici un exemple concernant votre question.
Dans ce cas il n'es pas utile de positionner le parent avec TABLE.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
.row {
        background:salmon;
        width:404px;
}
.cell {
        display: table-cell;
        border: 1px solid black;
        background:silver;
        width:200px;
}
</style>
</head>
 
<body>
<div>
      <div class="cell" > ligne1 - gauche </div>
      <div class="cell"> ligne1 - centre du coté droit </div>
</div>
<div>
      <div class="cell"> ligne 2 - tout l'espace </div>
      <div class="cell"> </div>
      <div class="row"> rangée </div>
</div>
</body>
</html>

12/05/2013, 12h06
Candygirl

Hello,

Citation:

Envoyé par dancom5

Bonjour.

Y a un temps, j'utilisais des balises table dans mes codes mais maintenant, je chercher à utiliser que du CSS.

Tu veux dire que tu utilisais des balises table dans un but de mise en page et non pour présenter des données tabulaires ? Les balises table restent utiles pour les vrais tableaux ;)

En ce qui concerne leur remplacement pour des raisons de mise en page, c'est toute la manière de penser le montage (y compris le découpage du design) qui est à revoir. Les remplacer automatiquement par des display:table n'est pas forcément la meilleure approche. En ce sens, il serait intéressant de nous montrer le résultat final que tu souhaites obtenir afin de déterminer ce qui est le plus judicieux.

1 pièce(s) jointe(s)

C'est apprécié de l'aide. Merci.

En ce moment, je ne peux faire qu'une ligne en tableau et l'en-tete et le pied de page en block.
Code:

1 2 3 4 5 6 7 #container { display:table; border-collapse:separate; border-spacing:4px; width:994px; } #row { display:table-row; } #left { display:table-cell; width:184px; background:url('./imgs/cols.png') repeat-y 0 0; } #middle { display:table-cell; width:810px; background:url('./imgs/cols.png') repeat-y -184px 0; } #header { width:988px; height:110px; margin-left:auto; margin-right:auto; background:url('./imgs/header.jpg') no-repeat top center; } #footer { width:988px; height:25px; margin-left:auto; margin-right:auto; background:url('./imgs/header.jpg') no-repeat top center; } #wraper { width:994px; padding:3px 1px 3px 1px; margin-left:auto; margin-right:auto; text-align:center; background-color:white; }
Caption, je peux faire l'en-tête et le pied mais si je veux plus d'une ligne de cellules et qui sont de différentes dimensions, j'ai un problème.

C'est pour faire autant ma mise en page que pour placer des données.

Je veux éviter d'utiliser

Code:

<tabe><tr>et<td>

Pourquoi que colspan dans ce cas-ci, n'existe pas. Ça aurait été tellement simple. L'image, c'est ce que je veux faire pour des données et aussi pour la mise en page en parti.

14/05/2013, 10h40
Candygirl

Ce que je demandais c'est le résultat final. C'est à dire une maquette sur laquelle on voit les images, le texte, le graphisme,... Que l'on puisse regarder s'il s'agit d'un design "standard" réalisable sans display:table.

Sur ton schéma, tu découpes en "cellules de tableaux" parce que c'étais ta manière de procéder mais cela ne nous avance pas plus pour te conseiller sur le plus efficace à faire niveau css. On ne voit pas si ce sont des images de tailles fixes qui sont supposées venir dans une "case", du texte extensible, une image de fond qui se répète,...

Bonjour. Merci de vous être donnée la peine de répondre.

css:
Code:

1 2 3 4 5 6 #albumbot_container { display:table; border-collapse:collapse; width:764px; } #albumbot_row { display:table-row; border-right-width:1px; border-left-width:1px; border-right-color:black; border-left-color:black; border-right-style:dotted; border-left-style:dotted; } #albumbot_middle { display:table-cell; width:764px; height:134px; background:url('./imgs/album_body.png') repeat 0 0; } #albumbot_header { width:764px; height:44px; margin-left:auto; margin-right:auto; background:url('./imgs/album_header.png') repeat-y 0 0; } #albumbot_footer { width:764px; height:10px; margin-left:auto; margin-right:auto; background:url('./imgs/album_footer.png') repeat-x 0 0; } #albumbot_wraper { width:764px; margin:20px auto 20px 17px; text-align:center; }
html:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <div id="albumbot_wraper"> <div id="albumbot_header"><h2>Porte-Folio</h2></div> <div id="albumbot_container"> <div id="albumbot_row"> <div id="albumbot_middle"> contenu dans une cellule 1 colonne, 1 rangée </div> </div> </div> <div id="albumbot_footer"></div> </div>
Illustration:
ça donne un en-tête et un pied qui ne font pas partis du tableau.
J'ai juste une ligne de donnée dans une même cellule du tableau
qui sont les images.

Je peux ajouter sans problème, une cellule sur 1 colonne sur plusieurs rangées.

Mais je ne peux pas ajouter trois ou quatre cellules sur une rangées à cause
que j'ai une rangée à 1 colonne.

Sauf si je mets des balise <table><tr><td> ainsi de suite.

Le contenu peut être du texte, des images avec balises img. etc.

C'est ce que je souhaite, pouvoir créer sans utiliser de balises sauf DIV.

C'est pour faire du design et aussi faire des données dans des cellule.
C'est mon but. Je sais pas comment expliquer autrement.