Alignement vertical dans une balise table.

**zoohayr** · 08/03/2018, 13h54

Bonjour tout le monde,

J'ai des donnés insérer dans un tableau qui ne sont pas aligner verticalement. je voudrais les aligner mais je sais plis comment faire ! y'a quelqu'un qui peut m'aider à faire et merci d'avance .

voilà le lien ou j'en ai le tableau : https://medika.ma/medicamenta

Invité · 10/03/2018, 12h11

Bonjour,

tu n'as pas un seul tableau, mais plusieurs <table> indépendantes *.

Si tu veux pouvoir aligner (sur la même verticale) les différentes cellules, il faut leur donner une largeur (en % par exemple).

* Par conséquent, l'utilisation de <table> ne se justifie pas, puisque chaque table n'a qu'une seule ligne !
On peut très bien les remplacer par des <div> en utilisant en CSS : display:table; display:table-cell; pour simuler le comportement des <table>.
De fait, il sera facile d'indiquer en CSS la largeur de chaque <div> "cellule".

[EDIT] Ton code est une grosse usine à gaz, qui comporte aussi beaucoup d'erreurs de structure (<div> dans <tabel>, balises mal fermées ou pas où il faut,...) : https://validator.w3.org/

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!-- extrafields columns -->
  <div class="responsive rt">
    <table>
    <tbody>
	<tr>
    <td> <li> <h5 class="catItemTitle">
 
	  				<a href="/anti-inflammatoires/anti-inflammatoires-non-steroidiens-ains/item/9966-meloxam-7-5mg-boite-de-28-comprime">
	  		MELOXAM 7,5mg ( boite de 28 comprimé )	  	</a>
	  	</li></h5> </td>
         <div class="extrafieldscolumns">
           <ul>
 
            <td>  <li>70,00</li> </td>
            <td>  <li>70%</li> </td>
            <td>  <li><img src="/images/Pharmacie/Disp.png" alt="Disponibilité" /></li> </td>
 
 
          </ul>
          </div>
		  </tr>
		  </tbody>
		  </table>
		  </div>
        <!-- END extrafields columns -->
 
			</div>
						<div class="clr"></div>
 
 
			<div class="itemContainer1 itemContainerLast" style="width:100.0%;">
 
<!-- Start K2 Item Layout -->
<div class="catItemView groupLeading">
 
	<!-- Plugins: BeforeDisplay -->
 
	<!-- K2 Plugins: K2BeforeDisplay -->
 
	<div class="catItemHeader">
 
 
       	  <!-- Item title -->
 
	  		  </h5>
 
		  </div>
 
  <!-- Plugins: AfterDisplayTitle -->
 
  <!-- K2 Plugins: K2AfterDisplayTitle -->
 
 
  <div class="catItemBody">
 
	  <!-- Plugins: BeforeDisplayContent -->
 
	  <!-- K2 Plugins: K2BeforeDisplayContent -->
 
 
 
		<div class="clr"></div>
 
	  	  <!-- Item extra fields -->
	  <div class="catItemExtraFields">
 
 
	    <div class="clr"></div>
	  </div>
 
	  <!-- Plugins: AfterDisplayContent -->
 
	  <!-- K2 Plugins: K2AfterDisplayContent -->
 
	  <div class="clr"></div>
  </div>
 
 
	<div class="clr"></div>
 
 
 
  <div class="clr"></div>
 
 
 
	<div class="clr"></div>
 
 
  <!-- Plugins: AfterDisplay -->
 
  <!-- K2 Plugins: K2AfterDisplay -->
 
	<div class="clr"></div>
</div>
<!-- End K2 Item Layout -->

**zoohayr** · 13/03/2018, 10h48

Bonjour jreaux et merci pour votre attention,

