Aligner un tableau et une image

Bonjour,

Lilili a écrit :
Voici une explication pas simple et pas nécessaire, uniquement pour les plus curieux :
Pour formater correctement un texte qui s'écrit de droite à gauche, si l'on veut positionner le texte à côté gauche dans un tableau principal, il faut formater ce texte dans un petit tableau, puis positionner ce petit tableau à la gauche dans le tableau principal ! Sinon, les paragraphes ne s'alignent pas correctement.

Je parierais bien qu'on n'a pas du tout besoin de ce petit tableau !

Mais il faudrait un exemple de html simple pour qu'il n'y ait pas d'ambiguïté dans la question, et éventuellement une image qui montre le résultat attendu, parce tel que c'est présenté, c'est difficile de savoir ce que tu attends vraiment.

Entre autre, quand tu dis "de droite à gauche", s'agit-il d'une langue s'écrivant de la droite vers la gauche, ou bien juste un texte en français cadré à droite de son conteneur ?

Ensuite, quand tu dis que les paragraphes ne s'alignent pas correctement, ça signifie quoi ? Ils ne s'alignent correctement dans le sens vertical, ou horizontal, et par rapport à quoi ? Par exemple, s'ils ne s'alignent pas dans le sens vertical, doivent-ils être "alignés avec le haut du conteneur, le bas du conteneur, le milieu du conteneur etc. ?

Amicalement,
Modifié par parsimonhi (11 Sep 2020 - 22:26)

Bonjour Parsimonhi,

Moi aussi je peux parier qu'il y a fortement besoin d'avoir un petit tableau avec du texte déjà formaté de droit à gauche et respectant toute exigence de la langue arabe littéraire qui s'écrit de droite à gauche, dans le cas spécifique que j'ai expliqué !

Mais, laissons tomber tout cela.
Oubliez complètement ce que j'ai déjà écrit, parce que je vais formuler maintenant la question d'une autre façon.

Voici ce que j'ai fait par le logiciel "Expression Web 4" :
• J'ai fait un tableau qui a une largeur à 100 %, avec une seule ligne et une seule colonne.
• Dans ce tableau principal -- sans le diviser en deux colonnes ou en deux lignes -- au côté gauche, j'ai imbriqué un petit tableau qui contient mon texte en arabe littéraire bien formaté.
• Et toujours dans le tableau principal, mais dehors de ce petit tableau, j'ai positionné une image au côté droit.
L'image est bien alignée sur la même ligne que le petit tableau.

Apparemment, tout va bien avec les navigateurs Firefox et Google Chrome, sur mon smartphone Android, et mon pc Windows 10.

Mes questions :

1 — Est-il conforme aux règles de HTML ce que j'ai fait ?
C'est-à-dire faire habiller un TABLEAU et une image, au lieu d'habiller un TEXTE et une image ?
Autrement dit, considérer un tableau avec ensemble de son contenu comme un simple texte est-il conforme aux règles de HTML ?
Cela fonctionne pour moi, mais ne semble pas être normal !

2 — Puis-je m'en assurer que cela fonctionne correctement sur les autres smartphones (Android et iOS) et autres ordinateurs avec autres systèmes d'exploitation ?

Voilà, c'est tout !
Et merci d'avance

Amicalement
Modifié par Lilili (12 Sep 2020 - 05:04)

Bonjour Jean-Pierre,

Je vous remercie beaucoup pour votre renseignement. Mais, cela ne correspond pas à ma demande.
J'ai formulé maintenant la question d'une autre façon.

Amicalement
Modifié par Lilili (12 Sep 2020 - 04:49)

Bonjour,

Lilili a écrit :

Voici ce que j'ai fait par le logiciel "Expression Web 4" :
• J'ai fait un tableau qui a une largeur à 100 %, avec une seule ligne et une seule colonne.
• Dans ce tableau principal -- sans le diviser en deux colonnes ou en deux lignes -- au côté gauche, j'ai imbriqué un petit tableau qui contient mon texte en arabe littéraire bien formaté.
• Et toujours dans le tableau principal, mais dehors de ce petit tableau, j'ai positionné une image au côté droit.
L'image est bien alignée sur la même ligne que le petit tableau.

