Ecrire au bord d'une cellule

Invité · 18/06/2012, 16h09

Bonjour,

J'ai une cellule

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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.

**Torgar** · 18/06/2012, 16h26

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

**Meloooo** · 18/06/2012, 16h26

Salut,
Si j'ai bien compris, il te suffit de faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<td class="ma-cellule">Blalalalalala</td>

et en CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.ma-cellule {
text-align:right;
}

EDIT : en faite je crois que je suis à côté de la plaque...

Invité · 18/06/2012, 16h31

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 :

**Muchos** · 18/06/2012, 17h09

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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).

**Torgar** · 18/06/2012, 17h21

Envoyé par Darreugne

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

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

**NoSmoking** · 18/06/2012, 18h44

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Ecrire au bord d'une cellule

HTML

Vue hybride

Discussions similaires

Partager

Partager