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>
 
Ecatomb

merci mais pas de trait vertical
je prend ton code et le met la mais rien
 
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
 
merci, c est bon
merci