Les tableaux HTML offrent une structure classique de lignes et de colonnes semblable à une feuille de calcul.
Ils servent à afficher des données telles que des chiffres de ventes, des prévisions météo ou des résultats sportifs, comme dans cet exemple.
Pendant longtemps, les designers les ont détournés pour la mise en page.
Or, cet usage provoque des problèmes d'accessibilité pour les non-voyants et d'autres personnes atteintes d'un handicap.
Il faut donc utiliser les tableaux uniquement pour les données.
Voici comment insérer un tableau dans Dreamweaver.
Je vais d'abord créer une page HTML vierge.
Je choisis Fichier > Nouveau > HTML, aucune mise en forme, puis j'enregistre cette page dans le site d'exercice DWCC2014 en la nommant table_insert.html.
Je peux insérer un tableau de plusieurs façons.
La première chose à faire est de passer en mode Création.
Je ne peux pas insérer de tableau en mode En direct.
Enfin, c'est possible en théorie, mais c'est très difficile.
Dans le menu Insérer, je choisis Tableau.
Je peux aussi appuyer sur Ctrl + Alt + T sous Windows ou Cmd + Option + T sous MacOS.
Je peux aussi utiliser le panneau Insertion.
Avec cette méthode, je dois choisir Commun dans le menu en haut à gauche.
Ensuite, je clique sur Tableau.
Ce faisant, la boîte de dialogue Tableau s'affiche.
Je peux alors choisir le nombre de lignes et de colonnes.
Je pourrai modifier ces valeurs ultérieurement.
Je spécifie 6 lignes et 3 colonnes.
Pour la largeur, je recommande d'effacer la valeur du champ, car les tableaux s'adaptent automatiquement au contenu.
Pour la largeur de la bordure, en HTML5, cette valeur doit toujours être équivalente à un pixel.
Pour obtenir une bordure plus épaisse, il faut utiliser CSS.
En général, les tableaux sont plus élégants sans bordure.
J'efface donc cette valeur.
La marge intérieure des cellules ajoute un espace vertical et horizontal à l'intérieur de chaque cellule.
Si j'utilise cette option, la même quantité sera ajoutée tout autour.
En HTML5, cette option n'est plus recommandée, mieux vaut utiliser CSS.
Idem pour l'espacement des cellules.
L'option ajoute le même espace autour de chaque cellule.
CSS offre davantage de possibilités.
La section en dessous permet d'indiquer si on veut des en-têtes de cellule.
On peut choisir de ne pas en avoir du tout, d'en avoir sur la gauche, en haut ou les deux, c'est-à-dire en haut et à gauche.
Je sélectionne Les deux puis, sous Accessibilité, je peux ajouter une légende.
Si vous en voulez une, je vous conseille d'insérer du texte de remplissage ici, car il est impossible d'accéder à cette boîte de dialogue une fois le tableau créé.
Donc, si vous voulez une légende, créez-la ici, sans quoi vous devrez accéder au code HTML ultérieurement pour insérer la légende manuellement.
Je tape donc « Placeholder caption » dans le champ.
Résumé n'est plus utilisé, cette option a été supprimée pour HTML5.
Le résumé d'un tableau n'était jamais affiché sur la page web.
Il a été conçu uniquement à des fins d'accessibilité.
Désormais, il est recommandé d'utiliser une légende ou un autre moyen de décrire le contenu du tableau.
Une fois les paramètres définis, je clique sur OK.
L'espace réservé pour la légende et le tableau sont insérés.
Vu qu'il n'y a rien dans le tableau, l'insertion de contenu dans les cellules est difficile.
Avec le pointeur sur le tableau, je fais un clic droit, je sélectionne Tableau puis, tout en bas, j'active Mode Tableaux développés.
Les cellules sont alors agrandies, ce qui facilite l'insertion de texte.
Il s'agit d'un simple outil visuel de Dreamweaver.
Le tableau n'est pas du tout modifié, aucun code HTML sous-jacent n'est ajouté.
En revanche, il est plus facile de cliquer dans les cellules pour la saisie.
J'ajoute un titre, puis j'appuie sur Tab pour changer de cellule.
Une fois la première ligne renseignée, je quitte le mode Tableaux développés en cliquant sur Quitter, ici en haut.
Le tableau reprend sa taille normale.
Comme j'ai spécifié des en-têtes de chaque côté, tout le texte de la ligne supérieure est en gras.
Si je clique dans cette cellule et que je tape un nombre, celui-ci s'affiche aussi en gras et centré, car il utilise un élément « th ».
Dans la cellule suivante, si je tape quelque chose, le texte est aligné à gauche et sans gras, car ici, l'élément utilisé est « td », celui d'une cellule de données.
Quand je tape, les cellules du tableau s'étendent automatiquement pour s'adapter au contenu.
En mode Création, des lignes en pointillés s'affichent pour indiquer l'emplacement des cellules, mais si je passe en mode En direct, elles disparaissent, ce qui correspond à l'apparence dans le navigateur.
Si je repasse en mode Création, je peux continuer à ajouter du contenu dans le tableau.
On peut insérer un tableau de plusieurs façons dans Dreamweaver CC, notamment via le panneau Insertion, en cliquant sur Tableau.
Il faut sélectionner Commun dans le menu en haut du panneau.
On peut également cliquer sur le menu Insérer, puis sélectionner Tableau, ou utiliser le raccourci clavier Ctrl + Alt + T sous Windows ou Cmd + Option + T sous MacOS.
Le tableau est inséré à l'emplacement du point d'insertion en mode Création.
Dans la boîte de dialogue Tableau, on définit le nombre initial de lignes et de colonnes souhaité.
Je recommande d'effacer la valeur du champ Largeur pour que le tableau s'adapte automatiquement au contenu inséré.
Il faut également décider si l'on veut inclure des en-têtes dans la colonne de gauche, la ligne supérieure, les deux ou nulle part.
On peut aussi ajouter une légende qui s'affiche normalement au-dessus du tableau, mais peut être placée en dessous à l'aide de CSS.
