Bonjour,

Je débute vraiment et je recherche une solution (pas trouvé sur le forum ou alors mal cherché).

Je souhaite au sein d'une cellule de tableau à la fois centrer les données et en même temps aligner les nombres par rapport au chiffre des unités (c'est pour une application comptable et ils sont un peu pointilleux).

Si quelqu'un avait une idée pour réaliser ça, je serai presque sorti d'affaire.

Merci pour votre aide.
Modifié par nibor (26 Nov 2009 - 17:19)
Administrateur
Bonjour et bienvenue, Smiley smile

non pas moyen d'aligner sur la virgule/point comme avec un traitement de texte.

Quelques pistes me venant à l'esprit :
- dans l'hypothèse ou tu as toujours 2 chiffres après la virgule (sinon tu complètes avec des espaces insécables   ), tu peux aligner à droite avec une marge en pourcentage.
- une fonte monospace avec des   devant/derrière pour compléter et avoir une longueur fixe en caractères
- au pire du Javascript
Merci pour ces retours très rapides

Je joins un exemple du résultat souhaité en espérant qu'on puisse le réaliser sans javascript.

upload/25301-exemple-al.png
En théorie, c'est prévu depuis longtemps. HTML 4.01 déjà. Le truc c'est que pratiquement aucun navigateur ne le supporte, du moins pas à ma connaissance, aujourd'hui encore. Ce serait pourtant si simple...

Avec le code suivant, les chiffres de la première colonne seraient tous alignés sur le point décimal :

<table>
<colgroup>
<col align="char" char="." width="0*" />
<col ... />
<col ... />
</colgroup>
...
</table>

Alors oui effectivement ce genre d'information ne devrait pas se trouver dans le code HTML. tout à fait d'accord, c'est seulement de la présentation.... mais je crois que rien n'est prévu du tout en CSS3. ON parlait des grands oubliés du HTML ces derniers temps, eh bien en voilà encore un autre.
Quentin j'avais trouvé cette solution mais comme tu le dis si bien le fait qu'elle ne soit pas supportée ne m'incite pas à l'utiliser.

Dommage qu'on ne puisse pas le faire en css plus simplement.
Modérateur
Bonjour,

En trichant un peu, ça pourrait peut-être marcher?


td.numerique {
text-align:right;
width:100px;
padding-right:80px;
border:1px solid #000;
}


Je n'ai pas eu le temps de tester ce code dans tous les navigateurs, mais il y a sans doute moyen d'utiliser ce type d'astuce. À étudier!
Tony,

Je vais tester ta proposition, mais le souci c'est que la largeur des colonnes n'est pas fixe, aussi j'ai peur qu'avec un padding défini, ça ne s'adapte pas.

J'avais essayé aussi une déclaration pour la cellule (texte centré) plus une déclaration à l'intérieur de la cellule (aligné à droite). Mais ça ne se cumule pas.

exemple :

/*CELLULES*/
td{
background: #FFFFFF;
color: #333333;
text-align: center;
border: 1px solid #D7D7D7;
}
/*CONTENU CELLULE ALIGNEMENT DROITE*/
#dataalign{
text-align: right;
}

**********************************************


<td><span id="dataalign">128</span></td>
@TONY

Je viens d'essayer ton astuce et cela fonctionne parfaitement

MERCI pour votre rapidité et le temps consacré