Intégration multimédia S3 (M3206) – TP n° 7

Les tableaux

Avant de voir les différentes classes de Bootstrap qu'on peut appliquer aux tableaux, faisons un rappel rapide.

1. On fait un tableau avec l'élément <table>, une rangée avec <tr> (table row) et une cellule avec <td> (table data).
2. Si une cellule fait partie de l'entête, alors on utilise l'élément <th> (table header).
3. Pour fusionner plusieurs colonnes ou rangées, on utilise les attributs colspan et rowspan sur les éléments <td>/<th>.
4. Les éléments <colgroup> et <col> servent à attributer un style commun aux colonnes.
5. L'élément <caption> ajoute une légende aux tableau. Ne le confondez pas avec <figcaption>.
6. Les éléments <thead>, <tbody> et <tfoot> apportent une structure au tableau.
7. Les attributs scope et headers sont utilisés pour rendre les tableaux compréhensibles pour les malvoyants.

Vous trouverez ici un exemple de tableau très complet.

La première classe qu'il faut connaître est .table. Elle est appliquée à un élément <table>. Cette classe toute seule rend un tableau beaucoup plus beau.

Il existe plusieurs classes pour changer le style du tableau : .table-dark, .table-striped, .table-bordered, .table-borderless, .table-hover et .table-sm. Vous pouvez combiner la plupart de ces classes, elle doivent toujours être accompagnées de la classe .table.

Les noms de ces classes sont assez explicites pour comprendre ce qu'elles font. Sinon, vous allez le découvrir dans l'exercice suivant.

<table>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Race</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Propriétaire</td>
    <td>Belle-mère</td>
    <td>Moi</td>
    <td>Moi</td>
    <td>Belle-soeur</td>
  </tr>
  <tr>
    <td>Habitudes alimentaires</td>
    <td>Mange tous les restes</td>
    <td>Grignote la nourriture</td>
    <td>Mange copieusement</td>
    <td>Mange jusqu'à ce qu'il éclate</td>
  </tr>
</table>

Il existe aussi deux classes uniquement pour l'élément <thead> : .thead-dark et .thead-light.

Finalement, il y a aussi des classes responsives pour les tableaux, qui permettent de scroller horizontalement le tableau quand il est trop large. Pourtant, elles ne marchent pas exactement comme dans les grilles 🤦

La classe .table-responsive active le scrolling pour n'importe quelle taille de fenêtre. Elle n'est pas appliquée sur l'élément <table>, mais sur un <div> qui contient le tableau.

Par contre, la classe .table-responsive-sm active le scrolling jusqu'au point de rupture "sm" (576 pixels). À partir de 576 pixels, il n'y a plus de scrolling. C'est pareil pour .table-responsive-md, .table-responsive-lg et .table-responsive-xl.

L'insertion des vidéos

Quand on insère une vidéo dans une page web, on a le même problème qu'avec les images : il faut que la vidéo ne déborde pas.

Par contre, c'est un peu plus compliqué. Utilisez ce bout de code :

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/EoYfa6mYOG4"></iframe>
</div>

Vous pouvez remplacer la classe .embed-responsive-16by9 par .embed-responsive-21by9, .embed-responsive-4by3 ou .embed-responsive-1by1 pour avoir des ratios différents.

Encore la Wikipédia

S'il vous reste du temps, continuez votre exercice sur la Wikipédia.