Voyons maintenant comment utiliser la grammaire CSS pour embellir des tables. Remarque: Sauf indication contraire, le plateau de cellule, le pavage de cellule et les valeurs de bordure des tables insérées dans les exemples mentionnés dans cet article sont 0. Exemple 1: 1px Tableau
Beaucoup de gens souhaitent faire des formes 1px, ils ont donc inventé diverses méthodes, qui peuvent être beaucoup plus flexibles lorsqu'elles sont utilisées avec CSS. Si vous souhaitez faire une table 1x1 1px, définissez simplement la valeur de la bordure. Nous insérons d'abord une table 1x1 avec Dreamweaver avec une largeur de 50, puis définissons la bordure: 1 thé solide dans le tableau ou TD. L'effet du tableau fabriqué est le suivant:
Cependant, il est un peu plus difficile de créer une table non-1x1 (comme 2x2), car si vous définissez directement la bordure de style TD: 1 thé solide, l'effet d'affichage est le suivant:
Vous constaterez que la boîte extérieure de la table est 1px, tandis que l'intérieur devient 2px, ce qui est dû à la superposition. Pour résoudre ce problème, nous pouvons faire ceci:
Définissez d'abord le style pour TD: Border: # CC0000 solide; largeur de bordure: 0 1 1 0 , de sorte que le tableau est exprimé comme
Définissez ensuite le style de la table :: Border: # CC0000 solide; largeur de bordure: 1 0 0 1 , afin que vous puissiez en faire une table complète de 1px.
Exemple 2: Tableau 1Px avec des bordures épaisses
La ligne de grille intérieure de ce tableau est de 1px et la bordure extérieure est 3px. Il n'est pas difficile de le faire avec la base de l'exemple 1. Modifiez simplement la valeur de la largeur des frontières.
Le code pour le style utilisé par la table est: Border: Blue Solid; Border-Width: 3 2 2 3 , et le code du style utilisé par le TD est: Border: Blue Solid; Border-Width: 0 1 1 0 Exemple 3: Tableau en pointillé
La pratique est similaire à l'exemple 1, et le style frontière passe de solide à pointillé. Le code pour le style utilisé dans le tableau est: Border: Black Dashed; largeur de bordure: 1 0 0 1 , et le code du style utilisé dans le TD est: Border: Black en pointillés; largeur de bordure: 0 1 1 0 Exemple 4: table de bordure pointillée et ligne
Notez que le pixel minimum de pointillé est 2. Le code du style utilisé dans le tableau est: Border: Green Disted; Border-width: 2 0 0 2. Le code du style utilisé dans le TD est: Border: Green Disted; Border-width: 0 2 2 0 Exemple 5: Double-Line Border Table Border Table Border Table Border Table Border Table Border Table Border Table Border Table Border Table Border Table Border Table Border Table Border Table Border Line
Notez que le pixel minimum d'une double ligne est 3. Le code du style utilisé dans le tableau est: Border: Teal 4 Dou . Le code pour le style utilisé dans le TD est: Border: Teal 1 SEEL SOLID Exemple 6: Début de la table de cadre extérieur
Le code pour le style utilisé par la table est: Border: 3 Début , et le code du style utilisé par le TD est: Border: 1 solide Exemple 7: Tableau de contour insensé
Le code du style utilisé par la table est: Border: 3 Encart , et le code du style utilisé par le TD est: Border: 1 solide Exemple 8: Tableau de cadre extérieur Ridge
Le code du style utilisé par la table est: Border: # EE0000 3 Ridge Le code du style utilisé par le TD est: Border: 1 solide
Page précédente 1 2 3 Page suivante Lire le texte intégral