Tutoriel Dreamweaver

Dreamweaver

Découvez la puisssance de Dreamweaver dans ces tutoriels.

HTML HTML5 CSS Bootstrap PHP

Les tableaux dans Dreamweaver

Dans ce tutoriel, nous allons aborder la création et la gestion de tableaux avec Dreamweaver

Insertion de tableaux

Pour insérer des tableaux, nous pouvons utiliser différentes mèthodes : Onglets, Menu, raccourcis clavier. Je ne vous décrirai pas toutes les méthodes dans ce tutoriel.

Cliquez sur l'icône 5 dans l'Onglet Commun.

Mise en Forme


Ou cliquez sur l'icône 8 dans l'Onglet Mise en forme.

Insertion tableau


Ces outils vous permettent d'insérer un tableau dans votre page.

Exemple

Colonne 1 Colonne 2
   

EN HTML4

<table width="100%" border="1" align="left" cellpadding="1" cellspacing="1">
<tr>
<td width="50%">Colonne 1</td>
<td width="50%">Colonne 2</td>
</tr>
<tr>
<td width="50%">&nbsp;</td>
<td width="50%">&nbsp;</td>
</tr>
</table>

EN HTML5

A partir de HTML5, on ne remet plus les attributs que nous avons utilisés ci-dessus. Dans l'exemple ci-dessous, j'utilise des classes du célèbre Bootstrap.
Colonne1, ligne1 Colonne 2, ligne1
Colonne1, ligne 2 Colonne 2, ligne2
<table class="table table-responsive table-striped">
<tr>
<td>Colonne1, ligne1</td>
<td>Colonne 2, ligne1</td>
</tr>
<tr>
<td>Colonne1, ligne 2</td>
<td>Colonne 2, ligne2</td>
</tr>
</table>

Insérer une ligne

Pour accèder à la plupart des fonctionnalités des tableaux, il faudra faire un clic droit dans la cellule pour accèder à ce menu.

Gestion de tableau

Si vous cliquez sur l'icône 3 vous insérez une ligne forcément au dessus, si vous cliquez sur l'icône 4, vous pourrez choisir d'insérer une ou plusieurs lignes ou colonnes, au dessus, au dessous, avant ou après.

Insérer des lignes et des colonnes

Exemple

   
Colonne 1 Colonne 2
   

Insérer une colonne

L'icône 4 vous permettra d'insérer une colonne avant la sélection, l'icône 5 vous permettra d'insérer une colonne après.

Exemple

Nouvelle colonne Nouvelle colonne Colonne 1 Colonne 2
       
       

Supprimer ligne

Sélectionner la ligne à supprimer, clic droit et sélectionner l'icône 6 de la capture ci-dessus.

Supprimer une colonne

Sélectionner la colonne à supprimer, clic droit et sélectionner l'icône 7 de la capture ci-dessus.