La propriété padding permet de spécifier une marge internet à votre page html. Cette propriété est souvent utilisé pour définir des marges dans des tableaux. On peut définir des 5 types de marges:
Vous pouvez spécifier la valeur de la marge en pixel ou en pourcentage. L'exemple suivant va vous montrer comme réaliser un tableau avec des marges internes et tout cela en css.
Exemple : le code css
|
/* Création du tableau */ #table_avec_padding { border:5px #000000; /* Bordure épaisse et noire de 1 pixel*/ width:80%; /* Largeur du tableau 80% de la fenêtre */ text-align:center; /* On centre le tabeau */ margin:auto; } /* Définition de la ligne */ .ligne { height:120px; /* Hauteur d'une ligne de tableau 120px */ } .cellule1 { background-color:#9900FF; /* Couleur de fond d'une cellule */ font-family:"Comic Sans MS"; /* Police d'écriture d'une cellule */ width:50%; /* Largeur de la cellule */ padding:20px; /* Marge interne de 20 px */ } .cellule2 { background-color:#6600FF; /* Couleur de fond d'une cellule */ font-family:Algerian; /* Police d'écriture d'une cellule */ width:50%; /* Largeur de la cellule */ padding:10px; /* Marge interne de 10 px */ } |
Exemple : le html associé au css
|
<table id="table_avec_padding"> <tr class="ligne"> <td class="cellule1">Webmaster (administrateur de site) : Personne qui supervise un site web. Son adresse électronique est généralement indiquée sur la page d'accueil du site. </td> <td class="cellule2">Web/World Wide Web : La toile d'araignée mondiale. Ensemble des ordinateurs contenant des pages Web. On utilise aussi se mot pour désigner l'ensemble des pages Web accessibles sur l'Internet.</td> </tr> </table> |
Et voici le résultat
| Webmaster (administrateur de site) : Personne qui supervise un site web. Son adresse électronique est généralement indiquée sur la page d'accueil du site. | Web/World Wide Web : La toile d'araignée mondiale. Ensemble des ordinateurs contenant des pages Web. On utilise aussi se mot pour désigner l'ensemble des pages Web accessibles sur l'Internet. |