Mise en page tabulaire fixe sur la page Web

Question

Je voudrais présenter les étapes intermédiaires d'une division de la méthode stylo et papier sur une page Web. Le résultat devrait être "écrit" sur papier quadrillé/papier quadrillé.

• Je pourrais utiliser une table, mais WCAG dit que ce n'est pas le cas.
• Je pourrais utiliser une police de largeur fixe et <pre>, mais que faire si je n'aime pas les polices de largeur fixe?

Cette image explique mieux: http://upload.wikimedia.org/wikipedia/commons/4/40/Division_Schriftlich.jpg

linage verticale est importante.

Answer 1

Voici un exemple utilisant divs. Et la taille du type de texte fonctionnera avec ceci. Veuillez noter que vous devez lire les colonnes verticalement pour ajouter du texte.

HTML

<div class="col">1<br>1<br></div> 
<div class="col">3<br>2<br>1<br>1</div> 
<div class="col">0<br>0<br>0<br>0</div> 
<div class="col">7<br><br>7<br>5<br>2<br>1</div> 
<div class="col"><br><br><br><br>0<br>5</div> 
<div class="col"><br></div> 

CSS

.col { 
    border: 1px solid black; 
    display: inline-block; 
    float: left; 
} 

exemple avec des bordures (pour montrer l'alignement vertical) here

Exemple sans frontières here

Un procédé utilisant des espaces non sécables, par exemple:

1307<br> 
120<br> 
&nbsp;107<br> 
&nbsp;105<br> 

ne s'alignera pas correctement. Par conséquent, en rejetant l'alignement horizontal, je pense que l'alignement vertical est la meilleure option.

Voici un example avec la mise en page améliorée