concernant ta phrase "tu n'as pas un seul tableau, mais plusieurs <table> indépendantes". c'est parce que je vois pas comment je dois affiché les données des champs supplémentaires de plusieurs ! en fait je n'y intégré que le code Html d'un tableau et le voilà :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 <div class="responsive rt">
    <table>
    <tbody>
	    <tr>
 
 
 
			<?php if(isset($this->item->editLink)): ?>
			<!-- Item edit link -->
			<span class="catItemEditLink">
				<a data-k2-modal="edit" href="<?php echo $this->item->editLink; ?>">
					<?php echo JText::_('K2_EDIT_ITEM'); ?>
				</a>
			</span>
			<?php endif; ?>
 
	  	<?php if ($this->item->params->get('catItemTitleLinked')): ?>
		<ul>
		<td> <li> <h5 class="catItemView">	<a href="<?php echo $this->item->link; ?>">
	  		<?php echo $this->item->title; ?>
	  	</a>
	  	<?php else: ?>
	  	<?php echo $this->item->title; ?>
	  	<?php endif; ?></li></h5> </td>
 
 
 
 
            <td>  <li><?php echo $this->item->extraFields->PPVDh->value ;?><?php echo $this->item->extraFields->Tlephone->value ;?></li> </td>
            <td>  <li><?php echo $this->item->extraFields->Remboursement->value ;?><?php echo $this->item->extraFields->PVC->value ;?><?php echo $this->item->extraFields->Ville->value ;?></li> </td>
            <td>  <li><?php echo $this->item->extraFields->Disp->value ;?></li> </td>
 
 
          </ul>
 
		  </tr>
 
		  </tbody>
		  </table>
		  </div>

Donc si vous avez une idée sur comment y remplacer ces plusieurs par un seul tableau, je y serai très reconnaissant

et ça me complique aussi la vie sur l'alignement car la deuxième colonne dépend de la longueur de la première et puisque les titres ne sont pas égaux ça donne lé résultat affiché.

voici le code que j'ai en css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.itemContainer1 {
display: table;
}
.catItemView  {
width: 80%;
float: left;
}
.medicamenta #k2Container article header h2 a {
color: blue;
}
.extrafieldscolumns li:first-child {
width: 10%;
}
 
.extrafieldscolumns li:nth-child(2) {
width: 10%;
}
 
.extrafieldscolumns li:nth-child(3) {
width: 7%;
}
.extrafieldscolumns li:nth-child(4) {
width: 2%;
}
 
.itemContainer1 .catItemView {
    float: left;
  }
 
.itemContainer1 .extrafieldscolumns {
    width: 100%;
}
 
 
 ul{ margin-top: 0px; margin-bottom: 0px; padding-top: 0px;padding-bottom: 0px
 
}

Donc d'après ce que j'ai compris si j'arrive à afficher les données dans un seul tableau ça sera facile à les aligner sinon je vois pas comment

**miss_socrates** · 24/03/2018, 23h07

Je me demande si ce ne serait pas mieux de placer chaque donnée dans une div à dimension fixe.

Mais pour le tableau, il faut préciser le thead, tfoot et tbody avec une largeur fixe identique pour chaque colonne. Actuellement, je n'ai pas vu le thead, ce qui ne permet pas d'aligner les en-têtes de chaque colonne.
Pour l'alignement vertical, la propriété vertical-align: middle, quoique ancienne, était fort efficace.

**zoohayr** · 25/03/2018, 17h19

Bonjour miss socrates,

Merci mille fois pour votre attention d'abord et pour votre réponse ! ça m'a résout presque le problème mais avec une <td> à dimension fixe. Quand à la balise thead, elle se répète avec les tableaux que j'arrive plus à les convertir en un seul au lieu de plusieurs. voici le nouveau code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 <div class="responsive rt">
    <table>
	<thead>
      <tr>
         <th>Nom</th>
         <th>Prix</th>
         <th>Remboursement</th>
		 <th>Disponibilité</th>
      </tr>
   </thead>
    <tbody>
	    <tr>
 
 
 
			<?php if(isset($this->item->editLink)): ?>
			<!-- Item edit link -->
			<span class="catItemEditLink">
				<a data-k2-modal="edit" href="<?php echo $this->item->editLink; ?>">
					<?php echo JText::_('K2_EDIT_ITEM'); ?>
				</a>
			</span>
			<?php endif; ?>
 
	  	<?php if ($this->item->params->get('catItemTitleLinked')): ?>
		<ul>
		<td width="50%"> <li> <h5 class="catItemView">	<a href="<?php echo $this->item->link; ?>">
	  		<?php echo $this->item->title; ?>
	  	</a>
	  	<?php else: ?>
	  	<?php echo $this->item->title; ?>
	  	<?php endif; ?></li></h5> </td>
 
 
 
 
            <td width="20%">  <li><?php echo $this->item->extraFields->PPVDh->value ;?><?php echo $this->item->extraFields->Tlephone->value ;?></li> </td> 
            <td width="30%" align="center"> <li><?php echo $this->item->extraFields->Remboursement->value ;?><?php echo $this->item->extraFields->PVC->value ;?><?php echo $this->item->extraFields->Ville->value ;?></li></td> 
            <td width="30%" align="center"> <li><?php echo $this->item->extraFields->Disp->value ;?></li> </td> 
 
 
          </ul>
 
		  </tr>
 
		  </tbody>
		  </table>
		  </div>

