Partage

Alignement de colonne d'un tableau

Sujet résolu
11 octobre 2017 à 18:53:34

Bonjour/bonsoir à tous,

Je viens vers vous car j'ai un problème que j'arrive pas à résoudre depuis plusieurs jours et plusieurs recherches ne correspondant pas à mon problème.

Sur mon site, je désire faire plusieurs tableau afin d'afficher dans une colonne se que je propose et dans l'autre colonne, le prix du service.

Mon problème est que les colonnes des tableaux ne sont pas alignés entre eux. Je pourrais tout mettre dans un tableau unique, hors, je trouve que cela ferait trop "bloc" et étouffant. J'aimerais faire en sorte que les colonnes de description soient alignées, et donc, par conséquent, les colonnes Tarifs soient eux aussi alignés peu importe la taille de l'écran.

 Voici mon code HTML

<table>
    <caption> Titre </caption>

       <tr>
          <th> titre descriptif 1 </th>
          <th> Tarifs TTC </th>
       </tr>

       <tr>
          <td> texte 1 </td>
          <td> Montant du prix </td>
       </tr>

       <tr> 
          <td> Texte 1 </td>
          <td> Montant du prix </td>
       </tr>

       <tr>
          <td> Texte 1 </td>
          <td> Montant du prix </td>
       </tr>
</table>

<table>
       <tr>
          <th> titre descriptif 2 </th>
          <th> Tarifs TTC </th>
       </tr>

       <tr>
          <td> texte 2 décalé par rapport aux autres</td>
          <td> Montant du prix </td>
       </tr>

       <tr> 
          <td> Texte 2 </td>
          <td> Montant du prix </td>
       </tr>

       <tr>
          <td> Texte 2 </td>
          <td> Montant du prix </td>
       </tr>
</table>

<table>
       <tr>
          <th> titre descriptif 3 </th>
          <th> Tarifs TTC </th>
       </tr>

       <tr>
          <td> texte 3 et là ce n'est pas mieux non plus niveau alignement</td>
          <td> Montant du prix </td>
       </tr>

       <tr> 
          <td> Texte 3 </td>
          <td> Montant du prix </td>
       </tr>

       <tr>
          <td> Texte 3 </td>
          <td> Montant du prix </td>
       </tr>
</table>

Et voici mon code CSS actuel

table
{
  border-collapse: collapse;
  margin-bottom: 20px;
}

caption
{
  padding: 10px;
}

td, th
{
  border: 1px solid black;
  padding: 10px;
}

Lorsque je passe mon code HTML sur https://validator.w3.org ou lorsque je met mon code HTML et CSS sur https://codepen.io je ne possède aucune erreur sur les deux site (c'est déjà ça)

Je remercie par avance les personnes sacrifiant de leur temps pour se pencher sur mon problème et pour m'aider, même si je me doute que la solution doit être des plus simple.

En attendant une aide, bonne continuation à tous et bon codage.


A chaque instant le présent devient le passé et nous essayons d'en garder une trace.
Staff 11 octobre 2017 à 22:17:54

Bonjour,

les cellules d'un tableau s'organisent entre elles et les largeurs des colonnes sont calculées, mais c'est à l'intérieur d'un tableau. On ne peut pas nativement aligner les colonnes de deux tableaux qui n'ont pas le même contenu. Il te faudra probablement donner des largeurs aux <th> (qui répercuteront sur la colonne).

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
12 octobre 2017 à 13:56:06

Bonjour/bonsoir,

Je souhaitais te remercier pour ta réponse. Effectivement, en attribuant une largeur aux <th> mon problème a été résolu. J'avais pourtant essayé mais il est vrai que je m'obstinais avec <table>. Comme je le pensais, la solution était des plus simple. Encore merci pour l'aide.

A chaque instant le présent devient le passé et nous essayons d'en garder une trace.
Staff 12 octobre 2017 à 14:30:32

Bonne continuation :)
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
13 octobre 2017 à 12:04:02

J'aurais à nouveau une question si je peux me permettre.

Toujours avec se même tableau et de largeur, j'ai attribué un <width> différent à chaque <th> afin d'avoir mes 2 colonnes alignés sur chaque tableau composante ma page.

Cependant, lorsque j'utilise une liste à puce ou lorsque j'utilise <br>, la largeur du tableau n'est plus pris en compte. De part se fait il n'est plus aligné avec les autres tableaux.

Lorsque j'enlève les balises <br> ou lorsque je n'utilise plus la liste à puce, mon tableau reprend ses valeurs défini par <width>.

Voici le code HTML que j'utilise:

