Web / HTML - TD n°4

Tout ce qu'il y a à savoir concernant la construction d'un tableau se trouve à l'adresse suivante : http://www.w3.org/TR/html4/struct/tables.html.

De la même façon, la documentation concernant la façon de changer le style d'un tableau se trouve ici : http://www.w3.org/TR/CSS21/tables.html.

1. Tableaux

Tout ce qu'il y a à savoir concernant la construction d'un tableau se trouve à l'adresse suivante: http://www.w3.org/TR/html4/struct/tables.html.

De la même façon, la documentation concernant la façon de changer le style d'un tableau se trouve ici: http://www.w3.org/TR/CSS21/tables.html.

Exercice 1. Tabulons le monde

Créez un tableau à quatre colonnes, la première contiendra les noms de pays, la seconde leurs nombres d'habitants, la troisième le nom de leurs capitales et la quatrième une image de leurs drapeaux. N'oubliez pas d'ajouter une ligne d'en-tête (élément th) précisant à quoi correspond chacune des colonnes.

En utilisant par exemple wikipedia Vous remplirez ce tableau pour les pays suivants (et d'autre si ça vous amuse):

  • la France,
  • le Royaume-Uni,
  • la Belgique,
  • le Luxembourg,
  • l'Allemagne,
  • la Suisse,
  • l'Italie,
  • Monaco,
  • Andorre,
  • et l'Espagne.

Exercice 2. Délimitons le monde

Comme vous pourrez le constater, le résultat n'est pas très visuellement très satisfaisant parceque tout cela manque de séparation. Nous allons donc ajouter une bordure aux cellules en modifiant leur style.

On remarque que le tableau n'est peut être pas mis en page comme on s'y serait attendu. La raison est simple: il existe 2 modèles différents pour le calcul des bordures: le separated border model (qui est utlisé par défaut) et le collapsed border model. L'utilisation d'un modèle ou de l'autre est contrôlé par l'attribut de style border-collapse. Essayez de changer cet attribut pour votre tableau.

Utilisez à nouveau un modèle de bordures separate. Après avoir cherché dans la documentation à quoi il sert, jouez avec l'attribut de style border-spacing. Jouez sur les bordures des cellules et du tableau lui-même pour obtenir un résultat visuel similaire à celui du modèle collapse.

Exercice 3. Donnons des limites au monde !

Lisez dans la documentation a quoi sert l'attribut table-layout.

Que faut il faire pour être sur de pouvoir utiliser l'algorithme de fixed-layout ? Donnez un exemple de cas où il peut être judicieux de l'employer.

Exercice 4. Juste faites le !

Reproduisez le tableau ci-dessous:

tableau

2. Listes

Comme d'habitude, voici quelques pointeurs vers la documentation officielle:

Notre but ici n'est pas de voir les listes en elles-mêmes puisqu'on l'a déjà fait au premier TD. Nous allons plutôt nous intéresser aux propriétés de style propres aux listes.

Néanmoins un bref rappel pourrait s'avérer utile. Voici donc les deux principaux types de listes qu'on trouve en HTML (on ne parlera pas ici des listes de définitions crées à l'aide d'éléments <dl>) :

  • les listes ordonnées (<ol>), dont chaque élément est numéroté, comme par exemple celle-ci:
    1. un élément,
    2. un autre élément,
    3. encore un autre élément,
    4. et pour finir un élément de plus.
  • les listes non-ordonnées (<ul>), dont chaque élément est précédé d'une puce, comme le montre l'exemple suivant:
    • un élément,
    • un autre élément,
    • encore un autre élément,
    • et pour finir un élément de plus.

Exercice 1. Puces & numérotation

Créez une liste ordonnée contenant quelques éléments. Comment changer les numéros pour utiliser des lettres majuscules ?

Créez une liste non-ordonnée contenant quelques éléments. Comment changer la puce pour que cette liste utilise des cercles pour puces ? Pour qu'elle utilise une image ? Une puce différente par élément ?

Exercice 2. Marker boxes

Si vous avez été de bon étudiants et que vous avez lu la documentation, vous aurez compris qu'un élément de liste est composé de deux boites principales. La première de ces boites est celle contenant les informations de l'item en lui-même (tout ce qui est défini entre le <li> et le </li>, on appelle cette boite la "principal block box") et la seconde qui contient le numéro d'item pour une liste ordonnée et la puce pour une liste non-ordonnée (appelée la "marker box").

Par défaut, lors du rendu à l'écran d'une liste, la boite principale est positionnée à droite de la marker box. Néanmoins on peut contrôler ce positionnement grâce à l'attribut list-style-position.

Créez deux listes qui auront chacune l'une des valeurs possibles pour cet attribut. Comparez.

3. A rendre

Sujet : Le jeu de Go

Le document que vous rendrez devra comporter outre une introduction et une conclusion, au moins 3 paragraphes d'une taille minimale de 150 caractères. On devra de plus y trouver au moins 2 tableaux et 2 listes qui auront bien sûr des styles différents. Veillez à soigner la forme de votre travail.