Faire un trait vertical en HTML

phcm64100

Membre actif
Bonjour

j ai un tableau de 3 colonnes, et je n arrive pas a mettre un trait vertical de 2 pixel de large à la place de dd dans la 2eme colonne avec une hauteur réglable

merci de votre aide

Bloc de code:
<table style="width: 480px;">
<tbody>
<tr style="height: 33px;">
<td style="width: 108px; height: 33px;"><img src="http://cazauxmoutou.fr/images/PCM2.gif" alt="" width="104" /></td>

<td style="width: 31.078125px; height: 33px;">dd</td> <--------ICI

<td style="width: 323.921875px; height: 33px;"><span style="font: 600 1.3em Verdana, Geneva, sans-serif; color: #0a549b;">CAZAUX-MOUTOU Philippe</span>
<p><span style="font-weight: 600; font-size: 0.8em; color: #0a549b;">Mobile :&nbsp;&nbsp;<b><a href="tel:0767%">0767 332211<br /></a></b><span style="font-weight: 600; font-size: 1em; color: #0a549b;">Email :&nbsp;&nbsp;</span><a href="mailto:[email protected]" target="">[email protected]</a></p>
<p><b><a href="https://Moutou/languages/fr/index.html" target="_blank" rel="noopener" title="Ma g&eacute;n&eacute;alogie"><img src="http://cazauxmoutou.fr/images/MFT4.gif" alt="" width="40" /></a>&nbsp;&nbsp;<a href="https://www.youtube.com/channel/UCMJl_Y-IypNsIsRN_OA/videos" target="_blank" rel="noopener" title="Mes vid&eacute;os"><img src="http://cazauxmoutou.fr/images/YT4.gif" alt="" width="40" /></a></b></p>
</td>
</tr>
</tbody>
</table>
 
Dernière édition par un modérateur:
Dans la partie <style> de ta page:
Bloc de code:
.ligne {
    border-width: 2px;
    border-left-style: solid;
    border-color: #000000;
  }

Rajoute la partie classe ici:
Bloc de code:
  <td style="width: 31.078125px; height: 33px;" class="ligne">dd</td> <--------ICI

Cela rajoutera une bordure à gauche de ta zone (et donc une barre verticale)
 
Merci j ai essayé ca, mais marche pas

Bloc de code:
<table style="width: 480px;>
<tbody>
<tr style="height: 33px;".ligne {
    border-width: 2px;
    border-left-style: solid;
    border-color: #000000;"
  }>
<td style="width: 108px; height: 33px;"><img src="http://cazauxmoutou.fr/images/PCM2.gif" alt="" width="104" /></td>

<td style="width: 31.078125px; height: 33px;class="ligne"">dd</td>

<td style="width: 323.921875px; height: 33px;"><span style="font: 600 1.3em Verdana, Geneva, sans-serif; color: #0a549b;">CAZAUX-MOUTOU Philippe</span>
<p><span style="font-weight: 600; font-size: 0.8em; color: #0a549b;">Mobile :&nbsp;&nbsp;<b><a href="tel:0767%">0767 332211<br /></a></b><span style="font-weight: 600; font-size: 1em; color: #0a549b;">Email :&nbsp;&nbsp;</span><a href="mailto:[email protected]" target="">[email protected]</a></p>
<p><b><a href="https://Moutou/languages/fr/index.html" target="_blank" rel="noopener" title="Ma g&eacute;n&eacute;alogie"><img src="http://cazauxmoutou.fr/images/MFT4.gif" alt="" width="40" /></a>&nbsp;&nbsp;<a href="https://www.youtube.com/channel/UCMJl_Y-IypNsIsRN_OA/videos" target="_blank" rel="noopener" title="Mes vid&eacute;os"><img src="http://cazauxmoutou.fr/images/YT4.gif" alt="" width="40" /></a></b></p>
</td>
</tr>
</tbody>
</table>
 
Ce sera sans doute mieux pour toi si je te mets le code d'une page complète contenant ta partie.
Les [email protected] seront à remplacer par ton mail ;)

Bloc de code:
<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Un titre</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <style>
.ligne {
    border-width: 2px;
    border-left-style: solid;
    border-color: #000000;
  }
  </style>
</head>
<body>
  <main>
    <table style="width: 480px;">
      <tbody>
      <tr style="height: 33px;">
      <td style="width: 108px; height: 33px;"><img src="http://cazauxmoutou.fr/images/PCM2.gif" alt="" width="104" /></td>
    
      <td style="width: 31.078125px; height: 33px;" class="ligne">dd</td>
    
      <td style="width: 323.921875px; height: 33px;"><span style="font: 600 1.3em Verdana, Geneva, sans-serif; color: #0a549b;">CAZAUX-MOUTOU Philippe</span>
      <p><span style="font-weight: 600; font-size: 0.8em; color: #0a549b;">Mobile :&nbsp;&nbsp;<b><a href="tel:0767%">0767 332211<br /></a></b><span style="font-weight: 600; font-size: 1em; color: #0a549b;">Email :&nbsp;&nbsp;</span><a href="mailto:[email protected]" target="">[email protected]</a></p>
      <p><b><a href="https://Moutou/languages/fr/index.html" target="_blank" rel="noopener" title="Ma g&eacute;n&eacute;alogie"><img src="http://cazauxmoutou.fr/images/MFT4.gif" alt="" width="40" /></a>&nbsp;&nbsp;<a href="https://www.youtube.com/channel/UCMJl_Y-IypNsIsRN_OA/videos" target="_blank" rel="noopener" title="Mes vid&eacute;os"><img src="http://cazauxmoutou.fr/images/YT4.gif" alt="" width="40" /></a></b></p>
      </td>
      </tr>
      </tbody>
    </table>
  </main>
</body>
</html>
 
Ouvre TextEdit, colle mon code et enregistre ça comme fichier avec pour extension html.
Quand tu afficheras le fichier html, tu devrais avoir quelque chose comme ceci :
Capture d’écran 2020-04-30 à 11.19.52.png