<table>
    <caption> Titre </caption>
 
       <tr>
          <th class="taille"> titre descriptif 1 </th>
          <th class="largeur"> Tarifs TTC </th>
       </tr>
 
       <tr>
          <td> texte 1 </td>
          <td> Montant du prix </td>
       </tr>
 
       <tr>
          <td> Texte 1 </td>
          <td> Montant du prix </td>
       </tr>
 
       <tr>
          <td> Texte 1 </td>
          <td> Montant du prix </td>
       </tr>
</table>
 
<table>
       <tr>
          <th class="taille"> titre descriptif 2 </th>
          <th class="largeur"> Tarifs TTC </th>
       </tr>
 
       <tr>
          <td> texte 2 désormais aligné avec le premier tableau</td>
          <td> Montant du prix </td>
       </tr>
 
       <tr>
          <td> Texte 2 </td>
          <td> Montant du prix </td>
       </tr>
 
       <tr>
          <td> Texte 2 </td>
          <td> Montant du prix </td>
       </tr>
</table>
 
<table>
       <tr>
          <th class="taille"> titre descriptif 3 </th>
          <th class="largeur"> Tarifs TTC </th>
       </tr>
 
       <tr>
           <td>
              <ul>
                  <li> texte 3 là le tableau est plus petit </li>
              </ul>
           </td>
          <td> Montant du prix </td>
       </tr>
 
       <tr>
          <td>
             <ul>
                <li> Texte 3 </li>
             </ul>
           </td>
          <td> Montant du prix </td>
       </tr>
 
       <tr>
          <td>
             <ul>
                <li> Texte 3 </li>
             </ul>
          </td>
          <td> Montant du prix </td>
       </tr>
</table>

et le code CSS

table
{
  border-collapse: collapse;
  margin-bottom: 20px;
}

.taille
{
	width: 83%;
}


.largeur
{
	width: 17%;
}

td, th
{
  border: 1px solid black;
  padding: 10px;
}

J'ai essayé de jouer avec des <min-width> et <max-width> mais sans succès.


-
Edité par Orilone 13 octobre 2017 à 12:55:31

A chaque instant le présent devient le passé et nous essayons d'en garder une trace.
Staff 13 octobre 2017 à 13:13:51

Tu dois avoir autre chose qui joue : j'ai copié ton code ici https://codepen.io/anon/pen/zEJKxe et les trois tableaux me semblent faire exactement la même largeur.
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
13 octobre 2017 à 14:11:07

Je me permet de laisser mon code HTML et CSS en entier afin que l'on puisse voir où cela cloche car, c'est le seul détail qui m'empêche de mettre mon site en ligne.

Une fois de plus je remercie le temps consacré à m'aider qui me permet aussi de m'améliorer. Merci.

