[Résolu] Alignement vertical du texte

Bonjour à tous,
Il doit y avoir une méthode plus facile que ce que j'utilise, mais je n'ai pas pu la trouver!
dans un tableau à 3 colonnes dont 2 groupées alternativement, j'ai dans une cellule unique, une photo de 300x20 et dans les 2 autre cellules groupées, le texte correspondant aligné en haut de la cellule.
jusque là, pas de problèmes (j'utilise surement une façon empirique pour le code, mais à 78 printemps, c'est ce que je maitrise le moins mal).
Ce que je veux ajouter, c'est dans les cellules texte, une légende placée en bas et alignée à droite ou gauche concernant la photo.
Actuellement, j'utilise <br> pour positionner le texte mais je suppose qu'il y a vraisemblablement un code à entrer en supplément dans ma ligne
<p align="right"><em>&nbsp;Terrasse extérieure&nbsp;</em></p>

code de la page
<!-- ***************************************************************** -->
<div style="display: none;" id="pop4">
<!-- ***************************************************************** -->

<div class="conteneur2">
<table width="900" border="0" align="center" bgcolor="#F0F0D9">
<tr><td width=40%>&nbsp;</td><td width=16%>&nbsp;</td><td width=40%>&nbsp;</td></tr>
<tr><td colspan="3"><em>&nbsp;Le bricolage&nbsp;</em></td></tr>
<tr><td colspan="3">&nbsp;&nbsp;</td></tr>
<tr>
<td>&nbsp;<img src="images/couvert-voiture_018.jpg" alt="..." width="300" height="200"></td>
<td colspan="2" valign="top" >&nbsp;J'ai toujours, à coté de mon activité professionelle, aimé le bricolage et, le fait d'avoir été artisan m'a permis de faire l'acquisition de pas mal d'outillage, tours d'outilleur Crouzet et Simonet, fraiseuse Aciera F3, perçeuses à colonne et sensitives, combiné à bois Lurem 6 opérations qui me rendent bien service à présent et me permettent d'occuper ma retraite.</p>
<br><br><p align="left"><em>&nbsp;Couvert voiture et balcon terrasse&nbsp;</em></p></td>
</tr>
<tr>
<td colspan="2" valign="top" >&nbsp;J'ai une préférence pour les gros travaux dans toutes les disciplines, les finitions me passionnent nettement moins.<br>Le fait de maitriser les logiciels de dessins techniques et 3D me permet de faire une étude préalable, pour visionner l'aspect final des travaux envisagés.<p>
<br><br><br><p align="right"><em>&nbsp;Terrasse extérieure&nbsp;</em></p></td>
<td>&nbsp;<img src="images/origine_030.jpg" alt="..." width="300" height="200"></td>
</tr>
<tr>
<td>&nbsp;<img src="images/etudes_travaux_035.jpg" alt="..." width="300" height="200"></td>
<td colspan="2" valign="top" >&nbsp;La modification de ma salle d'eau montre dans 3 photos<br>ma façon de procéder.</p>
<br><br><br><br><br><br><p align="left"><em>&nbsp;Etude salle d'eau en 3D&nbsp;</em></p></td>
</tr>
<tr>
<td colspan="2" valign="top" >&nbsp;Etude 3D de ce qui est envisagé<br><br>état original<br><br>aménagement en cours de finition <p>
<br><br><br><br><p align="right"><em>&nbsp;Salle d'eau actuelle&nbsp;</em></p></td>
<td>&nbsp;<img src="images/salle-eau_003.jpg" alt="..." width="300" height="200"></td>
</tr>
<tr>
<td>&nbsp;<img src="images/salle-eau_052.jpg" alt="..." width="200" height="267"></td>
<td colspan="2">&nbsp;Cliquer sur la flèche pour accéder au dossier "Bricolage"<br><a href="bricolage/index_bricolage.php" target="_blank"><img src="boutons/arrow10_r.gif" width="26" height="23"> </a>
<br> <br> <br> <br> <br>
C'est une nouvelle version de mon site, je suis en train de la réecrire, alors il faut m'excuser si il y a quelques bugs</p>
<br><br><p align="left"><em>&nbsp;Nouvelle salle d'eau&nbsp;</em></p></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
</div>
<!-- ======= Fin du POP 4 -->

Merci d'avance de vos avis
Modifié par helvetdulac (15 Aug 2017 - 09:45)

Bonjour helvetdulac,

Effectivement il y a une manière plus propre de faire tout ça.
Tout d'abord je ne pense pas que tu aies besoin de faire un tableau pour organiser ta page. Tu dois juste décomposer ta page en bloc <div> comme tu l'as si bien commencé avec ton bloc conteneur.

Ensuite, il faut agencer tes blocs grâce au CSS. Et c'est à ce moment là ou tu dois utiliser autre chose qu'une succession de <br>. Je vois aussi que tu as une ligne entière de ton tableau qui est vide, peut-être pour faire un espace avec le haut de ta page ? Un <br> doit en règle générale être appelé dans une balise paragraphe <p>.
Par exemple :

<p>Bonjour,<br />Je saute une ligne</p>

En règle général tu dois déclarer une feuille de style CSS dans le <head> de ton code.
Puis rédiger ton CSS dans cette feuille uniquement. Tu gagneras en clarté dans ta feuille HTML. Tu trouveras ton bonheur dans les tutoriels Alsacréations sur le HTML et le CSS.
Ou bien sur https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3

Je reste à ta disposition si tu as besoin d'un coup de main.

Clément
Modifié par GrandGTO (15 Aug 2017 - 10:58)

Pour répondre quand même à ta question, pour centrer un texte :

<p style="text-align : right;">texte à droite</p>
<p style="text-align : left;">texte à gauche</p>
<p style="text-align : center;">texte centré</p>

Modifié par GrandGTO (15 Aug 2017 - 11:11)

Je pense que ta structure <table> n'est pas adaptée pour ce que tu fais. Mais si tu souhaites vraiment faire avec, voici une solution possible mais que je ne cautionne pas :

<p style="margin-bottom: 100px;">Mon texte</p>

Bonjour,
GrandGTO : tes solutions ne sont pas bonnes, on ne doit pas mettre style="" mais utiliser la feuille de style à cet effet.
helvetdulac, j'avais commencé à vous répondre sur un autre forum, en préconisant une solution à base de flex-box, j'ai testé la solution et tout fonctionne parfaitement.

Une structure beaucoup plus propre et facilement modifiable et responsive serait quelque chose comme ceci :

<section class="tableau">
	
	<header>
		<h1>Avant-propos sur les fleurs</h1>
	</header>
	
	<article>
		<figure><img src="image/1.jpg" alt="aaaaa"></figure>
		<div class="contenu">
			<div class="contenu-texte">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</div>
			<div class="contenu-nom">
				Lorem ipsum
			</div>
		</div>
	</article>
	
	<article>
		<figure><img src="image/2.jpg" alt="bbbbb"></figure>
		<div class="contenu">
			<div class="contenu-texte">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</div>
			<div class="contenu-nom">
				Dolor sit amet
			</div>
		</div>
	</article>

	<article>
		<figure><img src="image/3.jpg" alt="ccccc"></figure>
		<div class="contenu">
			<div class="contenu-texte">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</div>
			<div class="contenu-nom">
				Consectetur adipiscing
			</div>
		</div>
	</article>
	
	<article>
		<figure><img src="image/4.jpg" alt="ddddd"></figure>
		<div class="contenu">
			<div class="contenu-texte">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</div>
			<div class="contenu-nom">
				 Sed do eiusmod
			</div>
		</div>
	</article>
	
</section>

Beaucoup plus clair et facile à modifier, chaque ligne du tableau est un <article>; de plus si les données sont dans une base de données, c'est très simple d'insérer les données dans une boucle PHP.

C'est la feuille de style qui va faire la mise en page, à base de flex, et le tableau sera facilement responsive:

.tableau header h1 {
	margin:0;
	text-align:center;
	line-height:60px;
}
.tableau article {
	display:flex;
	margin-bottom:10px;
	height:200px;
	border:1px solid #ccc;
}

.tableau article figure {
	margin:0;
	height:100%;
}

.tableau article:nth-child(odd) figure {
	order:2;
}

.tableau article figure img{
	height:100%;
}

.tableau article .contenu {
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	height:100%;
}

.tableau article .contenu .contenu-texte {
	text-align:center;
	padding:10px;
}

.tableau article .contenu .contenu-nom {
	font-style:italic;
	padding:10px;
}

.tableau article:nth-child(odd) .contenu .contenu-nom {
	text-align:right;
}