Apparemment, tout va bien avec les navigateurs Firefox et Google Chrome, sur mon smartphone Android, et mon pc Windows 10.

Mes questions :

1 — Est-il conforme aux règles de HTML ce que j'ai fait ?
C'est-à-dire faire habiller un TABLEAU et une image, au lieu d'habiller un TEXTE et une image ?
Autrement dit, considérer un tableau avec ensemble de son contenu comme un simple texte est-il conforme aux règles de HTML ?
Cela fonctionne pour moi, mais ne semble pas être normal !

2 — Puis-je m'en assurer que cela fonctionne correctement sur les autres smartphones (Android et iOS) et autres ordinateurs avec autres systèmes d'exploitation ?

Pour la question 1, tu peux mettre un petit tableau si tu veux, mais mettre une balise <p> au lieu d'une balise <table> serait mieux.

Pour la question 2, on ne peut jamais avoir l'assurance que ça fonctionne partout, mais si ça marche avec les navigateurs Firefox et Google Chrome, sur ton smartphone Android, et ton pc Windows 10, c'est déjà très bien.

Ceci dit, je ne vois toujours pas pourquoi il y aurait besoin d'un "petit tableau".

Voici un exemple qui me semble bien marcher sans avoir besoin d'un petit tableau.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Test</title>
<style>
body
{
	direction:rtl;
}
table
{
	width:50%;
	margin:0 auto;
}
td
{
	display:flex;
	align-items:top;
}
p
{
	background:lightgreen;
	margin:0;
	padding:0 1rem;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="myImg.jpg" width="300px" height="200px">
<p>&#1575;&#1604;&#1571;&#1583;&#1576; &#1575;&#1604;&#1593;&#1585;&#1576;&#1610; &#1607;&#1608; &#1605;&#1580;&#1605;&#1608;&#1593; &#1575;&#1604;&#1571;&#1593;&#1605;&#1575;&#1604; &#1575;&#1604;&#1605;&#1603;&#1578;&#1608;&#1576;&#1577; &#1576;&#1575;&#1604;&#1604;&#1594;&#1577; &#1575;&#1604;&#1593;&#1585;&#1576;&#1610;&#1577;&#1548; &#1608;&#1610;&#1588;&#1605;&#1604; &#1575;&#1604;&#1571;&#1583;&#1576; &#1575;&#1604;&#1593;&#1585;&#1576;&#1610; &#1575;&#1604;&#1606;&#1579;&#1585; &#1608;&#1575;&#1604;&#1588;&#1593;&#1585; &#1575;&#1604;&#1605;&#1603;&#1578;&#1608;&#1576;&#1610;&#1606; &#1576;&#1575;&#1604;&#1593;&#1585;&#1576;&#1610;&#1577; &#1608;&#1603;&#1584;&#1604;&#1603; &#1610;&#1588;&#1605;&#1604; &#1575;&#1604;&#1571;&#1583;&#1576; &#1575;&#1604;&#1602;&#1589;&#1589;&#1610; &#1608;&#1575;&#1604;&#1585;&#1608;&#1575;&#1610;&#1577; &#1608;&#1575;&#1604;&#1605;&#1587;&#1585;&#1581; &#1608;&#1575;&#1604;&#1606;&#1602;&#1583;. &#1575;&#1586;&#1583;&#1607;&#1585; &#1575;&#1604;&#1571;&#1583;&#1576; &#1575;&#1604;&#1593;&#1585;&#1576;&#1610; &#1582;&#1604;&#1575;&#1604; &#1575;&#1604;&#1593;&#1589;&#1585; &#1575;&#1604;&#1584;&#1607;&#1576;&#1610; &#1604;&#1604;&#1573;&#1587;&#1604;&#1575;&#1605;&#1548; &#1608;&#1592;&#1604; &#1606;&#1575;&#1576;&#1590;&#1575; &#1576;&#1575;&#1604;&#1581;&#1610;&#1575;&#1577; &#1581;&#1578;&#1609; &#1610;&#1608;&#1605;&#1606;&#1575; &#1607;&#1584;&#1575;. </p></td>
</tr>
</table>
</body>
</html>

Amicalement,
Modifié par parsimonhi (12 Sep 2020 - 19:38)

parsimonhi a écrit :
Bonjour,


Pour la question 1, tu peux mettre un petit tableau si tu veux, mais mettre une balise &lt;p&gt; au lieu d'une balise &lt;table&gt; serait mieux.

Pour la question 2, on ne peut jamais avoir l'assurance que ça fonctionne partout, mais si ça marche avec les navigateurs Firefox et Google Chrome, sur ton smartphone Android, et ton pc Windows 10, c'est déjà très bien.

Ceci dit, je ne vois toujours pas pourquoi il y aurait besoin d'un "petit tableau".

Voici un exemple qui me semble bien marcher sans avoir besoin d'un petit tableau.
[/code]

Amicalement,

Bonjour Parsimonhi,

Merci infiniment pour votre réponse.
Je vais essayer vos codes, et si nécessaire changer certaines parties de ces codes selon le cas et les cas, et je vous tiendrai au courant.

Merci encore
Amicalement

Bonjour,
flex et direction/dir fonctionnent bien et permettent de s'affranchir d'un reset sur text-align et partiellement l'usage de float, là où un texte n'a pas besoin de glisser autour d'un autre élément. flex permet aussi un alignement vertical d'un texte à coté d'une image.

La structure HTML peut-être ici réduite à un simple paragraphe <p> ou éventuellement revue en <figure><img><figcaption> ... voir si pertinent : https://www.alsacreations.com/article/lire/1337-html5-elements-figure-et-figcaption.html .

Si le document contient plusieurs langues, l'attribut lang permet aussi de faire le switch via la feuille de style. (et accessoirement : https://developer.mozilla.org/fr/docs/Web/CSS/unicode-bidi peut avoir une utilité)

exemple sur un simple paragraphe ou figure , donc sans tableaux , <p> en largeur fixe ou <figure> sans largeur définie. https://codepen.io/gc-nomade/pen/poyVMVm

Pour infos et a revoir plus tard pour ne pas ajouter de confusion

Cdt
Modifié par gcyrillus (13 Sep 2020 - 12:55)

gcyrillus a écrit :
Bonjour,
flex et direction/dir fonctionnent bien et permettent de s'affranchir d'un reset sur text-align et partiellement l'usage de float, là où un texte n'a pas besoin de glisser autour d'un autre élément. flex permet aussi un alignement vertical d'un texte à coté d'une image.

La structure HTML peut-être ici réduite à un simple paragraphe &lt;p&gt; ou éventuellement revue en &lt;figure&gt;&lt;img&gt;&lt;figcaption&gt; ... voir si pertinent : https://www.alsacreations.com/article/lire/1337-html5-elements-figure-et-figcaption.html .

Si le document contient plusieurs langues, l'attribut lang permet aussi de faire le switch via la feuille de style. (et accessoirement : https://developer.mozilla.org/fr/docs/Web/CSS/unicode-bidi peut avoir une utilité)

exemple sur un simple paragraphe ou figure , donc sans tableaux , &lt;p&gt; en largeur fixe ou &lt;figure&gt; sans largeur définie. https://codepen.io/gc-nomade/pen/poyVMVm

Pour infos et a revoir plus tard pour ne pas ajouter de confusion

Cdt

Bonjour Gcyrillus,

J'écris ces petits mots pressés pour ne pas retarder mes remerciements.
Dès que possible, je vais essayer tout cela, et je vous mettrai au courant.
Apparemment, ici c'est un très bon endroit pour apprendre !

Merci mille fois

Amicalement
Modifié par Lilili (14 Sep 2020 - 22:01)