18073 sujets

Questions générales et questions de débutants

Insérer un très grand tableau

Bonjour
Bien que je bricole le html et le css (merci le forum), j'ai un collègue qui me pose une question à laquelle je ne sais quoi répondre.
En effet, je l'aide à fabriquer son code (html+css) et jusqu'ici ça va car j'arrive à faire ce qu'il demande mais hier il m'a posé la question suivante : Est il possible d'insérer un tableau (pour des données tabulaires) comprenant 3500 lignes. Smiley eek
Voilà le truc ????
Insérer un tableau pas de problème mais d'une taille aussi grande. Est ce possible ? la page va peser un poids énorme, non ? ne vaut il pas mieux passer par du php ou mysql (que je ne connais hélas pas du tout) ou autre chose.
Enfin bref, la question est : Est ce possible et surtout utilisable. ?
Merci
Possible, oui...
Effectivement, la page risque d'être assez grande...

D'ailleurs, tiens, je me sens en forme pour le tenter...

on va faire 1300 lignes et deux colonnes.

j'vais faire ça et j'reviens. Smiley ravi Smiley murf

edit: J'ai reviendu !

Bon voici un tableau (relativement léger) à 1301 lignes et 2 colonnes.

Poids de la page : 101ko.

Le code prends 5244 lignes, classé par soucis de clarté à plus ou moins une balise par ligne.

Mais elle reste malgré tout fort dépouillée, c'est juste un tableau simple...

Faut voir ce que tu cherches.

Mais 101ko, c'est déjà trop pour une page web, sauf si c'est pour un intranet.
Modifié par Lisarael (04 Jun 2005 - 11:02)
étonnant...

j'avais repris un canevas où ils étaients, et j'ai ajouté une boucle php, puis ai sauvegardé la page résultante depuis mon navigateur...

serait-ce cette dernière manipulation qui a enlevé les slash de fermetures ? (qui y était sur l'original, je viens de vérifier)

bon, je vais corriger ces imperfections.
Bonjour,

Mais 101ko, c'est déjà trop pour une page web, sauf si c'est pour un intranet.


Ca ne veux pas dire grand chose ça... Si il est important d'essayer de limiter le poids d'une page, l'inverse (multiplication de pages) est encore pire.

Tout dépends du contexte et du but.

Quand à afficher 3500 lignes de tableau il n'y à aucun problème, la seule question importante est de savoir si c'est opportun.

jp
Bonsoir
Excusez moi si je n'ai pas répondu avant mais un imprévu m'a fait faire un aller-retour sur Marseille.
Merci pour vos réponses. En fait, j'avais peur d'avoir posé une question de fou mais bon je vois que la chose est faisable. Et 1300 lignes pour 101 ko, je pensais que ce serait beaucoup plus lourd.
Mais pour faire la saisie;, là par contre ça risque de ne pas être triste.
D'après ce que je sais, il s'agit d'une sorte de dictionnaire avec à gauche le mot en Français et à droite la traduction. Ce document est sous Word et il essaye de le passer sous Excel (mais il n'y a aucun séparateur entre les mots traduits).
A supposer qu'il arrive à mettre tout ça dans un tableau Excel, y a t il un moyen d' importer les données dans un tableau en html, php ou autre. En effet qnand je vois le tableau fait par Lisarael (merci pour ton exemple très parlant), je me demande si cela est possible mais ignore totalement comment faire.
Encore merci pour vos commentaires.
avec dreamweaver, je sais qu'il y a moyen d'importer un document excel ou word en html...

mais n'ayant jamais essayé, je ne saurais te dire ce que ça va donner...
pastazere a écrit :
Bonjour
Bien que je bricole le html et le css (merci le forum), j'ai un collègue qui me pose une question à laquelle je ne sais quoi répondre.
En effet, je l'aide à fabriquer son code (html+css) et jusqu'ici ça va car j'arrive à faire ce qu'il demande mais hier il m'a posé la question suivante : Est il possible d'insérer un tableau (pour des données tabulaires) comprenant 3500 lignes. Smiley eek
Voilà le truc ????
Insérer un tableau pas de problème mais d'une taille aussi grande. Est ce possible ? la page va peser un poids énorme, non ? ne vaut il pas mieux passer par du php ou mysql (que je ne connais hélas pas du tout) ou autre chose.
Enfin bref, la question est : Est ce possible et surtout utilisable. ?
Merci

