Utilisation de <div> pour tableau
caced
Messages postés
129
Date d'inscription
Statut
Membre
Dernière intervention
-
arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention -
arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention -
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>
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>
A voir également:
- Div tableau
- Tableau word - Guide
- Tableau ascii - Guide
- Trier un tableau excel - Guide
- Tableau croisé dynamique - Guide
- Imprimer tableau excel sur une page - Guide
7 réponses
Je propose:
Je sais que d'autres répondront:
Sauf que cette solution ne marche pas avec IE6.
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.
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
- 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
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
@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
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>
<!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>
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.
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 :
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;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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 ?
Alors questions :
- avec les div, comment fait-on pour fusionner des cellules ?
- A quoi d'autre peuvent servir les div ?
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
- 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
J'ai du mal comprendre.
Je pensais que tu voulais faire quelque chose comme ça:
Je pensais que tu voulais centre le tableau dans la page avec un div...
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...
