Trait avant et après un th

Salut tout le monde,

Je viens vers vous pour un petit problème que je rencontre.
J'aimerais mettre en place sur plusieurs page de mon site un tableau (par forcément le même), avec des descriptions et des prix. Tout ça trié par catégorie et donc avoir un titre pour chaque catégorie.
En gros mon tableau sera :

<th> titre 1</th>
<tr> 
<td> description 1</td>
<td> prix 1 </td>
</tr>
<th> titre 2</th>
<tr> 
<td> description 2</td>
<td> prix 2 </td>
</tr>
<th> titre 3</th>
<tr> 
<td> description 3</td>
<td> prix 3 </td>
</tr>

J'en viens à mon problème.
J'aimerais mettre avant et après chaque titre un trait pour les mettre en valeur. Mais pas juste un trait droit classique, j'ai joins une image pour vous donner un exemple de trait que j'aimerais mettre en place pour chaque titre. (celui-ci je l'ai fait sous photoshop)
Vous me direz surement intègre directement l'image avant et après le titre, sauf que je vais avoir pas mal de pages donc de tableaux donc de titres, et la somme de tout ça va faire très lourd juste pour un trait.
C'est pour cela que je viens vous demander votre aide, savoir comment je pourrais faire en css pour avoir un trait qui ressemble à ça.
J'avais pensé avec le border-radius, mais je n'ai rien eu de concluant.
Merci par avance pour vos retours.
N'hésitez pas à me demander plus d'information, si jamais vous ne comprenez pas quelques chose.

Salut,

En CSS ca va etre compliqué.
Mais franchement une petite image bien compressée ça pèsera rien. Et si c'est la meme a chaque fois, elle ne sera importé qu'une seule fois bien qu'affiché plusieurs fois. Je ne pense pas que ca soit trop lourd.
Tu peux aussi la faire en svg et soit l'importer comme une image soit l'intégrer directement dans le code (mais la pour le coup ca va etre plus lours vu qu'il faudra mettre le code svg a chaque fois).

Merci _Laurent et sneazzy95 pour vos réponses.
J'aurais voulu avoir des traits différents pour chaque tableau.
Même si c'est compliqué, est-ce que vous auriez une idée de la marche à suivre, j'essaierais de me renseigner par la suite.

bonjour,

je suis surpris du code HTML que tu partages pour nous montrer ton soucis. Il est probablement incomplet. (th sans tr, tr sans table, colspan absent ,..).

Première réaction, flex et pseudos en flex-grow:1; peuvent aider . L'image en arrière plan et background-size peuvent finalisé l’ébauche d'une première idée.

exemple possible avec des span en flex (=> si tableau et th , alors span plutot que hx pour envelopper le titre en flex): et ton image.
CSS :

th span {
  display: flex;
}
th span::before,
th span::after {
  content: "";
  flex-grow: 1;
  background: url(https://forum.alsacreations.com/upload/1591815393-80183-bordure-note.png)
    no-repeat center center;
  background-size: 100%;
  margin: 0 0.25em;
}

et le HTML compléter :

<table>
  <tr>
    <th colspan=2> <span>titre 1</span></th>
  </tr>
  <tr>
    <td> description 1</td>
    <td> prix 1 </td>
  </tr>
  <tr>
    <th colspan=2> <span>titre 2</span></th>
  </tr>
  <tr>
    <td> description 2</td>
    <td> prix 2 </td>
  </tr>
  <tr>
    <th colspan=2> <span>titre 3</span></th>
  </tr>
  <tr>
    <td> description 3</td>
    <td> prix 3 </td>
  </tr>
</table>

Si tu veut attribué des images differentess selon les tableau ou titre, tu peut ajouter une class sur table ou th et ensuite remettre un selecteur pour les pseudo avec cette class

<table class="maClass-1"><tr><span>titre dans autre tableau</span><th> ...

table.maClass-1 th span::before 

ou si les titre sont dans le même tableau

<table><tr><th  class="maClass-1"><span> titre</span></th><span>
....
<th  class="maClass-2"><span>autre titre</span></th>

 th.maClass-1 span::before {background...}
 th.maClass-2 span::before {background ...}

seconde réaction , tiens un tableau, pourquoi pas ?

Cdt
Modifié par gcyrillus (11 Jun 2020 - 16:31)

Salut,
Merci pour ta réponse, oui en effet le code présenté n'est pas du tout fini, ce n'est qu'un exemple pour mettre en contexte mon problème, il n'a pas vocation à être réaliste ou fonctionnel.
Mon problème n'est pas au niveau du tableau en lui-même mais plus au niveau de l'image.
Ta manière de voir la structure du tableau est intéressante, mais je suis désolé ce n'est pas ma question.
Je souhaite avoir un début d'idée sur comment faire un trait en css, sans utiliser d'image svg/png.
<== Cette image n'était qu'un exemple pour illustré mon propos sur le résultat voulu en css.
Encore merci d'avoir pris le temps de me répondre, mais je suis vraiment désolé mais ta solution ne porte pas sur le bon problème.

ps : petite précision, ici le trait est noir, mais dans les différents tableaux, ce trait changera de couleur la forme elle sera relativement identique, mais avec une couleur différente.
Modifié par siphelis (11 Jun 2020 - 17:40)

Si il s'agit d'un simple trait droit, alors un border se suffit.

Ce qu'il fallait juste retenir était juste la boite flex et les pseudos pour placer un conteneur de part et d'autre du texte, le reste c'était pour avoir un morceau de code correct.

Voici un autre post avec la même méthode https://forum.alsacreations.com/topic-4-80459-1-Texte-entre-deux-traits--affiner-les-reglages.html#p523358 Sinon : il y aussi eu : https://goetter.tumblr.com/post/36084887039/tes-pas-cap-premi%C3%A8re-%C3%A9dition
;)
Modifié par gcyrillus (11 Jun 2020 - 20:54)