Partage
  • Partager sur Facebook
  • Partager sur Twitter

Tableau et cellules

Tableau et cellules

Sujet résolu
    21 avril 2017 à 9:10:43

    Bonjour à tous,

    j'ai un problème que j'arrive pas à trouver une solution.

    voici une image du tableau que je veux obtenir :

    et voici mon code qui me met une collonne que j'arrive pas a savoir pourquoi :

    <table  style="width:80%;text-align:left;font-size:12px;">
    <tr style="text-align:left;" >
    	<th style="border:0px" colspan="4" >
    	Titre du tableau
       </th>
    </tr>
    	<tr style="text-align:center;">
    		<th rowspan="2">Date</th>
    		<th rowspan="2">Det</th>
    		<td ><th rowspan="2">Qte</th>
    		<th colspan="2">Capitaux</th></td>
    	</tr>
    	<tr style="text-align:center;">	
    		<td>
    			<th>Debit</th>
    			<th>Credit</th>
    		</td>
    	</tr>
    </table>



    voici ce que çà donne :

    vous voyez cette cellule entre Det et Qte : j'arrive pas a le supprimer :(

    merci.

    -
    Edité par g_ftu 21 avril 2017 à 9:29:15

    • Partager sur Facebook
    • Partager sur Twitter
      21 avril 2017 à 9:54:15

      Bonjour,

      tu mélanges tout, ton tableau est mal contruit car tu n'utilises pas les balises adéquates. Pour le titre du tableau, il faut utiliser la balise caption, pas la balise th. La balise th sert à nommer une colonne(exemple : nom, prénom, adresse, ville, etc...). Mettre des td dans des th ne sert à rien, et en plus c'est une erreur car encore une fois, th sert à nommer les colonnes du tableau alors que td sert à insérer des données dans les différentes cellules.

      La règle text-align est héritée, donc pas besoin de la mettre sur les tr après l'avoir mis sur la balise table

      <table class="balance">
              <caption>Titre du tableau</caption>
            
              <thead>
                  <tr>
                      <th rowspan="2">Date</th>
                      <th rowspan="2">Det</th>
                      <th rowspan="2">Qte</th>
                      <th colspan="2">Capitaux</th>
                  </tr>
                  <tr>
                      <th>Debit</th>
                      <th>Credit</th>
                  </tr>
              </thead>
            
              <tfoot>
                  <tr>
                      <th rowspan="2">Date</th>
                      <th rowspan="2">Det</th>
                      <th rowspan="2">Qte</th>
                      <th>Debit</th>
                      <th>Credit</th>
                  </tr>
                  <tr>
                      <th colspan="2">Capitaux</th>
                  </tr>
              </tfoot>
            
              <tbody>
                  <tr>
                      <td>21/04/2017</td>
                      <td></td>
                      <td>10</td>
                      <td>120€</td>
                      <td>200€</td>
                  </tr>
             </tbody>
      </table>
      *
      {
        box-sizing: border-box;
      }
      
      table
      {
        border-collapse: collapse;
        width: 80%;
        font-size: 0.8rem;
        margin: 0 auto;
      }
      
      th,
      td
      {
        border: 1px solid #000;
        padding: 10px;
        text-align: center;
      }




      -
      Edité par me_moi 21 avril 2017 à 10:00:18

      • Partager sur Facebook
      • Partager sur Twitter
        21 avril 2017 à 10:00:43

        J'avais pris pour exemple les codes de ce site : http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html

        :o une lecture plus appliquée du tableau s'impose .

        merci pour ta reponse , c'est exactement ce que je recherche.

        -
        Edité par g_ftu 21 avril 2017 à 10:02:48

        • Partager sur Facebook
        • Partager sur Twitter

        Tableau et cellules

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur
        • Markdown