Comment faire des tableaux en css

Code CSS

1. Ouvrez un nouveau document dans un éditeur de texte HTML, comme BBEdit ou Dreamweaver.

2. Créer une règle de style de classe appelé ".table". Cette règle définit la police de votre table. Par exemple:
   .table {

   font-family: Verdana, Arial, Helvetica, sans-serif-

   }

3. Créer une règle de style de classe appelé "ul .table". Cette règle définit margin, padding, flotteur et la bordure de la liste à puces. Par exemple:
   .Table ul {

   margin: 0px;
   padding: 0px;
   float: left;
   border-top: 0px none;

   }

4. Créer une règle de style de classe appelé ".table ul li". Cette règle définit le rembourrage de l'élément de la liste, la liste-style-type, couleur de fond, la taille, la bordure du bas, la largeur du tableau et la couleur d'arrière-plan. Par exemple:
   .Table ul li {

   padding: 10px 10px 5px 5px;
   list-style-type: none;
   background-color: # CCCCFF-
   font-size: 14px;
   border-bottom: 1px solid # FFFFFF-
   largeur: 150px;
   color: # 000033-

   }

5. Créer une règle de style de classe appelé "li.heading ul .table". Cette règle définit les propriétés de police de la rubrique de la liste, la couleur de fond et la bordure du bas. Par exemple:
   .Table ul {li.heading

   font-weight: hardiesse
   color: # 333366-
   background-color: # 9999CC-
   text-transform: uppercase-
   font-size: 16px;
   border-bottom: 1px solid # FFFFFF-

   }

6. Nommez et enregistrez votre fichier CSS avec le "Css" l'extension.

7. Liez votre fichier CSS à votre HTML en ouvrant votre document HTML et ajout d'un lien dans le document de "tête" élément. Par exemple:
   http://yoursite.com/table.css "rel =" stylesheet "type =" text / css "media =" all "/>

Code HTML

1. Saisissez l'ouverture "

   " marquer et ajouter la "table" la domination de classe. Ceci assigne le style de la table. Par exemple:
   
   
   
   
   
   

2. Saisissez l'ouverture "

   " liste non ordonnée tag. Cela commence la première colonne de votre tableau.

3. Saisissez l'ouverture "

4. " élément de liste et ajouter le tag "rubriques" la domination de classe. Ceci assigne le style de l'en-tête de liste. Par exemple:
   

6. Entrez le texte de l'élément de liste et fermer la "

" tag. Le texte est le premier titre de votre colonne. Par exemple:

7. Colonne 1

8. Entrez autant de balises d'élément de liste au besoin. Le texte entré dans ces éléments de la liste sont les données qui apparaît dans la colonne un. Par exemple:
   

9. Ligne 1, colonne 1


10. Ligne 2, colonne 1


11. Row 3, colonne 1

12. Entrez la clôture "" tag pour compléter la première colonne de votre tableau.

13. Répétez les étapes deux, trois et quatre pour ajouter des colonnes et des lignes supplémentaires à votre table, si nécessaire. Par exemple:
    

    
    

14. Colonne 2


15. Ligne 1, colonne 2


16. Ligne 2, colonne 2


17. Row 3, colonne 2



18. Entrez la clôture "" tag.

19. Nommez et enregistrez votre fichier HTML avec le ".html" l'extension.

• Vous pouvez ajouter des spécifications de style supplémentaires, telles que la taille de la police ou de la couleur, dans chaque CSS rule.If vous ne voyez pas les règles CSS prenant effet, assurez-vous que les deux fichiers ont été sauvegardés et ensuite utiliser votre éditeur de texte HTML de "Rafraîchir" fonction.