Pseudo Mot de passe
fleche Inscription
fleche Mot de passe oublié ?
Informations Générales
Chargement en cours...
Nombre de Visites fleche [ 1 036 256 ]
Votre IP fleche [ 38.107.191.116 ]
Vous êtes ici : Home Page Cours HTML Les tableaux 2
Imprimer le document Version Imprimable

Informations Générales

[425] Posts sur le forum
[453] Membres inscrits
Il y a en ligne :
arrow 0 Membre
arrow 2 Invités
fled Membre en ligne:
Aucun

Partenariat

Partenariat Vous pouvez aider ce site à évoluer, en contribuant à son développement. Proposez vos idées de cours et/ou dossiers.
Rendez-vous dans « Partenariat » pour en savoir plus.

Publicité


Prestataire

N°1 de l'hébergement, location de serveurs, nom de domaines et téléphonie.
(OVH est recommandé par Webelix.net)

www.

Nos Partenaires

Alsacreations
Dreamseed
L'éditeur JavaScript
DicoDuNet
Noogle
Tutopla.net
Page précédente | Page suivante

Les tableaux (page2) : Methodes

Bordures fines

Quel que soit le navigateur utilisé, on peut créer des tableaux avec des bordures fines en utilisant les attributs BORDER="1" (ombrage bordure) et CELLSPACING="0" (largeur bordure).

Par exemple le code suivant :
<table border="1" cellspacing="0" cellpadding="10" align="center">
<tr>
  <td>Bonjour</td><td>tous le monde !</td>
</tr>
</table>
donne :
Bonjourtous le monde !

Couleur des bordures

Pour IE ≥ 3.0 et Mozilla ≥ 1.0 (mais hélas pas pour Netscape < 6), l'attribut BGCOLOR=... affecte non seulement la couleur de fond des cellules mais aussi la couleur des bordures. On peut ainsi par exemple définir un tableau ayant une bordure fine (de 1 pixel) rouge par le code suivant :

Par exemple le code suivant :
<table border="0" cellspacing="1" cellpadding="10" bgcolor="red" align="center">
<tr bgcolor="white">
  <td>Bonjour</td><td>tous le monde !</td>
</tr>
</table>
donne :
Bonjourtous le monde !

Cependant pour faire les choses tout-à-fait proprement, ce qui n'est possible qu'avec des navigateurs supportant complètement les feuilles de style, il faudrait plutôt utiliser les propriétés CSS :

border-color: couleur; border-style: solid; border-collapse: collapse;

associées aux règles TABLE, TR, TH ou TD (voir ci-dessous).

Usage de propriétés CSS

  Exemples Solution
1 Le tableau ci-dessous s'affichera avec une bordure relief habituelle de 1 pixel dans les navigateurs Web ne supportant pas les feuilles de style CSS, et avec une bordure rouge de 1px dans les navigateurs supportant CSS. Les propriétés utilisées (border-collapse, border, etc...) peuvent être appliquées aux règles TABLE, TR, TH ou TD.
blabla blabla blabla bla blabla blabla blabla bla blabla blabla 
<table border="1" cellspacing="0" cellpadding="2" 
style="border-collapse: collapse;border: 1px solid #ff0000;">
<tr bgcolor="white">
<td>
    blabla blabla blabla...
</td>
</tr>
</table>
2 Comme le montre l'exemple ci-dessous, des effets d'encadrement, de couleur, etc... peuvent être obtenus dans de simples paragraphes (donc sans recourir aux tableaux) à l'aide de propriétés de feuilles de style CSS.
Cela ne fonctionne bien évidemment qu'avec les navigateurs de dernière génération (i.e. supportant complètement CSS).

blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla blabla blabla bla blabla. 

<p style="
    margin-left: 30px;
    color: blue;
    text-align: justify;
    background-color: #f5f5ff;
    border-style: solid;
    border-color: #00aaaa;
    border-left-color: #000088;
    border-width: 1px;
    border-left-width: 10px;
    padding: 2px;
    padding-left: 15px;
    ">
  blabla blabla blabla...
</p>
Page précédente | Page suivante
Haut de page