Voici mon code HTML

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="tarifs.css" />
        <title>NetHome Informatique - Tarifs</title>
    </head>
    
    <body>
        <div id="bloc_page">
            <header>
                <div id="titre_principal">
                    <div id="logo">
                        
                        <h1> <span class="orange">NetHome </span> <span class="bleu"> Informatique </span></h1>   
                    </div>
                    <h2>Votre dépanneur informatique</h2>

                </div>
                
                <nav>
                    <ul>
                        <li><a href="acceuil.html">Accueil</a></li>
                        <li><a href="formations.html">Formations</a></li>
                        <li><a href="tarifs.html">Tarifs</a></li>
                        <li><a href="mailto:nti43@outlook.fr">Contact</a></li>
                    </ul>
                </nav>
            </header>
            
            <section> 
                <article>

                	<table>

                		<caption>Tarifs des prestations fournit par <span class="orange">NetHome </span> <span class="bleu"> Informatique </span></caption>

                		<tr>
                			<th class="taille">Dépannage/ Assistance/ Réparation</th>
                			<th class="largeur">Tarifs TTC</th>
                		</tr>

                		<tr>
                			<td><strong>Dépannage informatique</strong> <span class="orange">NetHome </span> <span class="bleu"> Informatique </span> se déplace chez vous pour solutionner tous vos problèmes informatiques les plus courants. (dépannage, réparation, nettoyage de l’ordinateur (base de registre, fichiers..) installation de logiciels, remplacement/ ajout de disque dur, mémoire, carte graphique, carte mère, processeur, et bien d’autres services…)</td>
                			<td>50€/H (+ 10€ / ¼ d’heure supp.)</td>
                		</tr>

                		<tr>
                			<td><strong>Sauvegardes de données</strong> <span class="orange">NetHome </span> <span class="bleu"> Informatique </span> se déplace pour sauvegarder vos données les plus précieuses (photos, vidéos, fichiers word, exel ou autre..) sur CD / DVD ou autres supports disponibles (Disque dur amovible par exemple). Support fournit par le client</td>
                			<td>20€ + prix du déplacement<em>*</em></td>
                		</tr>

                		<tr>
                			<td><strong>Analyse de votre ordinateur et suppression de virus, spywares, et pages publicitaires</strong> <span class="orange">NetHome </span> <span class="bleu"> Informatique </span> se déplace pour supprimer les virus les plus dangereux et les plus tenaces, mais aussi pour supprimer les logiciels espions (Spyware) et pages publicitaires indésirables.</td>
                            <td>50€</td>
                		</tr>

                        <tr>
                            <td><strong>Installation de contrôle parental</strong> <span class="orange">NetHome </span> <span class="bleu"> Informatique </span> est sensible à la protection de vos enfants, c’est pour cela que nous proposons l’installation d’un contrôle parental pour les protéger des dangers potentiels.</td>
                            <td>20€ + prix du déplacement<em>*</em></td>
                        </tr>

                        <tr>
                            <td><strong>Déplacement</strong> Le déplacement est gratuit pour toute prestation comprenant une facture de 40€ minimum (hors frais de déplacement).</td>
                            <td>0,60€/Km</td>
                        </tr>
                    </table>

                <table>
                    <tr>
                        <th class="taille">Installation de Matériels et Logiciels</th>
                        <th class="largeur">Tarifs TTC</th>
                    </tr>

                    <tr>
                        <td> <strong>Installation ADSL, Internet, Box ou Installation d’un réseau (Ethernet, Wifi ou CPL)</strong> <span class="orange">NetHome </span> <span class="bleu"> Informatique </span> se déplace pour vous installer internet ( <em>Freebox de FREE</em>, <em>NeufBox de SFR</em> ou <em>Livebox de chez Orange</em>), mais <span class="orange">NetHome </span> <span class="bleu"> Informatique </span> peut également vous installer plusieurs ordinateurs en réseau filaire ou sans fil (<em>wifi</em>).</td>
                        <td>30€/H + prix du déplacement*</td>
                    </tr>

                    <tr>
                    	<td><strong>Installation Windows/Formatage</strong> <span class="orange">NetHome </span> <span class="bleu"> Informatique </span>installe pour vous,un système d'exploitation sur votre ordinateur. Possibilité de réinstaller votre PC par défaut (constructeur): formatage du disque dur, installation de Windows, de vos drivers et d'un anti-virus.</td>
                    	<td>110€</td>
                    </tr>

                    <tr>
                    	<td><strong>Formatage ultime</strong> Retrouvez votre ordinateur comme neuf. Réinstallation complète de votre ordinateur avec sauvegarde de vos données au préalable. Formatage du disque dur, installation de Windows, de vos drivers, périphériques et logiciels.</td>
                    	<td>140€</td>
                    </tr>

                    <tr>
                    	<td><strong>Ordinateur sur mesure</strong><br><span class="orange">NetHome </span> <span class="bleu"> Informatique </span> vous conseille pour l’achat d’un pc afin, de faire le meilleur choix Prix/Puissance selon vos besoins. <span class="orange">NetHome </span> <span class="bleu"> Informatique </span> propose un montage à la carte de votre PC.</td>
                    	<td>
                    			80€ conseil d'achat + montage<br><br>
                    			60€ montage uniquement</td>
                    </tr>

                        <tr>
                            <td><strong>Déplacement</strong> Le déplacement est gratuit pour toute prestation comprenant une facture de 40€ minimum (hors frais de déplacement).</td>
                            <td>0,60€/Km</td>
                        </tr>
                </table>

                <table>
                    <tr>
                        <th class="taille">Installation de Matériels et Logiciels</th>
                        <th class="largeur">Tarifs TTC</th>
                    </tr>

                    <tr>
                    	<td>
                    		<ul>
                    			<li><strong>Connaître son matériel informatique</strong></li>
                    	
                    		<li>Reonnaître les composants présent dans un ordinateur</li>
							<li>Savoir l'utilité de chacun des composants</li>
							<li>Comment entretenir son matériel</li></ul></td>
						<td>60€/H</td>
                    </tr>

                    <tr>
                    	<td>
                    		<ul>
                    			<li><strong>Savoir utilisé son ordinateur</strong></li>
                    	    
                    			<li>Démarrer et arrêter l'ordinateur sans dommage</li>
                    			<li>Apprendre à utiliser son clavier et sa souris</li>
                    			<li>Savoir gérer son bureau et ses fichiers</li></ul></td>
                    		<td>60€/H</td>
                    </tr>

                    <tr>
                    	<td>
                    		<ul>
                    			<li><strong>Savoir utilisé Internet en toute sécurité</strong></li>
                    			<li>Utiliser Internet et reconnaître les sites sécurisés</li>
                    			<li>Apprendre à effectuer des achats en toute sécurité</li>
                    			<li>Facebook et tout ses dangers</li>
                    			<li>Télécharger programmes et logiciels et les installer</li></ul>
                    		
                    	</td>
                    	<td>60€H</td>
                    </tr>
                </table>
               </article>
           </section>
 

            <footer>

                    Site réalisé par<a href="acceuil.html"> <span class="orange">NetHome</span><span class="bleu"> Informatique</span></a>
                        <a href="cgv.html">CGV</a>
                        <a href="mentionslegales.html">Mentions Légales</a>
            </footer>
        </div>
    </body>
