Minotauromaquia
Créer une table en HTML est assez simple et facile, il vous suffit de connaître les balises table, ligne et cellule. Quand il s'agit d'éditer un tableau et de peaufiner son apparence, il faut un formatage plus avancé, mais toujours à suivre. Afin de peaufiner votre table, vous pouvez utiliser les commandes permettant d'ajuster la taille des tables, l'espace dans la cellule, aligner les données, etc. Il y a aussi une capture d'écran de la table éditée avec CSS à la fin, que vous voudrez peut-être consulter si vous avez besoin de modifications plus avancées.
Pas
-
1 Tout d'abord, créez une disposition de table de base sur laquelle travailler. Ouvrez simplement le Bloc-notes et copiez le code suivant: -
2Enregistrez le fichier en tant que Table1.html -
3 Ouvrez Table1 dans votre navigateur et votre tableau sera affiché dans le formulaire de base: -
4 Maintenant, commençons à éditer. Gardez le fichier Notepad avec le code HTML ouvert, nous éditerons une chose à la fois en éditant le code. -
5 Ajustez l'espace entre les cellules en ajoutant les commandes cellpadding et cellspacing à votre code comme suit: - cellpadding - augmente les dimensions verticales des cellules;
- cellspacing - augmente la bordure autour des cellules;
- Le résultat est indiqué ci-dessous:
-
6 Spécifiez la largeur de la table. Ajoutez simplement l'attribut width à votre code: - Vous pouvez le faire en pourcentage ou en pixels. Dans cet exemple, il s'agit d'une largeur de jeu de 600 pixels, qui ne changera pas selon la taille de l'écran. Si vous le définissez en pourcentage, il s’ajusterait automatiquement à la taille de l’écran.
-
7 Spécifiez la largeur des colonnes en définissant la valeur sur votre balise de cellules de données (td): - Dans l'étape précédente, la largeur des colonnes était ajustée uniformément. Si vous ne voulez pas que vos colonnes aient la même largeur, vous pouvez définir les valeurs de largeur séparément pour chaque colonne.
- C'est ce que vous réalisez en changeant les deux largeurs:
- Dans l'étape précédente, la largeur des colonnes était ajustée uniformément. Si vous ne voulez pas que vos colonnes aient la même largeur, vous pouvez définir les valeurs de largeur séparément pour chaque colonne.
-
8 Spécifiez la hauteur de la table. Ajoutez simplement la commande height à la balise table. La hauteur des rangées s'ajustera de manière uniforme. L'effet est indiqué ci-dessous. -
9 Centrer les données dans la cellule. Notez que seul le titre de la table a déjà été centré par l'attribut align. Le contenu du reste de la cellule est aligné par défaut. Ajoutez l'attribut align à toutes les cellules en mettant à jour le code comme indiqué ci-dessous: -
10 Alignez le contenu verticalement. Par défaut, tout le contenu des cellules est centré verticalement. Parfois, cependant, vous préférerez peut-être l'aligner à partir du haut. Dans notre exemple, nous avons fait pour notre colonne 2 centrale et droite. Ajoutez simplement l'attribut d'alignement dans les cellules appropriées comme suit: - Votre tableau aligné horizontalement et verticalement ressemblera à ceci:
-
11 Ajoutez de la couleur à votre table. Modifions d'abord la couleur d'arrière-plan en incluant la commande bgcolor dans la cellule Titre de la table: -
12 Définissez de manière analogue la couleur d'arrière-plan pour le reste de vos cellules. Dans notre exemple, la première colonne a une couleur différente des deux autres: -
13 Enregistrez votre fichier au format HTML à nouveau, ouvrez-le dans le navigateur et vous pourrez voir votre projet prêt!
1 Tout d'abord, créez une disposition de table de base sur laquelle travailler. Ouvrez simplement le Bloc-notes et copiez le code suivant: 
2Enregistrez le fichier en tant que Table1.html 
3 Ouvrez Table1 dans votre navigateur et votre tableau sera affiché dans le formulaire de base: 
4 Maintenant, commençons à éditer. Gardez le fichier Notepad avec le code HTML ouvert, nous éditerons une chose à la fois en éditant le code. 
5 Ajustez l'espace entre les cellules en ajoutant les commandes cellpadding et cellspacing à votre code comme suit: 
6 Spécifiez la largeur de la table. Ajoutez simplement l'attribut width à votre code: 
7 Spécifiez la largeur des colonnes en définissant la valeur sur votre balise de cellules de données (td): 
8 Spécifiez la hauteur de la table. Ajoutez simplement la commande height à la balise table. La hauteur des rangées s'ajustera de manière uniforme. L'effet est indiqué ci-dessous. 
9 Centrer les données dans la cellule. Notez que seul le titre de la table a déjà été centré par l'attribut align. Le contenu du reste de la cellule est aligné par défaut. Ajoutez l'attribut align à toutes les cellules en mettant à jour le code comme indiqué ci-dessous: 
10 Alignez le contenu verticalement. Par défaut, tout le contenu des cellules est centré verticalement. Parfois, cependant, vous préférerez peut-être l'aligner à partir du haut. Dans notre exemple, nous avons fait pour notre colonne 2 centrale et droite. Ajoutez simplement l'attribut d'alignement dans les cellules appropriées comme suit: 
11 Ajoutez de la couleur à votre table. Modifions d'abord la couleur d'arrière-plan en incluant la commande bgcolor dans la cellule Titre de la table: 
12 Définissez de manière analogue la couleur d'arrière-plan pour le reste de vos cellules. Dans notre exemple, la première colonne a une couleur différente des deux autres: 
13 Enregistrez votre fichier au format HTML à nouveau, ouvrez-le dans le navigateur et vous pourrez voir votre projet prêt! Méthode One of Two:
Exemple
-
1 S'il vous plaît noter que ce n'est qu'un exemple simple qui vous montre comment cela fonctionne. Pour illustrer ce à quoi cela ressemble sur le site Web, nous avons inclus une capture d'écran de notre page Web contenant un tableau: -
2 L'affichage de la source de la page d'un site Web permet de voir et d'examiner le code qui le construit. Ci-dessous la capture d'écran d'une partie du code qui a formé le tableau ci-dessus. Il montre les trois premières rangées du tableau \ 9highlighted jaune sur la photo ci-dessus). - Vous pouvez remarquer certains éléments HTML que nous avons utilisés pour peaufiner notre table, mais il y en a d'autres… La table a également été conçue avec CSS (Cascading Style Sheets). En raison du formatage important et de la nécessité de répéter certaines actions plusieurs fois, le tableau de style avec CSS pourrait être un moyen plus rapide et plus simple. À propos de cela - la prochaine fois!
1 S'il vous plaît noter que ce n'est qu'un exemple simple qui vous montre comment cela fonctionne. Pour illustrer ce à quoi cela ressemble sur le site Web, nous avons inclus une capture d'écran de notre page Web contenant un tableau: 
2 L'affichage de la source de la page d'un site Web permet de voir et d'examiner le code qui le construit. Ci-dessous la capture d'écran d'une partie du code qui a formé le tableau ci-dessus. Il montre les trois premières rangées du tableau \ 9highlighted jaune sur la photo ci-dessus). Méthode deux sur deux:
Sources
Sovision - Conception du site Web Bristol
Facebook
Twitter
Google+