Les tableaux sont sans aucun doute l'objet le plus important dans la production de pages Web, car les pages Web s'appuient généralement sur des tableaux pour la mise en page et l'organisation de divers éléments. Ils déterminent directement si la page Web est belle et si l'organisation du contenu est claire. Cependant, de nombreux amis négligent souvent l'étude des tableaux et se concentrent sur d'autres calques, images, effets spéciaux, etc. En fait, une utilisation raisonnable des tableaux peut facilement embellir votre page. Nous entendons aussi souvent des amis se plaindre du fait que la page créée par les tableaux est monotone. ., brouillon, manque de variété, et j'entends souvent des gens demander comment faire une bordure de tableau de 1 pixel. En fait, dans Dreamweaver, nous pouvons affiner votre tableau de manière très pratique, rendant ainsi votre page Web plus belle et plus raffinée. Nous présenterons comment affiner votre tableau dans Dreamweaver dans les trois aspects suivants.
1. Utilisez le panneau des propriétés.
Figure 1 Nous devons d'abord comprendre les paramètres des deux panneaux de propriétés de la table : CellPad et CellSpace. Comme le montre la figure 1, CellPad fait référence à la distance entre deux cellules du tableau et CellSpace fait référence à la distance entre chaque cellule et le contenu au milieu. En modifiant ces deux paramètres et en faisant correspondre la couleur d'arrière-plan, vous pouvez facilement créer une bordure de tableau de 1 pixel.
1. Utilisez le panneau Objet pour insérer un tableau et définir la largeur, la hauteur, les lignes et les colonnes du tableau. Notez que les valeurs par défaut CellPad, CellSpace et Border du tableau inséré dans Dreamweaver sont toutes égales à 0 pour le moment. Comme le montre la figure 2 ;
Figure 2
2. Définissez la bordure du tableau dans le panneau des propriétés sur 0, CellPad sur 5 (cela conservera 5 pixels entre le contenu de la cellule et le bord de la cellule sur 1 (cela conservera 5 pixels entre les cellules) ; ) 1 espacement des éléments). Comme le montre la figure 3 ;
Figure 3
3. Définissez la couleur d'arrière-plan du tableau sur #999999, comme indiqué dans la figure 4 ;
4. Définissez la couleur d'arrière-plan de la cellule sur #FFFFFF, comme indiqué dans la figure 5 ;
Figure 5
5. Prévisualisez l'effet dans le navigateur. Nous pouvons voir que le tableau a une bordure en pixels, comme le montre la figure 6 ;
Figure 62
: Utilisation de l'imbrication de tables.
Toujours le principe principal ci-dessus, nous pouvons obtenir plus d'effets en utilisant l'imbrication de tableaux.
1. Tout d'abord, nous dessinons un tableau et définissons les valeurs et les couleurs de CellPad et CellSpace de ce tableau en nous référant à l'exemple précédent. L'effet spécifique est illustré à la figure 7 ;
Figure 7 2. Dessinez ensuite un autre tableau à une seule ligne et à une seule colonne, définissez CellPad = 2, CellSpace = 1. Les paramètres spécifiques sont tels qu'indiqués dans la figure 8 ;
Figure 8
3. Déplacez le tableau créé lors de la première étape vers le tableau de la deuxième étape. Le tableau ressemble maintenant à la figure 9 ;
Sur la figure 9, on voit que ce tableau comporte un cadre extérieur à double ligne et un cadre intérieur à une seule ligne.
4. Modifiez le tableau de la deuxième étape en une seule ligne et deux colonnes, et placez un tableau dans la première étape dans chaque cellule. Le tableau final ressemblera à la figure 10 ;
Redéfinissez
la Figure 10
, définissez un style .tdstyle séparément, les paramètres spécifiques sont tels qu'indiqués dans la Figure 13 ;
Notez ici que nous définissons la largeur des bordures supérieure et inférieure sur 1 pixel et la largeur des bordures gauche et droite sur 0.
4. L'effet de table finale est illustré à la figure 14 ;
(Photo 15)
A ce moment, le tableau présente un effet tridimensionnel.
6. Le tableau ci-dessus ne semble pas parfait. Il n’y a pas de bordures à droite et en bas de l’ensemble du tableau. Nous pouvons définir un autre style.table1, définir les quatre côtés de ce style comme étant de 1 pixel et l'attacher
