Lundi 23 décembre 2024
- Côté Cours -
- Côté Jardin -
- Signets -
» Blogarithme |
» Blog & Blues |
» CYBERcodeur |
» IT Trends Blog |
» Karl |
» MorgAZilla |
» Pascal |
» Standblog |
» Tara |
Ce site sera plus agréable avec un navigateur supportant les standards du web, mais il est quand même accessible par tous les navigateurs.
Amis de PHP débutants, bonjour...
J'espère que vous venez ici grâce à un navigateur récent pour bien profiter du spectacle, sinon, je ne saurais trop vous conseiller d'aller en télécharger un.
Sans faire de pub ;-), Opéra 5.11 ne fait qu'un peu plus de 2Mo à télécharger (dans sa version sans Java) et est un régal pour le respect des standards CSS dont nous avons besoin pour la question du jour :
Comment faire un tableau à traits fins, et mieux, comment faire un tableau à traits fins... sans tableau !?
Réponse : grâce aux styles, démonstration :
Insérez ce code entre les balises <head></head> de votre page: (attention au copié-collé, les < et > sont ici en caractères spéciaux pour ne pas être interprétés en html !!)
<style type="text/css">
<!--
table {border-style:solid; border-width:1px; border-color:black;}
td { border-style:solid; border-width:1px; border-color:red; }
-->
</style>
Ensuite, le tableau :
<table border="0" width="50%" align="center">
<tr>
<td width="50%"><p>Oh qu'il est beau !</p></td>
<td width="50%"><p>Ce jouli tableau à traits fins !!</p></td>
</tr>
</table>
Oh qu'il est beau ! |
Ce jouli tableau à traits fins !! |
J'en vois d'ici qui disent : "oui, mais je n'en veut pas du trait noir du tour !! ... et puis d'abord, je veux ma cellule de gauche bordée de noir et avec un fond gris, et celle de droite bordée de bleu."
Pas de problèmes !
Oh la belle cellule grise ! |
Oh la belle bleue !! |
Et voilà les sources :
<style type="text/css">
<!--
.grise {border-style:solid; border-width:1px; border-color:black;
background-color:silver; }
.blue {border-style:solid; border-width:1px; border-color:blue;}
.none {border-style:none;}
-->
</style>
<table border="0" width="50%" align="center" class="none">
<tr>
<td width="50%" class="grise"><p>Oh la belle cellule grise !</p></td>
<td width="50%" class="blue"><p>Oh la belle bleue !!</p></td>
</tr>
</table>
Vous remarquerez que les styles ".grise" et ".blue" sont appelés dans les cellules du tableau par la syntaxe class="grise" et class="blue". Avec ce système, les combinaisons sont infinies...
Le style des bordures peut-être "solid" comme dans cet exemple, mais aussi en relief grâce à "outset" ou "inset", en pointillé "dashed"...
On peut aussi avoir les 4 côtés différents puisque chaque bord peut être détaillé : border-style-left, border-color-right, border-width-top etc.
Possibilités infinies je vous dis !
Et pour faire tout cela sans tableaux ? Regardez bien cette page, elle semble être faite avec un tableau de 2 colonnes n'est-ce pas ? Et bien non !! Vous pouvez aller voir le source, vous n'en verrez trace. De même, vous pouvez aller visiter les sites de mes amis Karl et Tara, sites eux aussi "Table-less". Celui de Tara, décidément très douée, est même à 3 colonnes.
L'exercice est certes un peu plus périlleux, surtout si l'on veut que Netscape 4.x interprète correctement les choses (ce qui n'est pas le cas ici, par fainéantise...) mais c'est possible : la preuve.
Reprenons les styles précédents, et rajoutons quelques critères de largeur, d'espacement, et surtout l'attribut "float"
<style type="text/css">
<!--
.grise
{border-style:solid;
border-width:1px;
border-color:black;
background-color:silver;
width:200px;
padding:10px;
height:250px;
float:left; }
.blue {border-style:solid;
border-width:1px;
border-color:blue;
margin-left:225px;
padding:10px;
height:250px; }
-->
</style>
Maintenant, il faut faire mumuse avec les balise <div></div>. Pour voir ce que cela donne, c'est par ici
Addentum du 3/04/02 :
Au lieu de faire des cadres flottants, on peu aussi faire des cadres positionnés de façon fixe dans la page. Cette méthode sera d'ailleurs à privilégier pour NS 6.x qui a quelques problèmes pour comprendre correctement l'attribut "float", du moins lorsqu'il est associé à des scripts php... et surtout ne me demandez pas pourquoi, je n'en sais strictement rien !
On prend les mêmes et on recommence..;
"float" disparait de .grise au profit de "top" ; et on rajoute "position:absolute; left:240px; top:65px" dans .blue :
A noter que les positions "top" sont relatives au bord supérieur du navigateur, ces mesures sont donc à adapter à l'encombrement de la page au au-dessus des boites
<style type="text/css">
<!--
.grise
{border-style:solid;
border-width:1px;
border-color:black;
background-color:silver;
width:200px;
padding:10px;
height:250px;
top:50px}
.blue {border-style:solid;
border-width:1px;
border-color:blue;
margin-left:225px;
padding:10px;
height:250px;
position:absolute;
left: 240px;
top:65px }
-->
</style>
Les résultats de cette méthode sont légèrement différents selon les navigateurs, mais cela donne quand même de bons résultats >> VOIR
| Index | Archives | « Juin | Août » |