Sujet Précédent Sujet Suivant

Utilisation de <div> pour tableau

Fermé
caced Messages postés 129 Date d'inscription samedi 27 mars 2010 Statut Membre Dernière intervention 27 novembre 2020 - 12 févr. 2011 à 11:59
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 - 12 févr. 2011 à 17:47
Bonjour,

Toujours dans ma petite formation html/css.
Je suis en train d'apprendre à créer des tableaux et j'ai donc appris qu'il vaut mieux utiliser <div> pour centrer un contenu si j'utilise css.
Je voudrais donc par exemple centrer "MON PETIT TABLEAU", comment dois-je mettre les <div>, j'ai fait plusieurs essais, je ne trouve pas la solution.
Merci de votre aide

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>modele tableau</title>

<style type="text/css">

table{border-style:inset;border-width=thick;border-color:red; border-bottom:inset; width:500}
td,th{padding:16px;border-style:solid;border-width:medium;border-color:gray;}
pieddepage{padding:5px}

</style>
</head>

<body>
<table >

<tr>
<td colspan="2">MON PETIT TABLEAU</td>
</tr>

<tr>
<td><img src="sansfond3.png" alt="sansfond3" width="140" height="100" /> tableau <br /></td>
<td>ceci est un test</td>
</tr>

<td>voila mon 2eme tableau</td>
<td>ainsi qu'un autre exemple</td>
</tr>

</table>
</body>
</html>

7 réponses

Réponse 1 / 7
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
12 févr. 2011 à 13:21
Je propose: 
div#container{width:500px;position:absolute;left:50%;margin-left:-250px;}

Je sais que d'autres répondront: 
div#container{width:500px;margin:0px auto;}

Sauf que cette solution ne marche pas avec IE6.
0
Réponse 2 / 7
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
12 févr. 2011 à 13:22
Non, ce n'est pas exactement cela :

- Pour faire de la mise en page, il vaut mieux utiliser des div que des tableaux
- Pour mettre en forme des données tabulaires, on utilise bien des tableaux.

Centrer un tableau ne demande donc pas particulièrement de div.

Voir ici pour un tuto complet :
https://openweb.eu.org/articles/tableaux_css
0
Réponse 3 / 7
caced Messages postés 129 Date d'inscription samedi 27 mars 2010 Statut Membre Dernière intervention 27 novembre 2020 6
12 févr. 2011 à 14:05
Alors,

@notobe, j'avais déjà repéré ce tuto et je m'en suis servi pour mieux comprendre ce que j'apprenais dans mon chapitre précédant.

