Ecrire au bord d'une cellule

Version imprimable

18/06/2012, 16h09
Invité

Ecrire au bord d'une cellule

Bonjour,

J'ai une cellule

Code:

<td>Blalalalalala</td>

qui est en forme de rectangle.

Je souhaite écrire verticalement au bord du coté droit.

Cela est-il possible en HTML ou sinon en JS ?

Merci d'avance.

Salut,

Tu veux écrire verticalment dans le genre : pivoter les caractères d'un quart de tour ?
Ou que les lettres soient placées l'un dessous l'autre ?

Dans le deuxième cas un truc comme ça en javascript devrait fonctionner :
Code:

1 2 3 4 5 6 7 8 9 10 function vText(str, to) { var nbChar = str.length; // Compte le nombre de caractère de la chaîne var oStr = ''; // Initialise la variable de sortie // On parcours la chaîne de caractère pour ajouter un retour à la ligne après le caractère i for (i = 0; i < nbChar; i++) { oStr += str[i] + '<br \/>'; } document.getElementById(to).innerHTML = oStr; }

18/06/2012, 16h26
Meloooo
Salut,
Si j'ai bien compris, il te suffit de faire :
Code:

1 2 <td class="ma-cellule">Blalalalalala</td>
et en CSS :
Code:

1 2 3 4 .ma-cellule { text-align:right; }
EDIT : en faite je crois que je suis à côté de la plaque... :P
18/06/2012, 16h31
Invité

Hmmm, merci je vais tester les deux solutions, je vous tiens au courant.

EDIT :

-J'ai testé les deux, celle de Meloooo n'est pas bonne car créer un deuxième TD décale tout mon tableau :'(
Celle de Torgar, je n'arrive pas à l'utiliser

Screen modifié avec paint de ce que je voudrais faire :
http://upload.basic-casio.com/upload/screen.bmp

"alachinoise" dans une div pour adaptation à toute taille de td

En pur html/css, la solution de Torgar donnerait ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>test tableau</title>
 
	<style type="text/css">
th, td {width: 25%; border: thin solid black;}
.align-droit {text-align: right;}
.alachinoise {padding-left: 90%; text-align: center;}
        </style>
</head>
 
<body>
	<table>
		<tr>
			<th>Les forumeurs de developpez.net ont des idées bizarres.</th>
			<td>Du texte sans forme définie.</td>
			<td class="align-droit">Du texte aligné à droite.</td>
			<td><div class="alachinoise">D<br />u<br /> <br />t<br />e<br />x<br />t<br />e<br /> <br />à<br /> <br />l<br />a<br /> <br />c<br />h<br />i<br />n<br />o<br />i<br />s<br />e</div></td>
		</tr>
	</table>
</body>
</html>

Alors, non seulement c'est très long à coder… et donc le JS de Torgar nous sauve; mais surtout ça n'est pas correcte sémantiquement (un lecteur d'écran lit les lettres séparément).

18/06/2012, 17h21
Torgar

Citation:

Envoyé par Darreugne

Celle de Torgar, je n'arrive pas à l'utiliser

Qu'as-tu fait exactement ? On peut voir ?

Bonjour,
on peut également utiliser l'attribut dir mis à rtl.

Pour la partie javascript un simple split('').join('<br>') permet de modifier la chaîne
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE HTML> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>A droite toute</title> </head> <body> <div dir="rtl"> <script type="text/javascript"> var str="Blalalalalala"; str = str.split('').join('<br>'); document.write( str); </script> </div> </body> </html>
PS: je sais document.write c'est le mal :aie: