Faire un trait vertical en HTML

phcm64100 · 29 Avril 2020

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>

Membre supprimé 1129907 · 29 Avril 2020

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)

phcm64100 · 30 Avril 2020

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>

Membre supprimé 1129907 · 30 Avril 2020

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>

phcm64100 · 30 Avril 2020

Ecatomb

merci mais pas de trait vertical
je prend ton code et le met la mais rien

Free Online Instant HTML Editor and Cleaner

HTML Editor is the best tool to compose web articles quickly and error-free. See the rich-text content and its source code side by side in this real-time composer.

htmleditor.tools

Membre supprimé 1129907 · 30 Avril 2020

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

phcm64100 · 30 Avril 2020

merci, c est bon
merci

Faire un trait vertical en HTML

phcm64100

Membre actif

Membre supprimé 1129907

Invité

phcm64100

Membre actif

Membre supprimé 1129907

Invité

phcm64100

Membre actif

Free Online Instant HTML Editor and Cleaner

Membre supprimé 1129907

Invité

phcm64100

Membre actif

Sujets similaires