Document

> For the complete documentation index, see [llms.txt](https://cours.davidannebicque.fr/mmi-noumea/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cours.davidannebicque.fr/mmi-noumea/accessibilite-s1/seance-1.md). # Séance 1 ## Les tableaux ### Les balises * `table` * Définition du tableau en lui même, contiendra l'ensemble des balises suivantes * * `tr` (table row) * Déclaration d'une nouvelle ligne * `td` (table data) * Déclaration d'une cellule de contenu, toujours dans un tr * `th` (table heading) * Déclaration d'une cellule d'en-tête (de ligne ou de colonne), toujours dans un tr) * `thead` * Bloc contenant une en-tête d'un tableau, contient ensuite des lignes et des cellules * `tbody` * Bloc contenant le corps d'un tableau, contient ensuite des lignes et des cellules * `tfoot` * Bloc contenant le pied de page d'un tableau, contient ensuite des lignes et des cellules * `caption` * La légende du tableau pour décrire son contenu * Les détails dans la documentation : ### Fusionner des cellules ou des lignes #### Colspan permet de fusionner des cellules sur plusieurs colonnes * `contenu` fusionnera 3 cellules en une seule colonne. * Exemple

```html

A
B	C

``` #### Rowspan permet de fusionner des cellules sur plusieurs lignes * `contenu` fusionnera 4 cellules en une seule cellule occupant 4 lignes. * Exemple

```html

A	B
	C

``` ### Exemple Le code HTML ci-dessous ```html Document

Tableau des produits commandés
Code produit	Prix Unitaire	Quantité	Prix Total
ABC123	12.23 €	1	12.23 €
CDE456	14.00 €	2	28.00 €
CDE786	10.00 €	4	40.00 €
CFG456	21.00 €	2	42.00 €
Total			122.23 €

``` va produire sans CSS le résultat ci-dessous

### L'intérêt Ce que dit l'accessibilité : ### Le CSS Un tableau bien construit peut plus facilement être mis en forme, sans devoir ajouter des classes CSS partout. On peut directement mettre en forme les tr, td et th, mais aussi plus spécifiquement les tr, td et th qui sont dans le thead, le tfoot ou encore le tbody. On peut éventuellement coupler cela à une classe ou un id sur la table et différencier, facilement plusieurs tableaux ### Qualité du Web {% embed url="" %} {% embed url="" %} {% embed url="" %} {% embed url="" %} {% embed url="" %} ### Exercices Reproduire le tableau ci-dessous en utilisant les bonnes balises et en ajoutant le CSS nécessaire sans utiliser de class ou d'ID.

Rappel : L'ajout d'une feuille de style se fait avec la balise link dans le head de votre page html ```html ... ... ```