Utilisation de <div> pour tableau [Fermé]

Signaler
Messages postés
131
Date d'inscription
samedi 27 mars 2010
Statut
Membre
Dernière intervention
16 janvier 2019
-
arthezius
Messages postés
3549
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
-
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

Messages postés
3549
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
440
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.
Messages postés
1959
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
204
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
Messages postés
131
Date d'inscription
samedi 27 mars 2010
Statut
Membre
Dernière intervention
16 janvier 2019
7
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
arthezius
Messages postés
3549
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
440
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;
Messages postés
131
Date d'inscription
samedi 27 mars 2010
Statut
Membre
Dernière intervention
16 janvier 2019
7
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>
notobe
Messages postés
1959
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
204
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}
caced
Messages postés
131
Date d'inscription
samedi 27 mars 2010
Statut
Membre
Dernière intervention
16 janvier 2019
7
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.
notobe
Messages postés
1959
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
204
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; 
}
Messages postés
131
Date d'inscription
samedi 27 mars 2010
Statut
Membre
Dernière intervention
16 janvier 2019
7
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 ?
notobe
Messages postés
1959
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
204
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
Messages postés
3549
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
440
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...
Messages postés
131
Date d'inscription
samedi 27 mars 2010
Statut
Membre
Dernière intervention
16 janvier 2019
7
@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 :-)
arthezius
Messages postés
3549
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
440
Effectivement un text-align suffit amplement.
En tout cas, j'aurai pas dit mieux que notobe.