résultat en ligne : https://www.medika.ma/medicamenta

**psychadelic** · 26/03/2018, 02h29

en fait ce que tu recherche à faire c'est une table responsive ?, comme ici => https://css-tricks.com/examples/Resp...responsive.php

**zoohayr** · 26/03/2018, 10h53

Bonjour psychadelic,

merci pour votre attention aussi

sincèrement j'ai une priorité de réglé le problème de plusieurs tableaux que j'arrive toujours pas à le résoudre ! le but est d'afficher un seul avec un seul entête.

Invité · 26/03/2018, 12h45

D'ou vient $this->item ?

Tu ne nous a toujours pas montré le code utile...
C'est-à-dire le foreach (ou autre?) AUTOUR du code que tu as déjà donné.

Il faut mettre toute la partie <table>.....<tbody> à l'extérieur du foreach.
On ne met à l'intérieur que la partie <tr>....</tr>

**psychadelic** · 26/03/2018, 13h30

Envoyé par zoohayr

le but est d'afficher un seul [tableau] avec un seul entête.

?
ce qui est justement le cas dans l'exemple que je t'ai fourni.
il y a même un lien explicatif ou l'on peu télécharger le code ...

Invité · 26/03/2018, 14h43

@psychadelic
Tu aurais dû, toi aussi, lire la discussion depuis le début, et suivre les liens donnés.
Tu aurais vu qu'il y a actuellement autant de tableaux que de lignes !...

**NoSmoking** · 26/03/2018, 15h16

Bonjour,
avant de continuer quoique ce soit il faut générer un code HTML Valide et pas n'importe quoi car quand on voit cela, extrait de ta page

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div>
  <table>
    <thead>
      <tr>
        <th>Nom</th>
        <th>Prix</th>
        <th>Remboursement</th>
        <th>Disponibilité</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <span>
          <a href="">
          </a>
        </span>
        <ul>
          <td>
            <li>
              <h5>
                <a href=""></a>
            </li>
            </h5>
          </td>
          <td>
            <li></li>
          </td>
          <td>
            <li></li>
          </td>
          <td>
            <li></li>
          </td>
        </ul>
      </tr>
    </tbody>
  </table>
</div>

on se dit que les moteurs de rendu ont du boulot !

Invité · 26/03/2018, 15h23

Actuellement, chaque tour de boucle donne ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
			<div class="itemContainer1 itemContainerLast" style="width:100.0%;">
 
<!-- Start K2 Item Layout -->
<div class="catItemView groupLeading">
 
	<!-- Plugins: BeforeDisplay -->
 
	<!-- K2 Plugins: K2BeforeDisplay -->
 
	<div class="catItemHeader">
 
 
       	  <!-- Item title -->
 
	  		  </h5>
 
		  </div>
 
  <!-- Plugins: AfterDisplayTitle -->
 
  <!-- K2 Plugins: K2AfterDisplayTitle -->
 
 
  <div class="catItemBody">
 
	  <!-- Plugins: BeforeDisplayContent -->
 
	  <!-- K2 Plugins: K2BeforeDisplayContent -->
 
 
 
		<div class="clr"></div>
 
	  	  <!-- Item extra fields -->
	  <div class="catItemExtraFields">
 
 
	    <div class="clr"></div>
	  </div>
 
	  <!-- Plugins: AfterDisplayContent -->
 
	  <!-- K2 Plugins: K2AfterDisplayContent -->
 
	  <div class="clr"></div>
  </div>
 
 
	<div class="clr"></div>
 
 
 
  <div class="clr"></div>
 
 
 
	<div class="clr"></div>
 
 
  <!-- Plugins: AfterDisplay -->
 
  <!-- K2 Plugins: K2AfterDisplay -->
 
	<div class="clr"></div>
</div>
<!-- End K2 Item Layout -->
<!-- extrafields columns -->
  <div class="responsive rt">
    <table>
	<thead>
      <tr>
         <th>Nom</th>
         <th>Prix</th>
         <th>Remboursement</th>
		 <th>Disponibilité</th>
      </tr>
   </thead>
    <tbody>
	    <tr>
 
 
 
 
	  			<ul>
		<td width="50%"> <li> <h5 class="catItemView">	<a href="/allergologie/antihistaminiques-h1/item/12178-alora-5mg-boite-de-10-comprimes">
	  		ALORA 5mg boite de 10 comprimés	  	</a>
	  	</li></h5> </td>
 
 
 
 
            <td width="20%">  <li>29,00 DH</li> </td> 
            <td width="30%" align="center"> <li>0%</li></td> 
            <td width="30%" align="center"> <li><img src="/images/Pharmacie/Disp.png" alt="Disponibilité" /></li> </td> 
 
 
          </ul>
 
		  </tr>
 
		  </tbody>
		  </table>
		  </div>
        <!-- END extrafields columns -->
 
			</div>
						<div class="clr"></div>

C'est plein de code inutile, des <div class="clr"></div> à tire-larigot, un </h5> tout seul, un <ul> intercalé entre <tr> et <td>, les <li> dans les <td>,...

Il y a un GROS ménage à faire dans ce code !

Une fois qu'on a enlevé tous le code et les balises inutiles, on arrive à ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="itemContainer1 itemContainerLast" style="width:100.0%;">
 
	<div class="responsive rt">
		<table>
			<thead>
			<tr>
				<th>Nom</th>
				<th>Prix</th>
				<th>Remboursement</th>
				<th>Disponibilité</th>
			</tr>
			</thead>
			<tbody>
				<tr>
					<td width="50%">
						<h5 class="catItemView">
							<a href="/allergologie/antihistaminiques-h1/item/12178-alora-5mg-boite-de-10-comprimes">ALORA 5mg boite de 10 comprimés</a>
						</h5>
					</td>
					<td width="20%">29,00 DH</td>
					<td width="30%" align="center">0%</td>
					<td width="30%" align="center"><img src="/images/Pharmacie/Disp.png" alt="Disponibilité" /></td>
				</tr>
			</tbody>
		</table>
	</div>
 
</div>

C'est le contenu d'UNE boucle.

Pour avoir UNE SEULE TABLE :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<div class="itemContainer1 itemContainerLast" style="width:100.0%;">
 
	<div class="responsive rt">
		<table>
			<thead>
			<tr>
				<th>Nom</th>
				<th>Prix</th>
				<th>Remboursement</th>
			<th>Disponibilité</th>
			</tr>
			</thead>
			<tbody>
<?php 	// c'est ICI qu'on met la BOUCLE
		foreach( xxxxxx as $this->item ):
?>
			<tr>
			<td width="50%">
				<?php if(isset($this->item->editLink)): ?>
					<!-- Item edit link -->
					<span class="catItemEditLink">
					<a data-k2-modal="edit" href="<?php echo $this->item->editLink; ?>">
					<?php echo JText::_('K2_EDIT_ITEM'); ?>
					</a>
					</span>
				<?php endif; ?>
 
				<h5 class="catItemView">
					<?php if ($this->item->params->get('catItemTitleLinked')): ?>
						<a href="<?php echo $this->item->link; ?>"><?php echo $this->item->title; ?></a>
					<?php else: ?>
						<?php echo $this->item->title; ?>
					<?php endif; ?>
				</h5>
			</td>
			<td width="20%"><?php echo $this->item->extraFields->PPVDh->value ;?><?php echo $this->item->extraFields->Tlephone->value ;?></td> 
			<td width="30%" align="center"><?php echo $this->item->extraFields->Remboursement->value ;?><?php echo $this->item->extraFields->PVC->value ;?><?php echo $this->item->extraFields->Ville->value ;?></td> 
			<td width="30%" align="center"><?php echo $this->item->extraFields->Disp->value ;?></td> 
 
			</tr>
