Probleme avec tableau

Résolu
Balar Messages postés 72 Date d'inscription   Statut Membre Dernière intervention   -  
Balar Messages postés 72 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour, à tous ! je reviens sur le forum avec mon tableau qui a une bordure mais pas de cellules .Merci de votre aide et bisous . Voici mes codes:

<p>voici un paragraphe avnt le tableau</p>
<table>
<thead>
<tr>
<th> Désignation </th>
<th> coût </th>
<th> Annotation </th>
</tr>
</thead>
<tfoot>
<tr>
<th>montant total</th>
<th colspan="2">100£</th>
</tr>
<tbody>
<tr>
<td> achat sable</td>
<td> A </td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> transport sable</td>
<td> A </td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> achat briques</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> transport briques</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> chainage: achat fer</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> achat graviers</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> transport graviers</td>
<td> A </td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> achat ciment</td>
<td> A </td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> maçon:main d'oeuvre</td>
<td> A </td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> toiture:tôle</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> toiture:chevrons</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> plafond:chevrons</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> plafond: contre-plaqués</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> transport</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> portes et fenêtres</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> transport</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> menuisier:main d'oeuvre</td>
<td>A</td>
</tr>
<tr>
<td> électricité:achat matériaux</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> électricien</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> plomberie:achat materiaux</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> plombier</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> revêtement sol:achat</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> revêtement mural</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> peintre</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> financement nourriture</td>
<td> environ 1000£<td>
<td> Assaka-Moun-Té</td>
</tr>
</tbody>
</table>

<p>voici un paragraphe après le tableau</p>
CSS :


table
{
width: 100%;
border: 4px outset green;
border-collapse: collapse;
}

th
{
background-color: #006600;
width: 60%;
padding: 5px;
}

td
{
width: 60%;
border: 1px solid black;
text-align: center;
padding: 5px;
}
Mon tableau n'a pas de cellules
























A voir également:

4 réponses

Réponse 1 / 4
Sandriine Messages postés 1255 Date d'inscription   Statut Membre Dernière intervention   283
 
Les cellules de ton tableau sont les balises <th> et <td>... Alors ton tableau a des cellules...

Explique mieux ton problème stp.
0
Balar Messages postés 72 Date d'inscription   Statut Membre Dernière intervention  
 
je reviendrai sur ta question car "Alain_42 a repéré une erreur dans mon tableau. En fait, en html j'ai des cellules et avec mon css , les cellules ne s'affichent pas .
0
Réponse 2 / 4
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
attention il faut absolument le même nbr de colonnes partout et bien refermer les balises </td> 

<style type="text/css">

table
{
width: 100%;
border: 4px outset green;
border-collapse: collapse;
}

th
{
background-color: #006600;
width: 60%;
padding: 5px;
}

td
{
width: 60%;
border: 1px solid black;
text-align: center;
padding: 5px;
} 
</style>
<p>voici un paragraphe avnt le tableau</p>
<table>
<thead>
<tr>
<th> Désignation </th>
<th> coût </th>
<th> Annotation </th>
</tr>
</thead>
<tfoot>
<tr>
<th>montant total</th>
<th colspan="2">100£</th>
</tr>
<tbody>
<tr>
<td> achat sable</td>
<td> A </td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> transport sable</td>
<td> A </td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> achat briques</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> transport briques</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> chainage: achat fer</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> achat graviers</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> transport graviers</td>
<td> A </td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> achat ciment</td>
<td> A </td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> maçon:main d'oeuvre</td>
<td> A </td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> toiture:tôle</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> toiture:chevrons</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> plafond:chevrons</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> plafond: contre-plaqués</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> transport</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> portes et fenêtres</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> transport</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> menuisier:main d'oeuvre</td>
<td>A</td>
<td></td><!-- erreur là -->
</tr>
<tr>
<td> électricité:achat matériaux</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> électricien</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> plomberie:achat materiaux</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> plombier</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> revêtement sol:achat</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> revêtement mural</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> peintre</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> financement nourriture</td>
<td> environ 1000£</td><!-- erreur là -->
<td> Assaka-Moun-Té</td>
</tr>
</tbody>
</table>

<p>voici un paragraphe après le tableau</p>
0
Balar Messages postés 72 Date d'inscription   Statut Membre Dernière intervention  
 
Je vois que tu as reperé une erreur .je vais revoir mon tableau .merci
0
Balar Messages postés 72 Date d'inscription   Statut Membre Dernière intervention  
 
Je reviens de correction .Tu as vu juste .Mais le probleme n'est pas réglé car mes écritures dans le tableau s'alignent bien en longueur mais la clonne( cherche sponsors ) est superpsée comme si la cellule etait trop petite pour les contenir .Et il n'ya toujours pas de quadrillage à l'interieur du tableau . J'ai besoin d'aide ,Merci!
0
Réponse 3 / 4
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
width: 60%;


3 colonnes de 60% ça fait combien ? surement plus de 100%

si tu veux que tes colonnes soient de largeur différente, mets leur une class

et tu fixe la largeur pour chaque class (avec un total de 100ù)
0
Balar Messages postés 72 Date d'inscription   Statut Membre Dernière intervention  
 
ok; je t'informe que je suis débutant qui apprend à créer son site web grace à lesiteduzero.Les class,dois-je faire comment ? c.a.d en html et en css . stp!
0
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213
 
Si tu veux que toutes tes colonnes aient la même largeur, pas besoin de class, mais il est sûr que 60%*3 ça fait un peu plus de 100% ! ;) (et ce sont des maths, pas des CSS)

Cela dit : pour les class et les id, c'est bien expliqué sur le site du zéro. Sinon, il y a ici aussi :
http://css.mammouthland.net/selecteurs-css-class-id.php

A part ça, il y a encore une erreur dans le code : le tfoot n'est pas fermé. 
<tfoot>
<tr>
<th>montant total</th>
<th colspan="2">100£</th>
</tr>
</tfoot>
<tbody>
0
Réponse 4 / 4
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
  
si tu fixe la largeur sur la premiere ligne elle sera répercutée pour toute la table

<style type="text/css">
table
{
width: 100%;
border: 4px outset green;
border-collapse: collapse;
}

.colonne1
{
background-color: #006600;
width: 40%;
padding: 5px;
}
.colonne2
{
background-color: #006600;
width: 20%;
padding: 5px;
}
.colonne2
{
background-color: #006600;
width: 40%;
padding: 5px;
}
td
{
border: 1px solid black;
text-align: center;
padding: 5px;
} 
</style>
<p>voici un paragraphe avnt le tableau</p>
<table>
<thead>
<tr>
<th class="colonne1"> Désignation </th>
<th  class="colonne2"> coût </th>
<th  class="colonne3"> Annotation </th>
</tr>
0
Balar Messages postés 72 Date d'inscription   Statut Membre Dernière intervention  
 
Merci à notobe et Alain_42 .je vais m'y mettre tout de suite.
0
Balar Messages postés 72 Date d'inscription   Statut Membre Dernière intervention  
 
tu as ecrit deux fois colonne2 en css .J'ai corrigé mais ça ne passe ainsi que td . Ils sont en noir et mon tableau est le même,c a d sans cellules .
0
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213
 
Sauf à avoir d'autres styles contradictoires dans la css, il n'y a aucune raison que le tableau ne s'affiche pas correctement.
Peut-on avoir le code html complet de la page ainsi que le code CSS complet aussi ?
0
Balar Messages postés 72 Date d'inscription   Statut Membre Dernière intervention  
 
ok!
<!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" xml:lang="fr" >
<head>
<title>Assaka-Moun-Té</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design assakaban" href="caid.css" />
</head>
<body>
<div id="en_tête">
</div>
<div id="menu">
<div class="element_menu">
<p><br><br><br>Aidez ce projet</p>
<p>Design: charles ABE</p>
<p><em>Assaka-Moun-Té<br>3 Allée jean perrin<br>93440 Dugny ( France )</em><br><a href="mailto:charlabe@hotmail.fr"> Boite mail</a></p>

</div>
</div>

<div id="corps">
<h1>C.A.I.D </h1>(Centre-Alphabétisation-Informatique-Document) <p>Justificatifs:</p><p> Depuis la crise politico-militaire qui s'est déclaré en 2002, la Côte d'Ivoire connaît une recrudescence du chômage. Les jeunes sont souvent abandonnés à eux-mêmes. Ils sont souvent obligés de battre le pavée toute la journée.<br>Pourtant malgré cette situation difficile, les jeunes s'organisent dans des débats d'idées. Le fait de se rassembler en association pour mieux appréhender leur propre existence, est un geste très fort. Cela démontre leur détermination.</p><p>Objectifs:</p>L'objectif de ce projet est de contribuer à l'amélioration du taux de scolarisation des jeunes du village de Montézo qui dispose d'une école maternelle, d'une école primaire, d'un collège et d'un lycée municipal.<br> Ce centre d'une superficie de 434m2, comprend notamment une salle polyvalente, une bibliothèque, une salle de stockage, une salle informatique et sa gestion est assurée par les jeunes eux-mêmes à travers différentes activités telles que: la buvette, la location de matériels culturels et la vente de produits alimentaires.<br> La réalisation d'un tel projet s'accompagne nécessairement d'importantes contributions financières.</p><p> Il faut noter que l'idée de créer une bibliothèque revêt d'une importance particulière car elle est principale infrastructure culturelle que va posséder le village.<br> La lecture, en cette ère d'internet n'est pas morte,loin de là. Pour naviguer sur le web ne faut-il pas savoir lire? <br>Ce nouvel édifice sera construit sur la nouvelle place du village et favorisera la fréquentation de la bibliothèque par les élèves tout en offrant des services qui viendront accroître leur goût et le plaisir de la lecture.<br> Une priorité pour un enfant est de lui donner l'opportnité d'apprendre et d'acquérir le maximum de moyens pour construire son avenir.<br> En plus une bibliothèque dans le village permettrait aussi d'ouvrir de nouveaux horizons à tous les villageois même si certains ne peuvent que regarder les illustrations, d'attirer certaines personne du village pour aller consulter des livres et documents sur place et selon leurs souhaits. <br>Cette réalisation commentée plus haut va donner un lieu d'annimation aux jeunes et de plus ceux qui gèrent cette structure seraient occupés et valorisés.<br> Les jeunes ne viendront pas dans cet établissement culturel pour se cultiver, mais tout simplement parceque c'est un lieu de vie. <br>Il est donc important qu'ils puissent y trouver des préservatifs.<br> Ce serait aussi l'occasion d'aborder des thèmes comme la campagne de lutte contre le virus VIH et les MST.</p><h2> La mise en place du projet: </h2><p><strong>Emplacement du bâtiment:</strong></p><p> Le village de montézo s'agrandit comme une ville. De nouveaux lotissements ont été effectués où de nouvelles habitations s'installent. Le comité des jeunes a demandé un terrain au chef du village. <br>Celui-ci leur a attribué un emplacement en plein centre ville. C'est l'endroit idéal. </p><p><strong>Fonctionnement du C.A.I.D:</strong></p><p>Les partenaires:</p><ul class="retrait"><li> Le comité des jeunes<br>Le comité des jeunes va désigner une équipe de 4 personnes pour gérer la structure. Il s'agit du président de niveau bac+2, qui va se charger de la location des materiels culturels,du vice président de niveau bac+3 qui va s'occuper de la bibliothèque avec le sécrétaire. Une autre personne va animer la buvette. Dans un avenir proche, la gestion des livres pourrai être informatisée. Ce qui nécessiterait la formation des bibliothécaires.</li><li>Les villageois: <br>La participation serait au niveau de la main d'oeuvre pour la construction.</li><li> Les enseignants: <br>Une collaboration étroite est à mettre en place pour que les élèves prennent goût à la découverte, à la lecture, au dessin, au coloriage, à la science, etc.</li><li> Assaka-Moun-Té:<br>L'association met à la disposition du projet un budget de 1000 euros pour financer la nourriture durant les travaux. </li><li> Des mécènes ou sponsors:<br> Nous recherchons des partenaires pour aider au financement du reste et à l'obtention des livres pour la bibliothèque.</li></ul><p> CONCLUSION:<br>La Journée de Découverte Assaka-moun-té est une vraie réussite car à la fin de l'entretien qui s'est tenu entre l'association,le comité des jeunes et le chef du village a abouti à une revendication des jeunes. Leur réflexion les a amené sur la réalisation d'un lieu de rencontre. Ainsi ils pourront se retrouver dans un espace de communication et d'échange d'idées. De cette idée nait le projet"C.A.I.D."</p>
<h3>Le budget prévisionnel: </h3>
<p>A) le bâtiment </p>

<table>
<thead>
<tr>
<th class="colonne1"> Désignation </th>
<th class="colonne2"> coût </th>
<th class="colonne3"> Annotation </th>
</tr>
</thead>
<tfoot>
<tr>
<th>montant total</th>
<th colspan="2">100£</th>
</tr>
</tfoot>
<tbody>
<tr>
<td> achat sable</td>
<td> A </td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> transport sable</td>
<td> A </td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> achat briques</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> transport briques</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> chainage: achat fer</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> achat graviers</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> transport graviers</td>
<td> A </td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> achat ciment</td>
<td> A </td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> maçon:main d'oeuvre</td>
<td> A </td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> toiture:tôle</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> toiture:chevrons</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> plafond:chevrons</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> plafond: contre-plaqués</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> transport</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> portes et fenêtres</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> transport</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> menuisier:main d'oeuvre</td>
<td>A</td>
<td>cherche sponsors</td>
</tr>
<tr>
<td> électricité:achat matériaux</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> électricien</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> plomberie:achat materiaux</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> plombier</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> revêtement sol:achat</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> revêtement mural</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> peintre</td>
<td> A</td>
<td> cherche sponsors</td>
</tr>
<tr>
<td> financement nourriture</td>
<td> environ 1000£</td>
<td> Assaka-Moun-Té</td>
</tr>
</tbody>
</table>
<p>B ) Le mobilier</p><table>

</div>
</div>
<div id="pied_de_page">
</div>
</body>
</html>

Et en CSS !



/* styles généraux de la page */
body
{
width: 700px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: #303D58;
}
/* l'en-tête */
#en_tête
{
width: 760px;
height: 90px;
margin-bottom: 5px;
border: 3px dotted #F7E444;
background-image: url("bako.jpg");
background-repeat: no-repeat;
background-position: bottom right;
}
/* Le menu */
#menu
{
width: 140px;
float: left;
}
.element_menu
{
margin-top: 0px;
background-color: black;
color: #F7E444;
border: 2px dotted #F7E444;
padding: 5px;
}
/* styles des menus */
.element_menu a
{
color: white;
text-decoration: none;
}

/* styles du corps */

#corps
{
width: 600px;
margin-left: 150px;
margin-bottom: 20px;
padding: 5px;
color: #F7E444;
background-color: black;
font-family: Arial, "times New Roman" Times, sans-serif;
border: 2px dotted #F7E444;
}

table
{
width: 100%;
border: 4px outset green;
border-collapse: collapse;
}
.colonne1
{
background-color: #006600;
width: 40%;
padding: 5px;
}
.colonne2
{
background-color: #006600;
width: 20%;
padding: 5px;
}

.colonne3
{
background-color: #006600;
width: 40%;
padding: 5px;
}

td
{
border: 1px solid white;
text-align: center;
padding: 5px;
}



voila c'est fait !
0
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213
 
Verdict : c'est nickel, aucun problème !

Testé sous FF et IE : un tableau à fond noir, bordures internes blanches, écriture jaune, bords externes verts, en tête fond vert...

Il n'y a que les les cellules th qui ne sont pas bordées, ce qui se règle en ajoutant th derrière td : 

td, th
{
border: 1px solid white;
text-align: center;
padding: 5px;
}
0

Discussions similaires

Formule taux de marque
vcloclo1 -
vcloclo1 -

26 réponses
Tableau croisé dynamique - absence de certaines données
crazyrider71 -
Hana -

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

3 réponses