</html>

et voici mon code CSS

/* Définition des polices personnalisées */

@font-face
{
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face 
{
    font-family: 'membraregular';
    src: url('polices/membra-webfont.eot');
    src: url('polices/membra-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/membra-webfont.woff') format('woff'),
         url('polices/membra-webfont.ttf') format('truetype'),
         url('polices/membra-webfont.svg#membraregular') format('svg');
    font-weight: normal;
    font-style: normal;
}



/* Eléments principaux de la page */

body
{
    background: url('images/taupe.jpg');
    font-family: 'Trebuchet MS', Arial, sans-serif;
    background-size: 100%;
    color: #000000;
}

#bloc_page
{
    width: 900px;
    margin: auto;
}

.orange
{
    color: #ff7f27;
}

.bleu
{
    color: #00a8f3;
}

section h1, footer h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
}

/* Header */

header
{
    background: url('images/separateur.png') repeat-x bottom;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#titre_principal
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#logo
{
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
}

header h1
{
    font-family: 'membraregular', 'BallparkWeiner', serif;
    font-size: 2.5em;
    font-weight: normal;
    margin: 0 0 0 10px;
}

header h2
{
    font-family: Dayrom, serif;
    font-size: 1.1em;
    margin-top: 0px;
    font-weight: normal;
}

/* Navigation */

nav ul
{
    list-style-type: none;
    display: flex;
}

nav li
{
    margin-right: 15px;
}

nav a
{
    font-size: 1.04em;
    color: #FFFFFF;
    padding-bottom: 3px;
    text-decoration: none;
}

nav a:hover
{
    color: #FFFFFF;
    border-bottom: 3px solid #760001;
}

nav a:visited
{
    color: #FFFFFF;
}

/* Corps */

section
{
	margin-bottom: 20px;
    background: url('images/separateur.png') repeat-x bottom;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

article, aside
{
    text-align: center;
}

article
{
    margin-right: 20px;
}


/* tableau */
table
{
  border-collapse: collapse;
  margin-bottom: 20px;
}

.taille
{
	width: 83%;
}


.largeur
{
	width: 17%;
}

td, th
{
  border: 1px solid black;
  padding: 10px;
}

caption
{
  padding: 10px;
}

strong
{
  text-decoration: underline;
}

li
{
	list-style-type: none;
}

/* Footer */

footer
{
     text-align: center;
     position: relative;
     bottom: 0;
     width: 100%;
     display: inline-block;
     vertical-align: top;
     font-size: 13px;
}

footer p, footer ul
{
    font-size: 0.8em;
    text-align: center;
}

footer h1
{
    font-size: 1.1em;
}

a:active
{
   color: #FFCC66;
   text-decoration: none;
}

a:focus
{
	color: #FFCC66;
	text-decoration: none;
}

a
{
	text-decoration: none;
    color: #FFCC66;
}

a:visited
{
   color: #FFCC66;
}



-
Edité par Orilone 13 octobre 2017 à 14:21:14

A chaque instant le présent devient le passé et nous essayons d'en garder une trace.
Staff 13 octobre 2017 à 16:34:22

Ok, je comprends !

En fait le premier exemple que tu donnais avait du contenu trop parfait ^^

Un tableau HTML a une largeur totale qui est fonction de son contenu. Ou plutôt chaque td a la largeur de son contenu (sauf si c'est surchargé en CSS), et la table a comme largeur la somme.

Et dans tes listes, tu mets tout simplement des lignes moins longues que dans les blocs de texte : donc le td parent est moins large, donc la table est moins large.

Tu peux donner une largeur aux tables en CSS. C'est même plutôt une bonne pratique. Tu peux faire width: 100% (une des seules fois où cette valeur est pertinente :P).

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
13 octobre 2017 à 19:54:28

Une fois de plus je te remercie pour ton aide et le temps que tu as pris pour m'aider.

Effectivement, en rajoutant un width; 100% à <table> a résolu mon problème.


Cette fois le sujet est définitivement résolu.


Bon codage à tous.

A chaque instant le présent devient le passé et nous essayons d'en garder une trace.
Staff 13 octobre 2017 à 20:36:04

Bonne continuation !
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

Alignement de colonne d'un tableau

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown