Tableau ne s'affiche pas directement sous paragraphie

Question

~~supprimé~~

17 Sep 2020 à 12:41

Bonjour,

Je suis nouveau sur le site et souhaiterais si possible avoir une petite aide.

Voilà. Sur mon blog jusqu'à maintenant je postais des billets sans plus. Puis hier j'ai voulu agrémenter un de mes billets d'un tableau HTM contenant des infos chiffrées.

Il s'avère que mon tableau est très en-dessous de mon texte.

Comment faire pour que mon tableau contenant des infos chiffrées soit juste en dessous de mon texte ?

Je pensais que ça venait des "margin" mais rien n'y fait.

Merci pour votre aide.

parsimonhi

Modérateur

17 Sep 2020 à 13:48

Bonjour,

Il faudrait plus de détails pour qu'on puisse te répondre. Là, il peut y avoir 10 000 raisons.

Amicalement,

~~supprimé~~

17 Sep 2020 à 15:11

Merci Parsimonhi de m'alerter sur le peu que j'ai pu écrire.

Pour l'affichage de mes balise table j'ai fait appel à des preg_replace où je demande à ce que mes codes soit transformer selon des impératifs CSS. Tout cela marche parfaitement.

Mais je ne sais pas pourquoi mon tableau est largement en dessous du texte qu'il doit agrémenter. Je vous mets ci-dessous mes preg_replace qui fonctionne bien pour mes tableaux sauf que celui-ci se trouve très en dessous de mon texte d'explication qu'il doit accompagner.


$contenu = preg_replace('#\<table\>(.+)\</table\>#isU', '<table style="font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;margin-top:inherit; ">$1</table>', $contenu);
	$contenu = preg_replace('#\<caption\>(.+)\</caption\>#isU', '<caption style="color:#090;font-size :20px  ;text-align: center ; ">$1</caption>', $contenu);
	$contenu = preg_replace('#\<th\>(.+)\</th\>#isU', '<th style="font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #000000;text-align:center;">$1</th>', $contenu);
	$contenu = preg_replace('#\<tr\>(.+)\</tr\>#isU', '<tr style=" hover:bgcolor #ffffff;">$1</tr>', $contenu);
	$contenu = preg_replace('#\<td\>(.+)\</td\>#isU', '<td style="border :1px solid black ;text-align: center;">$1</td>', $contenu);
	$contenu = preg_replace('#\<td colspan = \^d$\>(.+)\</td\>#isU','<td style="bgcolor:#000000;text-align: center;">$1</td>', $contenu);
	$contenu = preg_replace('#\<td rowsppan = \^d$\>(.+)\</td\>#isU','<td style="bgcolor:#000000;text-align: center;">$1</td>', $contenu);

Merci pour votre aide.

vzytoi

18 Sep 2020 à 23:06

lucluc a écrit :
Merci Parsimonhi de m'alerter sur le peu que j'ai pu écrire.

Pour l'affichage de mes balise table j'ai fait appel à des preg_replace où je demande à ce que mes codes soit transformer selon des impératifs CSS. Tout cela marche parfaitement.

Mais je ne sais pas pourquoi mon tableau est largement en dessous du texte qu'il doit agrémenter. Je vous mets ci-dessous mes preg_replace qui fonctionne bien pour mes tableaux sauf que celui-ci se trouve très en dessous de mon texte d'explication qu'il doit accompagner.
$contenu = preg_replace('#\&lt;table\&gt;(.+)\&lt;/table\&gt;#isU', '&lt;table style="font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;margin-top:inherit; "&gt;$1&lt;/table&gt;', $contenu);
	$contenu = preg_replace('#\&lt;caption\&gt;(.+)\&lt;/caption\&gt;#isU', '&lt;caption style="color:#090;font-size :20px  ;text-align: center ; "&gt;$1&lt;/caption&gt;', $contenu);
	$contenu = preg_replace('#\&lt;th\&gt;(.+)\&lt;/th\&gt;#isU', '&lt;th style="font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #000000;text-align:center;"&gt;$1&lt;/th&gt;', $contenu);
	$contenu = preg_replace('#\&lt;tr\&gt;(.+)\&lt;/tr\&gt;#isU', '&lt;tr style=" hover:bgcolor #ffffff;"&gt;$1&lt;/tr&gt;', $contenu);
	$contenu = preg_replace('#\&lt;td\&gt;(.+)\&lt;/td\&gt;#isU', '&lt;td style="border :1px solid black ;text-align: center;"&gt;$1&lt;/td&gt;', $contenu);
	$contenu = preg_replace('#\&lt;td colspan = \^d$\&gt;(.+)\&lt;/td\&gt;#isU','&lt;td style="bgcolor:#000000;text-align: center;"&gt;$1&lt;/td&gt;', $contenu);
	$contenu = preg_replace('#\&lt;td rowsppan = \^d$\&gt;(.+)\&lt;/td\&gt;#isU','&lt;td style="bgcolor:#000000;text-align: center;"&gt;$1&lt;/td&gt;', $contenu);
Merci pour votre aide.

Utilise l'inspecteur de ton naviguateurs.
Clique droit > Inspecter.
Si tu es sur google chrome, tu clique sur la souris tout en haut à gauche de l'inspecteur. Tu mets en suite ta souris au dessus de l'espace et tu devrais voir d'où il vient (:
Bonne soirée !

parsimonhi

Modérateur

20 Sep 2020 à 07:29

Bonjour,

On ne peut pas savoir avec l'extrait de code donné pourquoi il y aurait un espace trop grand entre un texte qui précède le tableau et ce tableau.

Pourquoi y-a-t-il "margin-top:inherit;" ?

Amicalement,

~~supprimé~~

20 Sep 2020 à 13:31

Bonjour Vztoi et Parsimhoni

Merci de chercher à m'aider.

Parsimhoni en fait j'essaie tout d'où le inherit de tout à l'heure.

Voici le code source et peut-être y verriez-vous une information qui m'échappe.

<article>
<div id="news">

<h2>
	test</h2>

<h1 class="title">
	test	
</h1>

<div id="photo1">	
	</div>

<div id="fotoreg2015">	
	</div>

<p>	

<em></em><br><p>
   <p>Test test test test test Test test test test test Test test test test test Test test test test testTest test test test test Test test test test test Test test test test test Test test test test test<br />
<br />
<table style="font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;margin:; "><br />
<caption style="color:#090;font-size :20px  ;text-align: center ; ">Titre</caption><br />
<br />
<tr style=" hover:bgcolor #ffffff;"><br />
<th style="font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #000000;text-align:center;">Produits</th><br />
<th style="font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #000000;text-align:center;">PAHT</th><br />
<th style="font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #000000;text-align:center;">PVHT</th><br />
<th style="font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #000000;text-align:center;">Qtés vendues</th><br />
<th style="font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #000000;text-align:center;">CA</th><br />
<br />
</tr><br />
<br />
<tr style=" hover:bgcolor #ffffff;"><br />
<td style="border :1px solid black ;text-align: center;">A</td><br />
<td style="border :1px solid black ;text-align: center;">1</td><br />
<td style="border :1px solid black ;text-align: center;">2</td><br />
<td style="border :1px solid black ;text-align: center;">4</td><br />
<td style="border :1px solid black ;text-align: center;">8</td><br />
</tr><br />
<br />
<br />
<tr style=" hover:bgcolor #ffffff;"><br />
<td style="border :1px solid black ;text-align: center;">B</td><br />
<td style="border :1px solid black ;text-align: center;">3</td><br />
<td style="border :1px solid black ;text-align: center;">4</td><br />
<td style="border :1px solid black ;text-align: center;">10</td><br />
<td style="border :1px solid black ;text-align: center;">40</td><br />
</tr><br />
<br />
<tr style=" hover:bgcolor #ffffff;"><br />
<td style="border :1px solid black ;text-align: center;">C</td><br />
<td style="border :1px solid black ;text-align: center;">7</td><br />
<td style="border :1px solid black ;text-align: center;">12</td><br />
<td style="border :1px solid black ;text-align: center;">2</td><br />
<td style="border :1px solid black ;text-align: center;">240</td><br />
</tr><br />
<br />
<tr style=" hover:bgcolor #ffffff;"><br />
<td style="border :1px solid black ;text-align: center;">TOTAL</td><br />
<td colspan="3"></td><br />
<td style="border :1px solid black ;text-align: center;">72</td><br />
</tr><br />
<br />
</table><br />
<br />
Test test test test test Test test test test test Test test test test test Test test test test testTest test test test test Test test test test test Test test test test test Test test test test test<br />
   </p>

	</div>

parsimonhi

Modérateur

20 Sep 2020 à 15:27

Bonjour,

Arf ! C'est quoi toutes ces balises ???

1) Déjà, en html5 c'est et non pas 
2) Ensuite, on ne met pas de derrière les balises d'un tableau (éventuellement on peut en mettre à l'intérieur d'un <td>)
3) Dans le cas général, on emploie le moins possible la balise 

Bref, tu supprimes tous les entre <table> et </table> et ça devrait aller mieux !

Amicalement,

parsimonhi

Modérateur

20 Sep 2020 à 15:41

Bonjour,

Attention aussi à tes balises . Tu ne peux pas mettre n'importe quelle balise à l'intérieur d'une balise .

On ne peut y mettre que du contenu dit "phrasé". Voir https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Cat%C3%A9gories_de_contenu#Contenu_phras%C3%A9

En particulier, tu ne peux pas mettre de <table> à l'intérieur d'un .

Amicalement,

~~supprimé~~

20 Sep 2020 à 19:59

Bonsoir,

En fait ce n'est pas moi qui génère ces balises mais le nl2br qui permet les paragraphes automatiques.

<?php echo $contenu=bbcode (nl2br($billet['contenu1']));?>

En enlevant il est vrai que mon tableau est bien positionné sous ma phrase MAIS cette fois-ci sans le nl2b tout mon texte est compacte.

<?php echo $contenu=bbcode($billet['contenu1']);?>

Y-a-t-il un autre moyen de faire apparaitre mes paragraphe sans nl2br?

Merci pour votre aide. C'est vraiment très sympathique.

parsimonhi

Modérateur

21 Sep 2020 à 07:20

Bonjour,

Clairement, tu ne peux pas faire un nl2br à l'ensemble de ton $billet['contenu1']. Il faudrait ne le faire que pour les parties qui en ont besoin (des paragraphes ?). Ou bien éventuellement, tu peux continuer à faire un nl2br() sur l'ensemble mais retirer les inutiles si je comprends bien ton besoin.

C'est un peu difficile de donner une solution toute faite sans savoir ce que contient exactement $billet['contenu1'].

Ça peut se faire avec des preg_replace() sur le contenu comme tu l'as fait pour rajouter tes styles.

Par exemple (à adapter en fonction de la situation réelle, car je me suis basé sur le code html que tu as donné, mais il y a peut-être des cas différents en réalité), tu peux ajouter juste après tes preg_replace qui ajoutent tes styles un truc du genre :


$contenu = preg_replace("#</(td|tr|th|caption|table)>([^<]*<br ?/?>[^<]*)+#i", "</$1>\n", $contenu);
$contenu = preg_replace("#<br />\s<(td|tr|th|caption|table)#i", ">\n<$1", $contenu);

Mais bon, c'est du bricolage ! Le mieux serait de ne faire des nl2br() "maisons" que sur les parties du contenu qui en ont besoin (sans doute avec des preg_replace remplaçant les \s par des seulement où c'est nécessaire). Le code peut être assez complexe selon ce qu'est ton contenu.

Amicalement,
Modifié par parsimonhi (21 Sep 2020 - 07:59)

Kim132

25 Sep 2020 à 05:44

parsimonhi a écrit :
Bonjour,

Clairement, tu ne peux pas faire un nl2br à l'ensemble de ton $billet['contenu1']. Il faudrait ne le faire que pour les parties qui en ont besoin (des paragraphes ?). Ou bien éventuellement, tu peux continuer à faire un nl2br() sur l'ensemble mais retirer les inutiles si je comprends bien ton besoin.

C'est un peu difficile de donner une solution toute faite sans savoir ce que contient exactement $billet['contenu1'].

Ça peut se faire avec des preg_replace() sur le contenu comme tu l'as fait pour rajouter tes styles.

Par exemple (à adapter en fonction de la situation réelle, car je me suis basé sur le code html que tu as donné, mais il y a peut-être des cas différents en réalité), tu peux ajouter juste après tes preg_replace qui ajoutent tes styles un truc du genre :
$contenu = preg_replace("#&lt;/(td|tr|th|caption|table)&gt;([^&lt;]*&lt;br ?/?&gt;[^&lt;]*)+#i", "&lt;/$1&gt;\n", $contenu);
$contenu = preg_replace("#&lt;br /&gt;\s&lt;(td|tr|th|caption|table)#i", "&gt;\n&lt;$1", $contenu);
Mais bon, c'est du bricolage ! Le mieux serait de ne faire des nl2br() "maisons" que sur les parties du contenu qui en ont besoin (sans doute avec des preg_replace remplaçant les \s par des seulement où c'est nécessaire). Le code peut être assez complexe selon ce qu'est ton contenu.

Amicalement,

Merci!

Sujet clos

Sémantique web et HTML

Tableau ne s'affiche pas directement sous paragraphie