<?php
		endforeach; 
?>
			</tbody>
		</table>
	</div>
 
</div>

**psychadelic** · 26/03/2018, 15h54

Envoyé par jreaux62

@psychadelic
Tu aurais dû, toi aussi, lire la discussion depuis le début, et suivre les liens donnés.
Tu aurais vu qu'il y a actuellement autant de tableaux que de lignes !...

Ce qui est justement son problème, zoohayr veut se débarrasser de ces multiples tableaux pour n'en conserver qu'un seul.

Envoyé par zoohayr

Bonjour psychadelic,

merci pour votre attention aussi

sincèrement j'ai une priorité de régler le problème de plusieurs tableaux que j'arrive toujours pas à le résoudre ! le but est d' en afficher un seul avec un seul entête.

je sais aussi très bien lire entre les lignes

**zoohayr** · 26/03/2018, 16h03

Bonjour,

Excusez-moi ! j'ai dû m'expliquer ce qui est dans le tableau d'abord avant de demander de l'aide. Voilà, la première colonne du tableau représente les titres des articles régénérer depuis une certaine rubrique qui s'appelle "Médicament" et qui comporte tout les noms des médicaments que j'ai insérer dans la plateforme. Et si vous pointer avec la souris vous allez remarquer que c'est cliquable, c.a.d que c'est un lien qui mène vers l'article du titre. ce qui explique que la première balise <td> comporte plus de code ( y compris la fonction "$this->item" et "h5" ) que les autres. Ce qui est au autres colonnes ce sont des champs supplémentaires qui accompagnent chaque article (médicament) insérer dans la plateforme. Donc ces médicaments sont classé par catégorie dans la rubrique "médicament" et ces catégories même sont représenté dans un menu qui s'affiche à gauche du tableau. Comme ça si vous cliquer sur par exemple "les antalgiques" vous aurez que des antalgiques qui s'affiches dans le tableau et ainsi de suite.

Ce qui concerne le code lui même ! je travaille avec le système k2 et comme j'appelle dans le tableau des titres des articles par catégorie, j'ai insérer le code du tableau dans le fichier catégory.item.php du système k2. Finalement, je devine que mon problème réside dans cette partie !

Invité · 26/03/2018, 16h04

Envoyé par zoohayr

...Finalement, je devine que mon problème réside dans cette partie !

Tout à fait.

sans compter toutes les erreurs de structures du code que j'ai évoquées plus haut.

Je t'ai donné le code corrigé, à mettre.

**zoohayr** · 26/03/2018, 16h07

jreaux je viens de vous lire ! je vais l'essayé votre code et je vous réponds

Invité · 26/03/2018, 16h08

Tu n'a pas répondu :

D'ou vient $this->item ?

et comment est construite la BOUCLE ?

(@psychadelic : ce n'est pas moi qui ait moinssé ton message...)

**psychadelic** · 26/03/2018, 17h11

Envoyé par jreaux62

(@psychadelic : ce n'est pas moi qui ait moinssé ton message...)

Je n'ai fait que poser juste une question, pour essayer de comprendre, et mon lien en était principalement une illustration.

Car j'ai bien remarqué que ce "tableau" avait un problème css (quand on réduit la largeur de la fenêtre, et ce qui est justement le propos de ma question) :
Pièce jointe 364524

**zoohayr** · 26/03/2018, 17h52

Sincèrement j'ai dû mal à configurer le xxxxx de la fonction foreach( xxxxxx as $this->item ):

Invité · 26/03/2018, 18h24

Envoyé par zoohayr

...j'ai insérer le code du tableau dans le fichier catégory.item.php du système k2...

Mais vu que :

tu n'en montres pas plus *,
ni comment est appelé/utilisé ce fichier,
et que je ne connais ce "k2",

mes "pouvoirs" s'arrêtent là...

* Si tu ne sais pas où et comment se fait la boucle, on ne peut pas le deviner non plus... (à tout hasard je dirais... dans le fichier catégory.php ??)

Alignement vertical dans une balise table.

Positionnement en CSS

Discussions similaires

Partager

Partager