Je sais qu'on peux utiliser d'autres fonctions pour center l'intérieur d'une cellule, mais je souhaite comprendre le fonctionnement de div (bien que mon livre recommande cette utilisation "imbriquer le tableau dans un élément <div> et utiliser la propriété text-aligne pour en centrer le contenu : div.mytable{text-align:center;} (recommandé)" pour cité cette partie.

@arthezius : que veut dire #container
et dans le cas de mon exemple ou dois-je mettre cette formule et la rappeler pour de centrer qu'une cellule ?

Merci
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
12 févr. 2011 à 14:21
div#container correspond à <div id="container"></div>

Dans mon exemple, le div se retrouve centré dans la page. Tu peux visualiser le résultat en ajoutant provisoirement une couleur de fond au div. 
background:#f00;
0
Réponse 4 / 7
caced Messages postés 129 Date d'inscription samedi 27 mars 2010 Statut Membre Dernière intervention 27 novembre 2020 6
12 févr. 2011 à 14:31
Ok, donc j'ai essayé en faisant ça, mais ça ne me le centre pas comme il faut :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>modele tableau</title>

<style type="text/css">

table{border-style:inset;border-width=thick;border-color:red; border-bottom:inset; width:500}
td,th{padding:16px;border-style:solid;border-width:medium;border-color:gray;}
pieddepage{padding:5px}
div#container{width:500px;position:absolute;left:50%;margin-left:-250px;background:#f00;}

</style>
</head>

<body>
<table >

<tr>
<td colspan="2"><div id="container">MON PETIT TABLEAU</div></td>
</tr>

<tr>
<td><img src="sansfond3.png" alt="sansfond3" width="140" height="100" /> tableau <br /></td>
<td>ceci est un test</td>
</tr>

<td>voila mon 2eme tableau</td>
<td>ainsi qu'un autre exemple</td>
</tr>

</table>
</body>
</html>
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
Modifié par notobe le 12/02/2011 à 15:12
pas besoin de div ! surtout avec une position abolue... 
<td colspan="2" style="text-align:center">MON PETIT TABLEAU</td>

ou 
<td colspan="2" class="centre">MON PETIT TABLEAU</td>  

.centre {text-align:center}

ou encore, et toutes les cellules auront leur contenu centré : 
td {text-align:center}
0
caced Messages postés 129 Date d'inscription samedi 27 mars 2010 Statut Membre Dernière intervention 27 novembre 2020 6
12 févr. 2011 à 15:30
J'ai bien compris qu'il y a des façons plus simple. Je cherche juste à comprendre pour pouvoir réutiliser <div> dans d'autres circonstances. Je ne suis pas en train de créer une page mais de découvrir html, css. Même si on en a pas besoin dans ce cas là, il est tout de même possible de l'inclure, je cherche à comprendre comment.
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
Modifié par notobe le 12/02/2011 à 18:42
Alors il faut prendre un autre type de test, plus simple. Car imbriquer des div dans des tables, ça n'a pas vraiment de sens ;)

Essaye plutôt : 

<div class="test1"> 
<p>Mon texte de test centré</p> 
</div> 
<div class="test2"> 
<p>Mon bloc de test positionné au centre de la page</p> 
</div> 
<div class="test3"> 
<p>Mon bloc de test positionné au centre de la page avec le texte centré</p> 
</div> 

.test1 { 
border:1px solid red; 
padding:10px; 
width:50%; 
text-align-center; 
} 
.test2 { 
border:1px solid red; 
padding:10px; 
width:50% ;
margin:auto; 
} 
.test3 { 
border:1px solid red; 
padding:10px; 
width:50%; 
text-align-center; 
margin:auto; 
}
0

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

Posez votre question
Réponse 5 / 7
caced Messages postés 129 Date d'inscription samedi 27 mars 2010 Statut Membre Dernière intervention 27 novembre 2020 6
12 févr. 2011 à 16:11
Ok, j'ai pense comprendre, les tables et les div ont la même fonction de mise ne page de tableaux.

Alors questions :
- avec les div, comment fait-on pour fusionner des cellules ?
- A quoi d'autre peuvent servir les div ?
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
12 févr. 2011 à 16:29
euh non ! Les tables et les div n'ont pas la même fonction de mise en page : les tables normalement sont faites pour mettre en forme des données tabulaires, les div sont (entre autre) pour la mise en page.

- les div ne sont pas des cellules (ce n'est pas fait pour faire un tableau), donc pas de fusion.
- les div servent à plein de choses ;). Ce sont des blocs auxquels on peut attribuer différents fonctions pour faire la mise en page (positionnement, couleurs, style de police, etc).

Et hop, une petite lecture supplémentaire : http://css.mammouthland.net/mise-en-page-sans-tableau.php
0
Réponse 6 / 7
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
12 févr. 2011 à 16:23
J'ai du mal comprendre.
Je pensais que tu voulais faire quelque chose comme ça: 
<div id="container">
<table>
<tr>
<td>Cellule 1</td><td>Cellule 2</td>
</tr>
</table
</div>

Je pensais que tu voulais centre le tableau dans la page avec un div...
0
Réponse 7 / 7
caced Messages postés 129 Date d'inscription samedi 27 mars 2010 Statut Membre Dernière intervention 27 novembre 2020 6
12 févr. 2011 à 17:33
@arthesius : Je voulais juste centrer l'intérieur d'une cellule de mon tableau et je pensais pouvoir le faire avec div

@notobe : merci pour ce site, très intéressant. Et hop, dans les favoris.

Merci à vous 2.
Je continu mon apprentissage, j'aurais sûrement de nouvelles questions :-)
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
12 févr. 2011 à 17:47
Effectivement un text-align suffit amplement.
En tout cas, j'aurai pas dit mieux que notobe.
0

Discussions similaires

ou sont les bananes ?
Liline -
Le Pro -

2 réponses
Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport
Utilisateur anonyme -
TomH. -

13 réponses
Nom de champs du tableau croisé dynamique non valide
Kazooie123 -
SajDri -

6 réponses
generateur de combinaison du loto 5/90
Riccilo -
ccm81 -

3 réponses
Bibliothèque
cosjac85 -
renard bleu -

3 réponses