5546 sujets

Sémantique web et HTML

Aligner 3 numéros de téléphone en code html

Bonjour

Je voudrais aligner 3 numéros de téléphone en code html.
Je ne souhaite pas utiliser d'autre langage.

Voici le résultat que j'obtiens :
Tél. 01 02 03 04 05
Port. 06 07 08 09 10
Fax 11 12 13 14 15

J'aimerais que les numéros de téléphone soient correctement alignés l'un en-dessous de l'autre.
J'ai essayé de mettre des espaces après "Tél." et "Fax" afin qu'ils aient la même taille que "Port.", mais ça ne fonctionne pas.

Ci-dessous mon petit code html :

<!-- ------------------------------------------------------- -->
<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="ISO-8859-1">
</head>

<body style="margin:0;padding:0;word-spacing:normal;background-color:#ffffff;">
<div style="text-size-adjust:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#ffffff;">
<tr>
<td style="padding:15px 30px 2px 5px;background-color:#ffffff;border-top:1px solid #f0f0f5;">
Tél. 01 02 03 04 05<br>
Port. 06 07 08 09 10<br>
Fax 11 12 13 14 15<br>
</td>
</tr>
</div>
</body>

</html>
<!-- ------------------------------------------------------- -->

Merci par avance si quelqu'un pouvait me dépanner !
Modifié par CRLB (17 Apr 2021 - 16:10)
Bonjour et bienvenue sur le forum,
Tout d'abord, le style appliqué au td n'est pas effectif actuellement.
Pour faire ce que vous souhaitez (si j'ai bien compris), le <pre> peut être utilisé après avoir ajouté des espaces :
upload/1618676693-81417-correct.png au lieu de upload/1618676708-81417-mauvais.png

Ainsi, le code est :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="ISO-8859-1">
</head>
<body style="margin:0;padding:0;word-spacing:normal;background-color:#ffffff;">
<div style="text-size-adjust:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#ffffff;">
<tr>
<td style="padding:15px 30px 2px 5px;background-color:#ffffff;border-top:1px solid #f0f0f5;">
<pre>Tél.  01 02 03 04 05<br>
Port. 06 07 08 09 10<br>
Fax   11 12 13 14 15<br></pre>
</td>
</tr>
</div>
</body>
</html>


P.S. : Pensez à utiliser la colorisation syntaxique pour votre code.

--------------------------------------------------------------------------------------------------
Quand vous avez trouvé votre réponse, cochez "Résolu" et indiquez la meilleure solution.
Modérateur
Salut,

Il y a plusieurs autres solutions plus ou moins bien à mettre en place.

La plus simple serait de rajouter des espaces avec &nbsp; pour tenter de tomber juste mais c'est pas ouf comme solution et pas hyper bien aligné.

Le pre comme js_html le propose (mais ca change la font et je ne suis pas sur qu'on puisse en, remettre une autre à la place)

Mettre des span avec une largeur définie (mais un peu bancal comme solution car pas hyper flexible..

Un tableau :
<table>
    <tr>
        <td>Tél. </td>
        <td>01 02 03 04 05</td>
    </tr>
    <tr>
        <td>Port.</td>
        <td>06 07 08 09 10</td>
    </tr>
    <tr>
        <td>Fax</td>
        <td>11 12 13 14 15</td>
    </tr>
</table>

ou un tableau mais avec du flex ou du grid..

etc...

les exemples : https://jsfiddle.net/undless/q1t3bvxp/

Bonne soirée à vous deux
Modérateur
Bonsoir,

Il y a aussi la possibilité de s'inspirer de hcard pour créer l'architecture HTML et comme le suggére @Laurent, de faire usage de grid coté CSS.

Coté structure, cela pourrait être :
<dl class="tel">
  <dt>Tel.<span class="type">work</span></dt>
  <dd><span class="value">01 02 03 04 05</span></dd>
  <dt>Port.<span class="type">cell</span></dt>
  <dd><span class="value">06 07 08 09 10</span></dd>
  <dt>Fax<span class="type">fax</span></dt>
  <dd><span class="value">11 12 13 14 15</span></dd>
</dl>

et la base coté CSS serait:
/* base */
.tel {
  display: grid;
  grid-template-columns: repeat(2, auto);
}


A partir de là tu peut broder sur les styles de ta carte de Numéro de téléphone.
https://jsfiddle.net/wdas4ue3/

Cdt

ressources :

http://microformats.org/wiki/hcard (anglophone)

2017 - https://www.alsacreations.com/astuce/lire/1739-CSS-Grid-Layout-les-ressources-indispensables-pour-apprendre.html

2018 - https://www.alsacreations.com/tuto/lire/1771-css-grid-layout-en-production.html

2019 - https://www.alsacreations.com/livres/lire/1786-css3-grid-layout-vous-allez-enfin-aimer-css.html
Sujet clos
Aller à