doc1 sur 4 Fiche de cours 10: Les tableaux Consigne
download 
Plainte Transcription
1 sur 4 Fiche de cours 10: Les tableaux Consigne
Fiche de cours 10: Les tableaux Consigne Créez pour chacun des scripts suivants un nouveau fichier html avec le contenu des scripts. Observez le résultat et tentez de comprendre ce qui se passe. Répondez ensuite aux questions. <html> <body> <table border="1"> <tr> <td>un </td> <td>deux</td> </tr> </table> </body> </html> 1. A quoi sert la balise <table> ? 2. A quoi sert la propriété « border » ? Supprimez-la, ou tentez d’en modifier la valeur pour mieux comprendre. <html> <body> <table border="5"> <tr> <td>un </td> <td>deux</td> <td>trois</td> </tr> </table> </body> </html> 3. A quoi sert la balise <td> ? 4. Comment ajouter une colonne supplémentaire à ce tableau ? Modifiez la propriété « border » en lui affectant la valeur 0. 5. Que se passe-t-il ? 1 sur 4 <html> <body> <table border="1"> <tr> <td>quelle</td> <td>taille aura cette cellule par rapport </tr> </table> </body> </html> à l’autre?</td> 6. Ces 2 cellules sont-elles de la même taille? 7. Si non, à quoi s’est adapté votre navigateur pour en définir la taille ? <html> <body> <table border="1" width="100%"> <tr> <td>un</td> <td>deux</td> </tr> <tr> <td>trois</td> <td>quatre</td> </tr> </table> </body> </html> 8. A quoi sert la balise <tr> ? 9. Comment ajouter une nouvelle ligne à ce tableau ? 10. A quoi sert la propriété « width » de la balise « table » ? Tentez d’en modifier la valeur en 80, 50, ou 30 si vous ne comprenez pas. Supprimez aussi le « % ». 11. Qu’est ce qui change ? Testez ici aussi d’autres valeurs si vous ne comprenez pas. <html> <body> <table border="1"> <tr> <td width="350">un</td> <td width="50">deux</td> </tr> <tr> <td height="50">trois</td> <td>quatre</td> </tr> </table> </body> </html> 12. Comment modifier la largeur d’une colonne ? 2 sur 4 13. Commet modifier la hauteur d’une colonne ? <html> <body> <table border="1" width="500" align=”center”> <tr> <td bgcolor="red">un</td> <td bgcolor="#00FF00">deux</td> </tr> <tr> <td width="80%">trois</td> <td width="20%">quatre</td> </tr> </table> </body> </html> 14. A quoi correspondent les 80% ? A quelle valeur se réfèrent-ils ? 15. A quoi sert le « align=”center”» ? <html> <body> <table border="1" bgcolor="grey" width="100%"> <tr> <td align="right">un</td> <td align="center">deux</td> <td align="left">trois</td> </tr> </table> </body> </html> 16. A quoi sert la propriété « bgcolor » dans la balise <table> ? 17. A quoi sert la propriété « align » dans la balise <td> ? 18. Quelles valeurs pouvez-vous affecter à cette valeur et pour quel résultat ? <html> <body> <table border="0" bgcolor="grey" height="300" cellspacing="0"> <tr> <td valign="top">un</td> <td valign="center">deux</td> <td valign="bottom">trois</td> </tr> </table> </body> </html> 19. A quoi sert la propriété « valign » dans la balise <td> ? 20. Quelles valeurs pouvez-vous affecter à cette valeur et pour quel résultat ? 21. A quoi sert la propriété « height » dans la balise <table> ? Modifiez la valeur de « cellspacing » dans la balise <table> pour trouver l’utilité de cette propriété. 3 sur 4 Exercice : Réalisez un tableau identique à celui présenté ci-dessous. Il sera centré, de trois rangées avec 3 divisions occupant la moitié de la largeur de la page (=fenêtre). Le tableau entier doit être en rouge et la cellule centrale doit avoir un fond bleu. Le texte dans les cellules du milieu doit être centré. Le texte dans les cellules de gauche doit être aligné à gauche. Le texte dans les cellules de droite doit être aligné à droite. Evaluation : Réalisez un tableau identique à celui ci-dessous. Il sera centré, de trois rangées avec deux divisions occupant toute la largeur de la page (=fenêtre). Les deux cellules du haut doivent être en gris. Le texte dans les cellules de gauche doit être aligné à gauche. Le texte dans les cellules de droite doit être aligné à droite. L’espacement entre les cellules doit être nul. 4 sur 4
