Tabulation multi-colonnes

Version imprimable

25/07/2023, 12h25
cst44

Tabulation multi-colonnes
Bonjour,

Plusieurs vieux posts en parlent, mais je vois plein de réponse avec margin, padding, ...

mais cela ne répond pas à la tabulation multi-colonnes, uniquement à la tabulation du 1er caractère de la ligne.

Je ne comprends pas pourquoi personne ne propose l'utilisation de <table border=0> !?!
On va me dire que c'est hasBeen et pas joli, mais je ne vois pas de meilleur moyen de faire.

Merci de vos remarques constructives sur cette proposition.
25/07/2023, 16h05
NoSmoking

Bonjour,

Citation:

mais cela ne répond pas à la tabulation multi-colonnes, uniquement à la tabulation du 1er caractère de la ligne.

Il serait bon que tu précises ta pensée et le rendu que tu souhaites.

Citation:

On va me dire que c'est hasBeen et pas joli, mais je ne vois pas de meilleur moyen de faire.

Les éléments <table> ne sont pas fait pour faire de la mise en forme mais pour structurer/afficher des données tabulaire, d'autres méthodes de présentation existent et sont plus pertinentes.
25/07/2023, 19h31
cst44
Je réponds à plusieurs posts où il est demandé comment on peut reproduire le caractère "tabulation".
Pour mémoire ce caractère permet de 'colonner' un paragraphe.
Il m'est difficile de donner un exemple précis puisque déjà les posts concernés ne sont pas très explicites sur leurs objectifs.

Pour ma part, je dois mettre un forme un mail (corps en HTML) récap d'une facture sans faire de fioritures, c'est un récap interne, pas un document client.

Actuellement, à l'arrache, il est mis :
Numéro de facture : 123456
Nom du fournisseur : Tartapion
Montant TTC : 235,25€

Donc, j'ai cherché comment simuler une tabulation pour présenter cela un peu mieux, et là je suis étonné de ne trouver que des padding et autre margin et autre span de longueur X em mais rien de plus pour juste aligner proprement du texte en plusieurs colonnes.

Donc, je propose cette solution puisque <table> est vraiment là pour mettre en forme et avec CSS on peut facilement ajouter des couleurs, indiquer une largeur, ...
Code:

1 2 3 4 5 <table> <tr><td>Numéro de facture : </td><td align=right>123456</td></tr> <tr><td>Nom du fournisseur : </td><td>Tartapion <tr><td>Montant TTC : </td><td align=right> 235,25€</td></tr> </table>

Citation:

Je réponds à plusieurs posts où il est demandé comment on peut reproduire le caractère "tabulation".
Pour mémoire ce caractère permet de 'colonner' un paragraphe.

Il n'existe effectivement pas d'élément <tab>, mais tu peux le créer, c'est un véritable casse tête car il va dépendre de bien trop de choses comme la police utilisée si non monospaces, la valeur que tu vas lui affecter, même si il existe la propriété CSS tab-size, la taille du mot qui le précède pour savoir où le placer sur la ligne...

Tu peux toujours te rabattre sur un élément <pre> qui aurait pour rendu
Code:

1 2 3 4 5 <pre> Numéro de facture : 123456  Nom du fournisseur : Tartapion  Montant TTC : 235,25€  </pre>
... je parlerais plutôt d'alignement plutôt que de tabulation.

En 2023 il existe un moyen simple de « colonner » proprement c'est l'utilisation des FLEX/GRID layout. Cela remplace avantageusement les <table>.

Par exemple :
Code:

1 2 3 4 5 6 <div class="grid-2Col"> <span>Numéro de facture</span><span>123456</span> <span>Nom du fournisseur</span><span>Tartapion</span> <span>Description</span><span>Loisir</span> <span>Montant TTC</span><span>235,25€</span> </div>
associé au CSS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 .grid-2Col { --nbCol: 2; --widthCol: 12em; --gapCol: 1em; --gapRow: .5em; display: grid; grid-template-columns: repeat(auto-fill,calc(var(--widthCol) - var(--gapCol))); grid-gap: var(--gapRow) var(--gapCol); max-width: calc(var(--nbCol) * var(--widthCol)); } span:nth-child(2n+1):after { content: ":"; float: right; }
Le CSS a évolué depuis certains posts et il est effectivement plus facile actuellement de faire de la mise en page sans <table>, même si dans le cas présent on peut tout à fait considérer que l'on est en présence de « données tabulaires ».

oui mais ...

Citation:

Pour ma part, je dois mettre un forme un mail (corps en HTML) récap d'une facture sans faire de fioritures, c'est un récap interne, pas un document client.

Là tu es dans le cas bien particulier des clients de messagerie, toujours en retard côté CSS, et tu as donc raison d'utiliser des <table>.

https://get.foundation/emails.html
https://www.campaignmonitor.com/css/

27/07/2023, 13h05
cst44

J'avoue ne pas voir ce que cela amène d'utiliser une telle méthode.
Faisant partie des dinosaures et n'étant absolument pas pro Html/Css, je n'avancerai pas là-dessus.

Pour l'instant j'y vois une souplesse perdue sur le nombre de colonne, de taille, etc...
Mais je vais regarder plus loin cette solution nettement plus convaincante que ce que j'ai pu lire précédemment.

Merci

PS :
Autre remarque concernant le fonctionnement du site que je ne comprends pas, maintenant que je vais mettre cette discussion résolue, les échanges faits ici n'apparaitront pas sur les post initiaux d'où ma publication a été retirée.
28/07/2023, 10h00
NoSmoking

Citation:

J'avoue ne pas voir ce que cela amène d'utiliser une telle méthode.

Cela amène juste à respecter un peu plus les recommandations concernant l’utilisation des <table>.

The table element :

• https://html.spec.whatwg.org/dev/tab...-table-element
ou
• https://html.spec.whatwg.org/multipa...-table-element

Citation:

Pour l'instant j'y vois une souplesse perdue sur le nombre de colonne, de taille, etc...

Non tu conserves la même souplesse avec encore plus de possibilités quant à la mise en forme, parfaite gestion des média queries notamment.

Citation:

PS :
Autre remarque concernant …

Il n’est généralement pas conseillé de « déterrer » les discussions, datant pour plusieurs de 2006-2008, le CSS ayant bien évolué depuis et le sujet en venant très souvent à ce disperser et ne répondant pas forcément à la problématique.

J’ai néanmoins pris soin de référencer les discussions dont tu parles dans le premier message de cette discussion à toutes fins utiles.