Bonjour
Comme ce forum m'apporte énormément, j'apporte un peu ma contribution
j'ai construit ceci avec une autre approche, j'espère que c'est potable,car j'ai pas peaufiné.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-BE" lang="fr-BE">
<head>
<title>tableau !</title>
<link rel="stylesheet" type="text/css" href="1300table_fichiers/styles.css" media="screen" />
</head>
<body>
<div class="col">
 <h1>Tableau</h1>
<ul>
<li>
<p class="ligne">N° de ligne</p>
<p>Contenu</p>
</li>
<li>
<p class="ligne">N°1&nbsp;</p>
<p>Ceci est la 1<sup>ère</sup> ligne...</p>
</li>
<li>
<p class="ligne">N°2&nbsp;</p>
<p>Ceci est la 2<sup>ème</sup> ligne...</p>
</li>
<li>
<p class="ligne">N°3&nbsp;</p>
<p>Ceci est la 3<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°4&nbsp;</p>
<p>Ceci est la 4<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°5</p>
<p>Ceci est la 5<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°6</p>
<p>Ceci est la 6<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°7</p>
<p>Ceci est la 7<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°8</p>
<p>Ceci est la 8<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°9</p>
<p>Ceci est la 9<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°10</p>
<p>Ceci est la 10<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°11</p>
<p>Ceci est la 11<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°12</p>
<p>Ceci est la 12<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°13</p>
<p>Ceci est la 13<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°14</p>
<p>Ceci est la 14<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°15</p>
<p>Ceci est la 15<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°16</p>
<p>Ceci est la 16<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°17</p>
<p>Ceci est la 17<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°18</p>
<p>Ceci est la 18<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°19</p>
<p>Ceci est la 19<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°20</p>
<p>Ceci est la 20<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°21</p>
<p>Ceci est la 21<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°22</p>
<p>Ceci est la 22<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°23</p>
<p>Ceci est la 23<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°24</p>
<p>Ceci est la 24<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°25</p>
<p>Ceci est la 25<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°26</p>
<p>Ceci est la 26<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°27</p>
<p>Ceci est la 27<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°28</p>
<p>Ceci est la 28<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°29</p>
<p>Ceci est la 29<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°30</p>
<p>Ceci est la 30<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°31</p>
<p>Ceci est la 31<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°32</p>
<p>Ceci est la 32<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°33</p>
<p>Ceci est la 33<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°34</p>
<p>Ceci est la 34<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°35</p>
<p>Ceci est la 35<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°36</p>
<p>Ceci est la 36<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°37</p>
<p>Ceci est la 37<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°38</p>
<p>Ceci est la 38<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°39</p>
<p>Ceci est la 39<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°40</p>
<p>Ceci est la 40<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°41</p>
<p>Ceci est la 41<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°42</p>
<p>Ceci est la 42<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°43</p>
<p>Ceci est la 43<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°44</p>
<p>Ceci est la 44<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°45</p>
<p>Ceci est la 45<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°46</p>
<p>Ceci est la 46<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°47</p>
<p>Ceci est la 47<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°48</p>
<p>Ceci est la 48<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°49</p>
<p>Ceci est la 49<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°50</p>
<p>Ceci est la 50<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°51</p>
<p>Ceci est la 51<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°52</p>
<p>Ceci est la 52<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°53</p>
<p>Ceci est la 53<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°54</p>
<p>Ceci est la 54<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°55</p>
<p>Ceci est la 55<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°56</p>
<p>Ceci est la 56<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°57</p>
<p>Ceci est la 57<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°58</p>
<p>Ceci est la 58<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°59</p>
<p>Ceci est la 59<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°60</p>
<p>Ceci est la 60<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°61</p>
<p>Ceci est la 61<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°62</p>
<p>Ceci est la 62<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°63</p>
<p>Ceci est la 63<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°64</p>
<p>Ceci est la 64<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°65</p>
<p>Ceci est la 65<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°66</p>
<p>Ceci est la 66<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°67</p>
<p>Ceci est la 67<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°68</p>
<p>Ceci est la 68<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°69</p>
<p>Ceci est la 69<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°70</p>
<p>Ceci est la 70<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°71</p>
<p>Ceci est la 71<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°72</p>
<p>Ceci est la 72<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°73</p>
<p>Ceci est la 73<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°74</p>
<p>Ceci est la 74<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°75</p>
<p>Ceci est la 75<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°76</p>
<p>Ceci est la 76<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°77</p>
<p>Ceci est la 77<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°78</p>
<p>Ceci est la 78<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°79</p>
<p>Ceci est la 79<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°80</p>
<p>Ceci est la 80<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°81</p>
<p>Ceci est la 81<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°82</p>
<p>Ceci est la 82<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°83</p>
<p>Ceci est la 83<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°84</p>
<p>Ceci est la 84<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°85</p>
<p>Ceci est la 85<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°86</p>
<p>Ceci est la 86<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°87</p>
<p>Ceci est la 87<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°88</p>
<p>Ceci est la 88<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°89</p>
<p>Ceci est la 89<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°90</p>
<p>Ceci est la 90<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°91</p>
<p>Ceci est la 91<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°92</p>
<p>Ceci est la 92<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°93</p>
<p>Ceci est la 93<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°94</p>
<p>Ceci est la 94<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°95</p>
<p>Ceci est la 95<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°96</p>
<p>Ceci est la 96<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°97</p>
<p>Ceci est la 97<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°98</p>
<p>Ceci est la 98<sup>ème</sup> ligne...</p>
</li>
<li>
<p>N°99</p>
<p>Ceci est la 99<sup>ème</sup> ligne...</p>
</li>
</ul>
</div>
</body>
</html>

le css
body {
	font-family: Verdana, Arial, sans-serif;
	color: black;
	font-size: 1em;
	position: relative;
	}


h1 {
	width: auto;
	text-align: center;
	color: red;
	font-size: 1em;
	}

p{
	text-align: justify;
	float: left;
	border:1px solid #000000;
	margin-right: 10px;
	width: 300px;
	margin-top: 2px;
	margin-bottom: 2px;
	background-color: #FFFFCC;
}
.ligne{
	width: 100px;
	background-color: #CCCCCC;
}
li{
	clear: both;
	list-style-type: none;
	width: 100%;	
}	

ul li {
	margin-bottom: 10px;
	list-style-type: none;
	}

.col {
	margin-left:auto;
	margin-right:auto;
	border:1px solid #CCCCCC
	
}

Smiley ohwell
en PHP y'a moyen d'activer la négociation de compression GZIP sur ton script .php, ainsi ton 101 Ko va passer à disont... 15-20 Ko Smiley langue
Michel, bien que ton idée n'est pas mauvaise, c'est complètement "anti-sémantique" d'utiliser une liste pour mettre en forme des données tabulaires...

C'est comme utiliser une mitrailleuse pour tuer un moustique tout en ayant une tapette à mouche qui dépasse de sa poche... (waou, la métaphore... Smiley murf )
anthony a écrit :
en PHP y'a moyen d'activer la négociation de compression GZIP sur ton script .php, ainsi ton 101 Ko va passer à disont... 15-20 Ko Smiley langue


oui, si comme moi le tableau est autogénéré par une boucle. mais si c'est pour un tableau ponctuel, figé ?

-------------------
Par contre, pastazere, si c'est pour un lexique, pourquoi ne pas le faire en plusieurs pages, par ordre alphabétique ?
En admettant que les mots soient plus ou moins bien répartis, ça fait (1300/26) = 50 mots par page, ce qui est bien plus raisonable...

Non ?
Lisarael a écrit :
oui, si comme moi le tableau est autogénéré par une boucle. mais si c'est pour un tableau ponctuel, figé ?

ben tu crée un fichier .php que tu mets au tout début :
<?
  ob_start ( "ob_gzhandler" ) ;
?>

et après tu met CE QUE TU VEUX Smiley smile
tu peux même mettre un tableau de 999999999999 lignes si tu en envis, ça le compresse quand même, ce n'est pas réservé qu'au script php en boucle...
Modifié par anthony (05 Jun 2005 - 16:49)
Bonjour,
Pour un lexique, on peu faire quelque chose dans ce gout là :
<dl>
<dt>abeille</dt>
<dd>abelha</dd>
<dt>aboyer</dt>
<dd>lairar ; jaupar</dd>
...
<dt>zéro</dt>
<dd>zèro</dd>
<dt>zoo</dt>
<dd>zoò</dd>
</dl>
Voir un exemple ici.
Bonjour à tous

anthony a écrit :
en PHP y'a moyen d'activer la négociation de compression GZIP sur ton script .php, ainsi ton 101 Ko va passer à disont... 15-20 Ko Smiley langue

Alors là c'est sûr que ça serait très très intéressant mais le php comme je le dis plus haut , j'y suis pas encore et le collègue malheureusement non plus Smiley decu .

a écrit :
Par contre, pastazere, si c'est pour un lexique, pourquoi ne pas le faire en plusieurs pages, par ordre alphabétique ?
En admettant que les mots soient plus ou moins bien répartis, ça fait (1300/26) = 50 mots par page, ce qui est bien plus raisonable...

Beh d'accord mais plus haut jpv a dit
a écrit :
Si il est important d'essayer de limiter le poids d'une page, l'inverse (multiplication de pages) est encore pire.


a écrit :
C'est comme utiliser une mitrailleuse pour tuer un moustique tout en ayant une tapette à mouche qui dépasse de sa poche...

Smiley lol

Mais je reviens à ce que dit anthony. Si pour 1300 lignes ça tourne autour de 20 ko donc pour les 3500 ça ferait du + ou - 54 ko.
Franchement j'ai de la peine à y croire tellement au départ je pensais que la chose était impossible surtout par le poids que cela allait générer.
Va falloir que je prévienne le collègue de ces possibilités.

Merci à tous pour vos interventions
Lisarael a écrit :
Michel, bien que ton idée n'est pas mauvaise, c'est complètement "anti-sémantique" d'utiliser une liste pour mettre en forme des données tabulaires...

C'est comme utiliser une mitrailleuse pour tuer un moustique tout en ayant une tapette à mouche qui dépasse de sa poche... (waou, la métaphore... Smiley murf )

Est ce qu e là jai une chance de tuer quelques moustiques ? Smiley ohwell 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-BE" lang="fr-BE">
<head>
<title>tableau !</title>
<link rel="stylesheet" type="text/css" href="1300table_fichiers/styles.css" media="screen" />
</head>
<body>
<div class="col">
 <h1>Tableau</h1>
<ul>
<li>
<div class="ligne">
N° de ligne</div>
<div>Contenu</div>
</li>
<li>
<div class="ligne">
N°1&nbsp;</div>
<div>Ceci est la 1<sup>ère</sup> ligne...</div>
</li>
<li>
<div class="ligne">
N°2&nbsp;</div>
<div>Ceci est la 2<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">
N°3&nbsp;</div>
<div>Ceci est la 3<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°4&nbsp;</div>
<div>Ceci est la 4<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°5</div>
<div>Ceci est la 5<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°6</div>
<div>Ceci est la 6<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°7</div>
<div>Ceci est la 7<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°8</div>
<div>Ceci est la 8<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°9</div>
<div>Ceci est la 9<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°10</div>
<div>Ceci est la 10<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°11</div>
<div>Ceci est la 11<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°12</div>
<div>Ceci est la 12<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°13</div>
<div>Ceci est la 13<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°14</div>
<div>Ceci est la 14<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°15</div>
<div>Ceci est la 15<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°16</div>
<div>Ceci est la 16<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°17</div>
<div>Ceci est la 17<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°18</div>
<div>Ceci est la 18<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°19</div>
<div>Ceci est la 19<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°20</div>
<div>Ceci est la 20<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°21</div>
<div>Ceci est la 21<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°22</div>
<div>Ceci est la 22<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°23</div>
<div>Ceci est la 23<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°24</div>
<div>Ceci est la 24<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°25</div>
<div>Ceci est la 25<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°26</div>
<div>Ceci est la 26<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°27</div>
<div>Ceci est la 27<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°28</div>
<div>Ceci est la 28<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°29</div>
<div>Ceci est la 29<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°30</div>
<div>Ceci est la 30<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°31</div>
<div>Ceci est la 31<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°32</div>
<div>Ceci est la 32<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°33</div>
<div>Ceci est la 33<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°34</div>
<div>Ceci est la 34<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°35</div>
<div>Ceci est la 35<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°36</div>
<div>Ceci est la 36<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°37</div>
<div>Ceci est la 37<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°38</div>
<div>Ceci est la 38<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°39</div>
<div>Ceci est la 39<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°40</div>
<div>Ceci est la 40<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°41</div>
<div>Ceci est la 41<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°42</div>
<div>Ceci est la 42<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°43</div>
<div>Ceci est la 43<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°44</div>
<div>Ceci est la 44<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°45</div>
<div>Ceci est la 45<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°46</div>
<div>Ceci est la 46<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°47</div>
<div>Ceci est la 47<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°48</div>
<div>Ceci est la 48<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°49</div>
<div>Ceci est la 49<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°50</div>
<div>Ceci est la 50<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°51</div>
<div>Ceci est la 51<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°52</div>
<div>Ceci est la 52<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°53</div>
<div>Ceci est la 53<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°54</div>
<div>Ceci est la 54<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°55</div>
<div>Ceci est la 55<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°56</div>
<div>Ceci est la 56<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°57</div>
<div>Ceci est la 57<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°58</div>
<div>Ceci est la 58<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°59</div>
<div>Ceci est la 59<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°60</div>
<div>Ceci est la 60<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°61</div>
<div>Ceci est la 61<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°62</div>
<div>Ceci est la 62<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°63</div>
<div>Ceci est la 63<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°64</div>
<div>Ceci est la 64<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°65</div>
<div>Ceci est la 65<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°66</div>
<div>Ceci est la 66<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°67</div>
<div>Ceci est la 67<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°68</div>
<div>Ceci est la 68<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°69</div>
<div>Ceci est la 69<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°70</div>
<div>Ceci est la 70<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°71</div>
<div>Ceci est la 71<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°72</div>
<div>Ceci est la 72<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°73</div>
<div>Ceci est la 73<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°74</div>
<div>Ceci est la 74<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°75</div>
<div>Ceci est la 75<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°76</div>
<div>Ceci est la 76<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°77</div>
<div>Ceci est la 77<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°78</div>
<div>Ceci est la 78<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°79</div>
<div>Ceci est la 79<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°80</div>
<div>Ceci est la 80<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°81</div>
<div>Ceci est la 81<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°82</div>
<div>Ceci est la 82<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°83</div>
<div>Ceci est la 83<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°84</div>
<div>Ceci est la 84<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°85</div>
<div>Ceci est la 85<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°86</div>
<div>Ceci est la 86<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°87</div>
<div>Ceci est la 87<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°88</div>
<div>Ceci est la 88<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°89</div>
<div>Ceci est la 89<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°90</div>
<div>Ceci est la 90<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°91</div>
<div>Ceci est la 91<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°92</div>
<div>Ceci est la 92<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°93</div>
<div>Ceci est la 93<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°94</div>
<div>Ceci est la 94<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°95</div>
<div>Ceci est la 95<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°96</div>
<div>Ceci est la 96<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°97</div>
<div>Ceci est la 97<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°98</div>
<div>Ceci est la 98<sup>ème</sup> ligne...</div>
</li>
<li>
<div class="ligne">N°99</div>
<div>Ceci est la 99<sup>ème</sup> ligne...</div>
</li>
</ul>
   </div>
</body>
</html>

css 
body {
	font-family: Verdana, Arial, sans-serif;
	color: black;
	font-size: 1em;
	position: relative;
	}


h1 {
	width: auto;
	text-align: center;
	color: red;
	font-size: 1em;
	}

div{
	text-align: justify;
	float: left;
	border:1px solid #000000;
	margin-right: 10px;
	width: 300px;
	margin-top: 2px;
	margin-bottom: 2px;
	background-color: #FFFFCC;
}
.ligne{
	width: 100px;
	background-color: #CCCCCC;
}
li{
	clear: both;
	list-style-type: none;
	width: 100%;	
}	

ul li {
	margin-bottom: 10px;
	list-style-type: none;
	}

.col {
	margin-left:auto;
	margin-right:auto;
	border:1px solid #CCCCCC;
	width: 100%;
	height: 100%;	
}
.Tab{
	width: 100%;
}
Sujet clos
Aller à