|
Internautes si vous débutez sur
Internet les astuces suivantes vous aideront peut être ?
Les tableaux sur les pages de votre site Web ?
Si vous arrivez directement sur cette page, avant de commencer cette
section vous devez avoir réalisez la première partie ( créer ma 1er page )
Un tableau avec une ligne de titre sur votre page
Web !
Le langage HTML sert à décrire de façon logique un document. C'est
pourquoi les commandes correspondantes jouent un rôle essentiel. Voici
quelques commandes pour un tableau simple
ICI
Tableau avec quadrillage sur votre page du site Web ?
Afficher le quadrillage de votre tableau
ICI
Tableau avec bordure extérieures et intérieures pour
votre site Web ?
Quadrillage du tableau avec des grandes bordures
ICI
Séparez les cellules de votre tableau pour votre
site ?
Une cellule doit parfois s'étendre sur plusieurs colonnes ou sur plusieurs
ligne ICI
Une cellules sur deux colonnes pour votre tableau ?
Autre exemple une cellule sur deux colonnes
ICI
De la couleur pour votre tableau ?
Une couleur dans tous le tableau ICI
De la couleur pour chaque cellule ?
Définir une couleur pour une cellule
ICI
Un tableau pour une page ?
Voila un tableau si vous souhaitez avoir une mise en page un peu sympa
ICI
|
|
|
|
Code source |
Affichage |
<table>
<tr><td>noir<td>blanc
<tr><td>rouge<td>bleu
</table>
|
|
Les tableaux sont très simples à
créer avec peu de commandes.
Le tableau est entouré par <table>....
contenu...</table> la
commande <tr> (table row -
ligne) défini une nouvelle ligne est chaque cellule est précédée
de <td> (table data contenu
de la cellule). |
|
| Haut de la page |
|
Html
|
Un tableau avec une
ligne de titre !
|
Ref |
|
|
|
Code source |
Code source |
<table>
<tr><th>Ville<th>Population
<tr><td>Grenoble<td>350 000
<tr><td>Poisat<td>10 000
<tr><td>Eybens<td>20 251
</table>
|
| Ville | Population
|
|---|
| Grenoble |
350 000
| | Poisat |
10 000
| | Eybens |
20 251
| |
|
Le positionnement standard d'un
tableau est l'alignement à gauche. La dimension des cellules
s'adapte au texte tapé. Ce tableau comprend une ligne de titre la
commande <td> est remplacée
sur la première ligne par <th>
(table head, entête de tableau). Le contenu de la cellule défini
par <th> est généralement
affiché en gras et centré si les cellules sont assez larges. |
|
| Haut de la page |
|
Html
|
Un tableau avec le
quadrillage !
|
Ref |
|
|
|
Code source |
Affichage |
<table border>
<tr><th>Ville<th>Population
<tr><td>Grenoble<td>350 000
<tr><td>Poisat<td>10 000
<tr><td>Eybens<td>20 251
</table>
|
| Ville | Population
|
|---|
| Grenoble |
350 000
| | Poisat |
10 000
| | Eybens |
20 251
|
|
|
Pour afficher le quadrillage c'est
très simple, il suffit d'ajouter l'attribut border
dans la commande. Il est également possible de définir plus
précisément la bordure du tableau exemple <table border=5>
il aura une bordure plus épaisse. |
|
| Haut de la page |
|
Html
|
Les bordures
intérieures et extérieures de votre tableau !
|
Ref |
|
|
|
Code source |
Affichage |
<table frame=bos rules=all cellspacing=5>
<tr><th>Ville<th>Population
<tr><td>Grenoble<td>350 000
<tr><td>Poisat<td>10 000
<tr><td>Eybens<td>20 251
</table>
|
| Ville | Population
|
|---|
| Grenoble | 350 000
| | Poisat | 10 000
| | Eybens | 20 251
| |
|
Pour un remplissage entre chaque
cellule déterminé en pixels, une légère différence à peine visible
par la commande cellspacing |
|
| Haut de la page |
|
Html
|
Séparer les
cellules de votre tableau !
|
Ref |
|
|
|
Code source |
Affichage |
<table border>
<tr><th colspan=2>Population
<tr><td>Grenoble<td>350 000
<tr><td>Poisat<td>10 000
<tr><td>Eybens<td>20 251
</table>
|
| Population
|
|---|
| Grenoble | 350 000
| | Poisat | 10 000
| | Eybens | 20 251
|
|
|
Parfois une cellule doit s'étendre
sur plusieurs colonnes ou plusieurs lignes voici les commandes
correspondantes <th><td>
avec colspan ou
rowqspan + le nombre de colonnes
columns ou de lignes
rows à fusionner ici la la cellule
comprend 2 colonnes <th colspan=2> |
|
| Haut de la page |
|
Html
|
Une cellule sur 2
colonnes dans votre tableau !
|
Ref |
|
|
|
Code source |
Affichage |
<table border>
<tr><th colspan=2>Population
<tr><td>Grenoble<td>350 000
<tr><td>Poisat<td>10 000
<tr><td>Eybens<td>20 251
<tr><td>Gieres<td rowspan=2>8 251
<tr><td>Brie
</table>
|
| Population
|
|---|
| Grenoble | 350 000
| | Poisat | 10 000
| | Eybens | 20 251
| | Gieres | 8 251
| | Brie
| |
|
Parfois une cellule doit s'étendre
sur plusieurs colonnes ou plusieurs lignes voici les commandes
correspondantes <th><td>
avec colspan ou
rowqspan + le nombre de colonnes
columns ou de lignes
rows à fusionner ici la la cellule
comprend 2 colonnes <th colspan=2> |
|
| Haut de la page |
|
Html
|
De la couleur dans votre tableau !
|
Ref |
|
|
|
Code source |
Affichage |
<table border bgcolor=silver>
<tr><th colspan=2>Population
<tr><td>Grenoble<td>350 000
<tr><td>Poisat<td>10 000
<tr><td>Eybens<td>20 251
<tr><td>Gieres<td rowspan=2>8 251
<tr><td>Brie
</table>
|
| Population
|
|---|
| Grenoble | 350 000
| | Poisat | 10 000
| | Eybens | 20 251
| | Gieres | 8 251
| | Brie
| |
|
Pour la couleur de votre tableau
sont définies de ma même manière que la couleur du papier peint
sous la commande <body> mais
ici avec la commande <table border bgcolor=silver>
le tableau entier va être coloré en gris |
|
| Haut de la page |
|
Html
|
De la couleur dans
les cellules de votre tableau !
|
Ref |
|
|
|
Code source |
Affichage |
<table>
<tr bgcolor=yellow><th colspan=2>Population
<tr><td bgcolor=white>Grenoble<td
bgcolor=aqua>350 000
<tr><td bgcolor=white>Poisat<td
bgcolor=aqua>10 000
<tr><td bgcolor=white>Eybens<td
bgcolor=aqua>20 251
<tr><td bgcolor=white>Gieres<td
bgcolor=aqua rowspan=2>8 251
<tr><td bgcolor=white>Brie
</table>
|
| Population
|
|---|
| Grenoble | 350 000
| | Poisat | 10 000
| | Eybens | 20 251
| | Gieres | 8 251
| | Brie
|
|
|
Passons maintenant à la peinture.
Vous souhaitez en colorier certaines, mais pas d'autres. Démarrons
donc avec une définition de couleur dans une commande de ligne ou
de colonne !. Pour un affichage plus efficace supprimez le
quadrillage comme sur l'exemple du dessus. |
|
| Haut de la page |
|
Html
|
Voila un grand tableau pour
une page !
|
Ref |
|
|
|
Code source |
|
<table border width="80%">
<tr>
<td valign=top>
Grenoble
</td>
<td align=center>
Grenoble<br>
Poisat<br>
Eybens<td>
</td>
</tr>
<tr>
<td colspan=2>
Grenoble
</td>
</tr>
</table>
|
|
Grenoble
|
Grenoble
Poisat
Eybens |
|
Grenoble
|
|
|
Récapitulation et explications
pour ce grand tableau le tag table
permet de débuter un tableau, tr
une ligne et td une cellule.
Les parties intéressantes sont width
pour table et td
pour donner la largeur du tableau par rapport à la page ou de la
cellule dans la ligne ici 80%.
border permet de spécifier
la bordure des cellules, par défaut il n'y en a pas. valign
et align permettent de gérer
l'alignement vertical et horizontal. L' attribut colspan
spécifie que la cellule aura la largeur de deux cellules des
autres lignes.
rowspan s'utilise de la même
manière pour les colonnes |
|
| Haut de la page |