et on rend facilement le tout responsive :

@media (max-width: 768px) {
	.tableau article {
		flex-direction:column;
		height:auto;
	}
	
	.tableau article:nth-child(odd) figure {
		order:0;
	}
		
	.tableau article figure img{
		width:100%;
	}
	.tableau article .contenu .contenu-texte {
		order:1;
	}
	.tableau article .contenu .contenu-nom,.tableau article:nth-child(odd) .contenu .contenu-nom {
		text-align:center;
	}
}

Sûrement à améliorer mais on n'est pas loin

l'utilisation des flex-box simplifie énormément la mise en page
Modifié par farang (15 Aug 2017 - 18:34)

farang a écrit :
Bonjour,
GrandGTO : tes solutions ne sont pas bonnes, on ne doit pas mettre style="" mais utiliser la feuille de style à cet effet.

Entièrement d'accord. Mais je crois que tu n'as pas lu tout mes messages...

Ceci dit, il est vivement déconseillé d'utiliser des tag personnalisés, c'est une mauvaise pratique. Une fausse bonne idée.
Tes tag <article>, c'est très mauvais.
Modifié par GrandGTO (15 Aug 2017 - 12:19)

GrandGTO :
Quels tags personnalisés ? <article> ?
https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
Faut pas prendre la mouche comme ça ...

Si on se fie à la capture d'écran, ce que l'on prend pour des titres ( en fluo ) est en fait une légende pour chaque photo donc le code serait :

<figure>
  <img src="image.jpg" alt="" />
  <figcaption>Légende associée</figcaption>
</figure>

On y verrait déjà plus clair, ensuite on peut travailler les textes avec les float par exemple.

Pour illustrer mes propos je vous propose ce code dégueulasse ( je ne suis que debutant ) mais bon :

<figure>
  <img src="http://via.placeholder.com/350x150" alt="" />
  <figcaption>Légende associée</figcaption>
</figure>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius ipsum egestas justo lobortis, sed fermentum erat accumsan. Pellentesque nisl magna, finibus in pellentesque quis, efficitur quis urna. Cras interdum tempor sem, ac sagittis sem scelerisque non. Nunc leo dui, mollis sed mollis et, gravida vel augue. Nulla facilisi. Curabitur eget enim arcu. Duis tincidunt consequat ligula, eget auctor quam euismod tristique. Sed sit amet ligula porta, hendrerit ante nec, scelerisque felis. Nulla facilisi. In eget eros ac nisi bibendum rutrum ut ac turpis. Integer egestas eros quis metus convallis, at tempus nisi euismod. Vestibulum ultricies blandit tincidunt. Curabitur tincidunt condimentum rhoncus. Aliquam eu dolor sem.
</p>

figure {
  float: left;
  margin: 0;
}

figcaption {
  font-weight: bold;
}

p {
  padding-left: 360px;
}

Bonjour Farang et merci pour ton exemple
j'ai effectivement reçu pour mon problème, un message me conseillant d'utiliser flexbox, j'ai été sur le site, mais, je suis un vieux c.. de 78 ans et je n'ai plus la tête pour enregistrer des nouveautés et surtout les assembler d'une façon logique.
Par contre avec un exemple concret, j'arrive à me débrouiller pas trop mal et ton message m'a permis d'adapter ma présentation sans utiliser de tableau.
par contre, je n'ai pas réussi à trouver comment avoir une couleur de fond et avoir une légère marge autour des photos.
pour avoir le texte contre la photo, j'ai modifié la fonction 1 fois sur 2
<div class="contenu-nom">
<p style="text-align : left;"><em>&nbsp;Couvert à voiture&nbsp;</em></p>
</div>
je joins une photo de mon résultat


Merci encore beaucoup, Farang pour ton aide efficace

rebonjour farang,
comme je l'ai dit dans le précédent message, je suis incapable d'assembler le code, mais dans la mesure ou j'ai un embryon de code, j'arrive, après avoir beaucoup pataugé, à modifier dans un sens qui me plait.
j'ai trouvé entretemps la façon d'avoir une marge autour des images qui m'agrée et pour avoir un fond, j'ai copiée une photo dans la <div> contenant la page.
dans la version finale la border:1px sera remplacée par 0px.



voilà le résultat final, je considère le problème résolu
Merci encore à vos messages qui ont permis de résoudre ma demande