|
Quelles sont les balises et les attributs de tableaux ?
La page que vous regardez en ce moment est une tableau géant, avec 2 cellules qui sont de tailles différentes en largeur. Les tableaux sont d'un grand intérêt parce que vous pouvez placer des objets dans votre page sans avoir tout au centre de votre page. Sans tableaux, vous ne pouvez pas mettre des choses à côté les unes des autres (les feuilles de style en cascade "cascading style sheets" se substitueront aux tables quand tout le monde décidera d'adopter un navigateur récent, les browsers anciens ne peuvent pas lire les CSS c'est pourquoi la plupart des gens utilisent toujours les tableaux).
- Table la balise de tableau ressemble à ceci : <table></table> Tous les paramètres vont se placer entre ces deux balises pour composer un tableau. Tous les tableaux commencent par la balise <table> et se terminent avec la balise </table>.
- Table row c'est une ligne individuelle qui contient au moins une donnée. Pour cette page j'ai utilisé deux cellules. La balise est la suivante : <tr></tr>.
- Table data c'est une cellule individuelle dans une ligne. Le code est le suivant : <table><tr><td></td></tr></table>
Voici un exemple de tableau avec des lignes et des cellules:
cellule cellule cellule <--c'est une ligne
- Border en ajoutant ceci à votre balise de tableau, vous indiquez si votre tableau comporte un quadrillage. Le tableau que j'ai utilisée pour ma page n'en a pas.
- Bgcolor vous pouvez ajouter cette balise pour changer la couleur de fond de votre tableau, ligne, ou cellule. Vous pouvez donner à chaque ligne une couleur différente, et même les cellules pouvent être de différentes couleurs.
- Align cette balise vous permet d'aligner votre texte dans le tableau, la ligne ou la cellule. Si vous ne l'utilisez pas, votre image ou texte sera aligné vers la gauche par défaut). Vous pouvez indiquer les attributs "center", "left" ou "right" pour changer l'alignement.
- Valign cette balise aligne votre tableau verticalement. Si vous n'utilisez pas "top" (en haut) ou "bottom" (en bas) votre information sera alignée verticalement au centre.
- Cellpadding cet attribut détermine les marges à l'intérieur de vos cellules pour chacun des quatre côtés.
- Cellspacing cet attribut détermine l'interligne entre vos cellules de tableau.
- Bordercolor cette balise la couleur de l'encadrement.
- Rowspan en ajoutant cet attribut, vous pouvez fusionner verticalement des celules, il peut fusionner toutes ou certaines de vos lignes.
row 1 
rows1-3 row 1 row 1 row 2 rows2-3 row 2 row 3 row 3
- Colspan l'attribut colspan fusionne des cellules horizontalement.
Lissa l'explique tout cell 1 cell 2 cell 3 cell 4 cell 5 cell 6 cell 7 cell 8
Comment puis-je créer un tableau simple ? Voici quelques exemples des tableaux simples. Microsoft Internet Explorer et Netscape n'affichent pas les tableaux de la même façon, même si vous utilisez les mêmes codes.
|
<table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table> |
|
<table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> |
Comment puis-je ajouter un quadrillage à mes tableaux ?
|
<table border="8"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> |
Comment ajouter de la couleur à mes tableaux ?
|
<table border="8" bordercolor="#ff00cc"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> |
|
<table border="8" bordercolor="#cc00ff"> <tr> <td bgcolor="#00CCFF">Cell 1</td> <td bgcolor="#CC00FF>Cell 2</td> </tr> <tr> <td bgcolor="#00FF00">Cell 3</td> <td bgcolor="#FFFF00">Cell 4</td> </tr> </table> |
Comment supprimer le quadrillage dans mes tableaux ? Ajoutez simplement l'attribut border="0 " à votre balise de tableau :
|
<table border="0" cellspacing="0"> <tr> <td bgcolor="#00CCFF">Cell 1</td> <td bgcolor="#CC00FF">Cell 2</td> </tr> <tr> <td bgcolor="#00FF00">Cell 3</td> <td bgcolor="#FFFF00">Cell 4</td> </tr> </table> |
|
<table border="0" cellspacing="0"> <tr> <td bgcolor="#00CCFF">row 1</td> <td bgcolor="#FFFF00" rowspan=3>rows 1-3</td> <td bgcolor="#CC00FF">row 1</td> <td bgcolor="#00FF00">row 1</td> </tr> <tr> <td bgcolor="#00FF00">row 2</TD><td bgcolor="#00FF00" rowspan=2>rows 2-3</td> <td bgcolor="#00CCFF">row 2</td> </tr> <tr> <td bgcolor="#ff33cc">row 3</td> <td bgcolor="#ff33cc">row 3</td> </tr> </table> |
|
<table border="0" cellspacing="0" cellpadding="5"> <tr> <td bgcolor="#FFFF00" colspan=4 cellpadding="5">Lissa l'explique tout</td> </tr> <tr> <td bgcolor="#00CCFF" cellpadding="5">cell 1</td> <td bgcolor="#CC00FF" cellpadding="5">cell 2</td> <td bgcolor="#ff33cc" cellpadding="5">cell 3</td> <td bgcolor="#00FF00" cellpadding="5">cell 4</td> </tr> <tr> <td bgcolor="#ff33cc" cellpadding="5">cell 5</td> <td bgcolor="#00FF00" cellpadding="5">cell 6</td> <td bgcolor="#00CCFF" cellpadding="5">cell 7</td> <td bgcolor="#CC00FF" cellpadding="5">cell 8</td> </tr> </table> |
||||||||||||
Comment puis-je fixer la largeur mes tableaux ? Ajoutez simplement l'attribut "width" avec des largeurs spécifiques à votre tableau. Vous pouvez également indiquer des pourcentages dans la balise, par exemple <width=30%>. Assurez-vous seulement que le total des pourcentages de largeurs est égal à 100%.
|
<table border="0" cellpadding="5" cellspacing="10" width="200"> <tr> <td bgcolor="#00FF00" width="50" >Cell 1</td> <td bgcolor="#FFFF00" width="150" >Cell 2</td> </tr> </table> |
How do I add a background to my table? It's very simple to add a background to a table. In the table tag (it's the first tag in your table) add "background="yourbackground.gif." Like this:
<table background="yourbackground.gif">
A background will fill your whole table.