Si vous définissez la largeur du tableau comme attribut. Comportement des cellules vides

crée une chaîne et la balise :

crée un en-tête de tableau, il se trouve à l'intérieur de la balise - immédiatement après la balise d'ouverture. L'en-tête par défaut est situé au-dessus du tableau et aligné en son centre.

Titre du tableau

1ère cellule de la 1ère ligne	2ème cellule de la 1ère ligne
1ère cellule de la 2ème rangée	2ème cellule de la 2ème rangée

Alignement des tableaux. Aligner le contenu des cellules

L'attribut align de la balise est utilisé pour aligner le tableau.

.

À l'aide de l'attribut align, vous pouvez placer le tableau à gauche ou à droite (align= "left" et align= "right" ) de la fenêtre du navigateur ( élément parent) ou en son centre (align="center" ).

Aligner le contenu des lignes ( étiqueter

) et les cellules ( étiqueter , la création d'une ligne de tableau n'a pas les attributs de hauteur et de largeur. La hauteur d'une rangée correspond à la hauteur des cellules qui s'y trouvent. Et la largeur de la ligne est égale à la largeur du tableau.

Les valeurs de hauteur et de largeur sont spécifiées en pixels ou en pourcentages par rapport à espace libre. Pour définir des valeurs :

Spécifiez un entier positif. Dans ce cas, la taille sera précisée en pixels ;

Spécifiez un entier positif suivi d'un symbole %.

Si le contenu d'un tableau ou d'une cellule dépasse les dimensions spécifiées, ils seront ignorés par le navigateur et de nouvelles dimensions seront automatiquement sélectionnées en fonction des dimensions du contenu.

) horizontalement et en déterminant son emplacement - au-dessus ou en dessous de la table.

Par défaut, le contenu des cellules est aligné horizontalement à gauche et verticalement au centre.

Hauteur et largeur du tableau et des cellules

Tailles par défaut ( hauteur et largeur) les tableaux et les cellules changent en fonction de la taille de leur contenu.

Mais la hauteur et la largeur du tableau et de ses cellules individuelles peuvent être définies explicitement - en utilisant respectivement les attributs height et width.

Étiqueter

) horizontalement se fait également à l'aide de l'attribut align, et verticalement à l'aide de l'attribut valign : L'attribut align accepte les valeurs left , right , center et justifié , qui spécifient l'alignement du contenu des lignes et des cellules à leur gauche, droite, centre et largeur, respectivement ; L'attribut valign, qui prend les valeurs top , bottom et middle , spécifie l'alignement du contenu des lignes et des cellules le long de leurs bords supérieur, inférieur et central, respectivement. L'attribut align sert également à aligner l'en-tête ( étiqueter

>

Comme le montre l'exemple : en précisant la largeur d'une des cellules d'une colonne, vous précisez ainsi la largeur de la colonne entière ; et en spécifiant la hauteur de l'une des cellules d'une ligne, vous spécifiez la hauteur de la ligne entière.

Bordures de tableaux et de cellules

Le tableau et chacune de ses cellules ont leurs propres bordures, qui ne sont pas visibles par défaut.

attribut de balise de bordure

vous permet de rendre visibles les bordures et de définir leur épaisseur. Cela affichera des bordures autour du tableau et autour de chaque cellule.

Épaisseur de la bordure ( ou des cadres) est spécifié en pixels. La valeur de l'attribut border est un entier positif. Si l'attribut border est spécifié sans valeur, l'épaisseur de la bordure sera de 1 pixel.

L'épaisseur de la bordure est définie uniquement pour le tableau. L'épaisseur de la bordure autour des cellules est toujours de 1 pixel ( ou manquant).

Par défaut, la bordure apparaît avec un effet 3D et est noire.

L'attribut bordercolor spécifie la couleur de la bordure et élimine l'effet 3D. L'attribut peut être utilisé pour définir la couleur de la bordure du tableau ( étiqueter

), les chaînes ( étiqueter ) ou des cellules ( étiqueter - ligne de tableau html
- colonne (cellule) d'un tableau html.

Essayons maintenant de combiner toutes les balises dans un seul tableau. Pour ce faire, nous allons créer un tableau html composé de deux lignes et trois colonnes :

Ce tableau HTML est très simple à réaliser. Tout d'abord, mettons les balises du tableau lui-même, à l'intérieur desquelles nous plaçons le nombre de lignes requis (dans notre exemple, 2 lignes) :

). L'attribut bordercolor n'est pas pris en charge par tous les navigateurs et n'est donc pas recommandé. Pour définir la couleur de la bordure, il est préférable d'utiliser des styles ( c'est déjà en CSS). L'attribut border n'est pas spécifié. Il n’y a donc pas de frontières. L'épaisseur de la bordure du tableau est de 3 pixels. Les cellules ont des bordures de 1 pixel ! Affichage des bordures partielles La bordure du tableau et la bordure autour des cellules peuvent être partiellement affichées. Attribut de balise de cadre spécifie où dessiner la bordure du tableau. L'attribut Rules spécifie comment afficher les bordures des cellules. Cadre "500px" ="hsides" règles = "cols" > Installé horizontal bordures de tableau ET les bordures s'affichent entre les colonnes Rembourrage à l'intérieur et à l'extérieur des cellules Lors du formatage de tableaux en HTML, pour une représentation visuelle de certaines informations et leur perception pratique, il peut être nécessaire utilisation utile rembourrage à l'intérieur et à l'extérieur des cellules. Le remplissage interne - depuis les bordures des cellules jusqu'à leur contenu, est défini par l'attribut cellpadding de la balise . Remplissages externes - la distance entre les bordures des cellules adjacentes et la distance entre les bordures des cellules et la bordure du tableau sont définies par l'attribut Cellpacing de la balise. . Les entiers sont spécifiés comme valeurs d'attribut nombres positifs, qui spécifient la distance en pixels. Distance du contenu des cellules à leurs frontières est de 10 pixels Distance entre les cellules et depuis les cellules à la bordure du tableau est de 25 pixels Fusionner des cellules Lors de la conception et du formatage de tableaux en HTML, vous devez souvent fusionner des cellules adjacentes. Et si un tel besoin s'en fait sentir, vous devez alors utiliser les attributs colspan et rowspan de la balise	. L'attribut colspan spécifie le nombre de cellules qui seront fusionnées horizontalement et l'attribut rowspan spécifie le nombre de cellules qui seront fusionnées verticalement. Les deux attributs ont du sens si le tableau se compose de plusieurs lignes. 1 2 3 4 1 2 3 4 Fond de tableau. Fond de cellule de tableau En HTML, il est possible de définir un arrière-plan général pour l'ensemble du tableau et un arrière-plan pour une seule cellule sélectionnée. Attribut de balise d'arrière-plan spécifie l'image qui sera l'image d'arrière-plan du tableau. La valeur de l'attribut spécifie l'adresse du fichier image - chemin absolu ou relatif vers le fichier (). attribut de balise bgcolor définit la couleur d'arrière-plan du tableau. La couleur peut être définie de deux manières () En utilisant les mêmes attributs, vous pouvez définir l'image et la couleur d'arrière-plan de n'importe quelle cellule du tableau ( étiqueter , Et . N'importe lequel d'entre eux peut être utilisé pour modifier certaines propriétés d'une ou plusieurs lignes du tableau : il s'agit à nouveau d'aligner le contenu des cellules dans les lignes horizontalement et verticalement - en utilisant aligner les attributs et valign respectivement ; et définir la couleur d'arrière-plan des cellules à l'aide de l'attribut bgcolor. Lorsque vous utilisez ces balises, vous devez être conscient de plusieurs nuances qui déterminent les différences entre elles. Balises Et doit être placé avant le tag , immédiatement après la balise d'ouverture du tableau ). Le rose foncé est la couleur de fond du tableau. L’image de fond d’une cellule individuelle est le ciel ! Rappelons également l'existence de l'attribut cols de la balise , qui indique au navigateur le nombre de colonnes dans le tableau. L'utilisation de l'attribut cols permet au navigateur d'afficher plus rapidement le contenu du tableau. Modification d'un tableau Dans cette section, nous examinerons les balises utilisées lors de la modification de plusieurs éléments de tableau à la fois. Ces balises peuvent être divisées en deux groupes. Le premier groupe comprend des balises Et . Ils sont presque identiques et servent à définir certaines propriétés et à modifier les caractéristiques d'une ou plusieurs colonnes du tableau. L'une de ces balises est placée immédiatement après la balise . Disons que c'est une balise . Utiliser l'attribut span d'une balise indiquer le nombre de colonnes auxquelles les attributs align, valign ou width seront appliqués ( aligner le contenu des cellules de colonne horizontalement, verticalement ou définir la largeur des colonnes). Si l'attribut span est dans la balise est manquant, alors les caractéristiques de l'une d'elles - la première colonne du tableau - seront modifiées. La deuxième fois que vous utilisez le tag les propriétés sont définies pour les éléments suivants ( suivant - si l'attribut span est manquant) colonnes du tableau, etc. "2" largeur ="70px" > 1 2 3 4 5 1 2 3 4 5 Le deuxième groupe de balises comprend également des balises presque identiques les unes aux autres. . Chaînes placées dans la balise sont présentés en haut du tableau et les lignes sont entourées de la balise sera situé au bas du tableau. Les deux balises ne peuvent être appliquées qu’une seule fois dans le même tableau. Étiqueter peut être utilisé plusieurs fois dans une balise . "à droite" bgcolor="#00FF33" > 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 1. Que sont les tableaux HTML et pourquoi sont-ils nécessaires ? tableaux HTML- c'est l'un des composants les plus fondamentaux de chaque page HTML et, par conséquent, de chaque site. Par exemple, l'ensemble du site est constitué de tableaux : images, textes, liens, formulaires d'inscription - tout est placé les uns par rapport aux autres à l'aide de tableaux html (en fait, l'ensemble du site se trouve également dans un grand tableau). 2. Quelles balises ont les tableaux HTML ? Balises, définissant la table html s'écrit comme ceci : Mais comme nous savons que tous les tableaux sont constitués de lignes et de colonnes (cellules), nous devons également leur définir des balises :

Ensuite, nous divisons chaque ligne en cellules à l'aide de balises de colonne :

- cellule 1.1
- cellule 1.2
- cellule 1.3


- cellule 2.1
- cellule 2.2
- cellule 2.3

En fait, le premier chiffre des inscriptions est le numéro de ligne et le second est le numéro de cellule (1x2 - première ligne, deuxième cellule, etc.).

3. Comment définir la couleur de fond des tableaux html ?

Voyons maintenant comment définir l'arrière-plan du tableau ou de chaque cellule séparément.

Donc, pour définir l'arrière-plan, l'attribut est utilisé bgcolor="couleur_fond".

Par exemple, si nous devons définir une couleur pour l'ensemble du panneau, nous le faisons comme ceci :

bgcolor="couleur_fond">

- cellule 1.1
- cellule 1.2
- cellule 1.3


- cellule 2.1
- cellule 2.2
- cellule 2.3

Par exemple, si vous devez faire un signe jaune, alors on écrit :

Si nécessaire définir la couleur d'arrière-plan de la ligne table html, puis l'attribut bgcolor="couleur_fond" appliquer à la balise

Nous devons définir la largeur du tableau, mais parfois nous devons modifier la largeur du tableau. Et nous devons le comprendre. Comment puis-je modifier la largeur du tableau ? La largeur du tableau peut être modifiée en pixels ou en pourcentages... Nous allons maintenant commencer à changer la largeur du tableau en html ! La dernière fois, nous avons créé un tableau de 500 pixels de large, avec trois colonnes et trois lignes (rappelez-vous l'attribut border="1 - qui est responsable de la bordure) ! Voici le code de cette table ; Maintenant, afin de comprendre comment modifier la largeur d'un tableau ou d'une colonne, modifions et ajoutons quelques chiffres à notre code. largeur de la table="500" – passer à 599. Cette page est construite sur des tableaux et sur la largeur du champ de texte, c'est-à-dire où se trouvent ces mots est de 600 pixels. Nous obtiendrons : Faisons la largeur de la colonne n°2 à 200 pixels : Faisons en sorte que la largeur de la colonne n°3 soit de 299 pixels : Et on obtient ce code : Regardons notre tableau Maintenant, modifions la valeur de l'attribut width en moitié = 50 %. Nous regardons notre tableau, qui est de 50 %. C'est tout ce que je voulais vous dire sur la façon de modifier la largeur des tableaux. Passons maintenant à la hauteur de table ! informe le navigateur que le tableau est terminé. Tout tableau est constitué de colonnes et de lignes. Étiqueter
cellule d'affilée. Par conséquent, plus il y a de cellules dans une ligne, plus il y aura de colonnes dans le tableau. Étiqueter	crée également une cellule. Sa différence avec un tag	est-ce que la cellule créée par la balise	est une cellule d'en-tête : son contenu est centré, et s'il s'agit de texte, le navigateur l'affiche en gras. Contenu de la cellule créée par la balise	par défaut, il est situé sur son côté gauche. Étiqueter

bgcolor="#FFFF00"> bgcolor="#0000FF"> 1.1 1.2 1.3 2.1 2.2 2.3

1.1	1.2	1.3
2.1	2.2	2.3

Dans ce cas, l'attribut numéro de portable ensembles blanc texte situé à l’intérieur de la balise.

Exactement de la même manière qu'il est spécifié couleur de chaque cellule séparément. Par exemple, si vous souhaitez changer la couleur de la cellule 1.2 en bleu, alors à l'intérieur de la balise d'ouverture attribut bgcolor="couleur_fond":

4. Comment définir la taille de la largeur et de la hauteur des cellules du tableau HTML ?

Ainsi, afin de définir manuellement la largeur et la hauteur des cellules, utilisez les attributs height et width. Ils peuvent être définis pour l'ensemble du tableau, pour une ligne ou pour une cellule (colonne). La hauteur et la largeur peuvent être spécifiées en pixels ou en pourcentages. Dans notre cas, nous définirons la largeur et la hauteur en pixels des colonnes (cellules).

hauteur- attribut qui définit la hauteur de la cellule

largeur- attribut qui spécifie la largeur de la cellule

Et maintenant un exemple :

Je vais maintenant vous expliquer pourquoi nous définissons la hauteur des cellules une seule fois dans chaque ligne.

Si, dans une ligne, vous définissez une hauteur pour une cellule supérieure à celle des autres, alors, malgré cela, toutes les cellules (colonnes) de votre ligne seront égales en hauteur à la plus grande. Et il est préférable de régler la largeur de chaque rangée séparément !

Vous pouvez définir la hauteur et la largeur de l'ensemble du tableau. Dans ce cas, toutes les cellules (colonnes) et lignes diviseront l'espace qui leur est attribué de manière égale, si vous ne leur définissez pas personnellement ces paramètres (en pourcentage de la largeur (hauteur) totale du tableau ou en pixels).

De plus, très souvent, vous devez définir la hauteur et la largeur de la largeur. en pourcentage:

contenu des cellules

Si nous définissons la largeur d'une cellule à 40 pour cent, comme dans notre exemple, cela signifie qu'il nous reste encore 60 pour cent pour les cellules restantes, c'est-à-dire la somme de leurs largeurs ne doit pas dépasser 60 pour cent. Tout est très simple : au total nous n'en avons que 100 %. On compte : 100 – 40 = 60.

5. Comment aligner le texte dans un tableau HTML ?

Voyons maintenant comment aligner le texte de notre tableau HTML à gauche, à droite et au centre.

Cela se fait en utilisant l'attribut :

align = "gauche"- aligne le texte à l'intérieur du tableau html vers la gauche

align = "centre"- aligne texte HTML tableaux centrés

align = "droite"- aligne le texte à l'intérieur du tableau HTML vers la droite

En conséquence, l'attribut align peut également prendre les valeurs droite et gauche. La signification de justifier lorsqu'il est utilisé avec une balise l'attribut align ne peut pas être accepté.

Par exemple, code HTML un tableau avec du texte aligné au centre ressemble à ceci :

aligner="centre"> aligner="gauche"> 1x1 aligner="centre">1.2 aligner="droite"> 1x3 aligner="gauche">2.1 aligner="centre"> 2x2 aligner="droite">2.3

En enregistrant l'attribut aligner="centre"à l'ouverture

, nous avons aligné le tableau html au centre de la page du navigateur.

Voici le résultat que vous obtiendrez dans le navigateur :

1x1	1.2	1x3
2.1	2x2	2.3

Voyons maintenant un exemple de la façon d'aligner le texte à l'intérieur d'un tableau HTML le long du bord supérieur ou inférieur, c'est-à-dire comment vous pouvez vous assurer que le contenu d'une cellule n'est pas seulement situé exactement au milieu de celle-ci (comme par défaut ), mais aussi en haut ou en bas.

L'alignement vertical est spécifié par l'attribut :

valign="haut"- le contenu sera situé en haut de la cellule

valign="milieu"- le contenu sera situé au centre de la cellule

valign="bas"- le contenu sera situé en bas de la cellule

Examinons ces attributs à l'aide de notre exemple :

valign="haut"> 1x1 1.2 valign="haut"> 1x3 valign="bas">2.1 2x2 valign="bas">2.3

Voici ce que l'on obtient si l'on regarde le résultat des attributs dans le navigateur : aligner Et valider:

1x1	1.2	1x3
2.1	2x2	2.3

6. Comment combiner les cellules et les colonnes d'un tableau html ?

Dans cette partie de notre article, nous parlerons des attributs colpan Et envergure.

colpan- détermine le nombre de colonnes couvertes par une cellule donnée

envergure- détermine le nombre de lignes auxquelles s'étend cette cellule

Valeurs colpan Et envergure peut prendre une valeur de 2 ou plus, c'est-à-dire une cellule peut s'étendre sur deux ou plusieurs colonnes (lignes).

Donc, maintenant, en utilisant l'exemple, nous allons étendre une cellule 1x1 en deux colonnes (cellules). Pour ce faire, nous utiliserons l'attribut colspan="2", en l'attribuant à une cellule 1x1. Le code ressemblera à ceci :

Comme nous pouvons le voir, la cellule 1x1 s’étend sur la longueur de deux cellules. En conséquence, sa longueur est égale à la longueur additionnée de ces deux cellules (160 pixels). Nous n'avons pas spécifié d'attribut de largeur pour la cellule 1x1, mais si nous décidions de le faire, nous définirions la largeur sur 160 pixels. Et aussi, veuillez noter que dans notre exemple, il n'y a pas de cellule 1x3, c'est-à-dire il n'y a que deux cellules dans la première ligne, pourquoi - nous en avons déjà discuté - une cellule 1x1 est égale à deux cellules, grâce à l'attribut colspan.

Les attributs colspan et rowspan doivent être traités avec beaucoup de soin. Une erreur peut provoquer le crash de votre site.

Et maintenant que nous comprenons le paramètre colspan, regardons le paramètre rowspan. Le principe de fonctionnement est le même :

colspan="2"> 1.1 1.2 2.1 2.2

1.1		1.2
2.1	2.2

Ainsi, nous avons appris à combiner des cellules en lignes et colonnes de tableaux HTML.

7. Comment supprimer, ajouter ou modifier des retraits et comment définir un cadre pour un tableau HTML ?

Ainsi, plus tôt, nous avons créé un tableau HTML, les retraits entre les cellules sont clairement visibles. Pour les rendre encore mieux visibles, ajoutons un cadre pour notre table. Cela se fait à l'aide d'attributs :

border="largeur de la bordure en pixels"- définit la largeur du cadre

bordercolor="couleur de la bordure"- définit la couleur du cadre

Donnons par exemple à notre tableau html un cadre noir de 1 pixel de large.

Pour cette balise

ajouter des attributs :

Nous pouvons maintenant voir clairement les retraits entre les cellules du tableau HTML et les retraits depuis les bords intérieurs des cellules jusqu'au texte. Nous pouvons donc gérer ces indentations sans aucun problème. Les attributs sont à cet effet :

cellpacing="largeur de l'espace en pixels"- espace entre les cellules

cellpadding="largeur de remplissage en pixels"- indentation à l'intérieur de la cellule (du bord de la cellule jusqu'au texte, image, lien...)

Par exemple, faisons en sorte que le retrait entre les cellules soit de 10 pixels et augmentons le retrait du bord de la cellule jusqu'au texte à 20 pixels. Cela se fait comme ceci :

cellpadding="20"espacement des cellules="10"> 1.1 1.2 2.1 2.2

Si on regarde le résultat dans le navigateur, on voit clairement que la distance entre les cellules ( espacement des cellules) de notre tableau html est passé à 10 pixels, et la distance entre le texte et bord intérieur les cellules ont augmenté de 20 pixels.

1.1		1.2
2.1	2.2

Si vous devez supprimer complètement les retraits, mettez simplement rembourrage de cellules="0" Et espacement des cellules="0".

8. Comment insérer un tableau HTML dans un autre ?

Nous approchons de la dernière étape de l'étude des tableaux HTML. Nous allons maintenant apprendre à insérer un tableau dans un autre.

En utilisant l'exemple, à l'intérieur de la cellule 1.2, nous insérerons un nouveau tableau composé d'une ligne et de deux colonnes. Dans le tableau HTML interne, nous définirons une bordure rouge d'une largeur de 2 pixels et une distance entre les cellules de 0 pixel. Nous placerons également le tableau interne en haut de la cellule.

Cela se fait très simplement :

1.1 3.1 3.2 2.1 2.2

C'est ce qui s'est passé suite aux nouvelles transformations de notre tableau (les cellules rouges sont un tableau interne situé à l'intérieur d'un grand tableau) :

1.1		3.1 3.2
2.1	2.2

À ce stade, nous terminerons cet article. Je pense que cela s'est avéré réussi et pas difficile à comprendre, et j'espère que vous n'aurez plus de problèmes avec les tableaux.

La spécification CSS offre des possibilités illimitées pour concevoir des tableaux. Par défaut, le tableau et les cellules du tableau n'ont pas limites visibles et l'arrière-plan, tandis que les cellules à l'intérieur du tableau ne sont pas adjacentes les unes aux autres.

La largeur des cellules du tableau est déterminée par la largeur de leur contenu, la largeur des colonnes du tableau peut donc varier. La hauteur de toutes les cellules d’une rangée est la même et est déterminée par la hauteur de la cellule la plus haute.

Formatage des tableaux

1. Bordures de tableau

Par défaut, le tableau et les cellules qu'il contient sont affichés dans le navigateur sans bordures visibles. Bordures de tableau sont spécifiés par la propriété border :

Tableau ( border-collapse: collapse; /*supprimer les espaces vides entre les cellules*/ border: 1px solid gray; /*set pour le tableau frontière extérieure gris 1px d'épaisseur*/ )

Bordures des cellules d'en-tête chaque colonne est spécifiée pour le ème élément :

Th (bordure : 1px gris uni ;)

Bordures de cellules les corps de table sont spécifiés pour l'élément td :

Td (bordure : 1px gris uni ;)

L'épaisseur des bordures des cellules adjacentes n'est pas doublée, vous pouvez donc définir les bordures pour l'ensemble du tableau de la manière suivante :

Th, td (bordure : 1px gris uni ;)

Vous pouvez mettre en valeur la bordure extérieure d'un tableau en lui donnant une largeur accrue :

Tableau (bordure : 3 px, gris uni ;)

Les limites peuvent être définies partiellement :

/* définit une bordure extérieure grise de 3px d'épaisseur pour le tableau */ table (border-top : 3px solid gray; ) /* définit une bordure grise de 1px d'épaisseur pour la cellule du corps du tableau */ td (border-bottom : 1px solid gris;)

Vous pouvez en savoir plus sur la propriété frontalière.

2. Comment définir la largeur et la hauteur de la table

Défaut largeur et hauteur de la table déterminé par le contenu de ses cellules. Si la largeur n'est pas précisée, elle sera alors égale à la largeur de la ligne (rangée) la plus large.

Largeur du tableau et des colonnes est défini à l’aide de la propriété width. Si table (width: 100%;) est spécifié pour un tableau, alors la largeur du tableau sera égale à la largeur du bloc conteneur dans lequel il se trouve.

La largeur du tableau et des colonnes est généralement spécifiée en px ou en %, par exemple :

Tableau (largeur : 600 px ;) th (largeur : 20 % ;) td :premier enfant (largeur : 30 % ;)

Hauteur de la table non spécifié. Hauteur de rangée les tableaux peuvent être manipulés en ajoutant un remplissage supérieur et inférieur aux éléments Et . Il n'est pas recommandé de fixer la hauteur à l'aide de la propriété height.

Th, td (rembourrage : 10px 15px ;)

3. Comment définir l'arrière-plan du tableau

Défaut fond de tableau et les cellules sont transparentes. Si la page ou le bloc contenant le tableau a un arrière-plan, celui-ci apparaîtra à travers le tableau. Si l'arrière-plan est spécifié à la fois pour le tableau et pour les cellules, alors aux endroits où l'arrière-plan du tableau et des cellules se chevauchent, seul l'arrière-plan des cellules sera visible. L'arrière-plan du tableau dans son ensemble et de ses cellules peut être :
remplissage,
,
.

4. Colonnes du tableau

Le modèle de table CSS se concentre principalement sur les lignes (lignes) formées à l'aide de la balise

. Dans la pratique, il existe des cas où un formatage spécial des colonnes est nécessaire, ce qui est possible des manières suivantes :

en utilisant la balise

Vous pouvez définir l'arrière-plan d'un nombre illimité de colonnes ;

en utilisant le sélecteur table td:first-child , table td:last-child vous pouvez définir des styles pour la première ou la dernière colonne du tableau (sauf pour la première cellule de l'en-tête du tableau) ;

À l'aide du sélecteur de tableau td:nth-child (règle de sélection de colonne), vous pouvez définir des styles pour n'importe quelle colonne du tableau.

Vous pouvez en savoir plus sur les sélecteurs CSS.

5. Comment ajouter un titre de tableau

Vous pouvez ajouter un titre à un tableau à l'aide d'une balise , et en utilisant la propriété caption-side, il peut être placé devant ou en dessous du tableau. Pour aligner horizontalement le texte du titre, utilisez la propriété text-align. Hérité.

...

Tableau n°1

Entreprise	T1	T2	T3	T4

légende (côté légende : bas ; alignement du texte : droite ; remplissage : 10px 0 ; taille de police : 14px ; ) Riz. 2. Exemple d'affichage d'un en-tête sous un tableau

6. Comment supprimer l'espace entre les cadres de cellules

Par défaut, les cadres de cellules du tableau sont séparés par un petit espace. Si vous définissez border-collapse: collapsus pour le tableau, l'espace sera supprimé. La propriété est héritée.

Syntaxe

Tableau (border-collapse : collapse ;)
Riz. 3. Exemple de tableaux avec des cadres de cellules fusionnés et séparés

7. Comment augmenter l'espace entre les cadres de cellules

À l'aide de la propriété border-spacing, vous pouvez modifier la distance entre les cadres de cellules. Cette propriété s'applique à la table dans son ensemble. Hérité.

Syntaxe

Tableau (border-collapse : séparé ; border-spacing : 10px 20px ;) tableau (border-collapse : séparé ; border-spacing : 10px ;)
Riz. 4. Exemple de tableaux avec des espaces accrus entre les cadres de cellules

8. Comment masquer les cellules vides du tableau

La propriété empty-cells masque ou affiche les cellules vides. Affecte uniquement les cellules qui ne contiennent aucun contenu. Si une cellule est définie sur un arrière-plan et qu'un tableau est défini sur table (border-collapse:effondrement;) , alors la cellule ne sera pas masquée. Hérité.

Entreprise	T1	T2	T3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

tableau ( bordure : 1px solide #69c ; bordure-collapse : séparé ; cellules vides : masquer ; ) th, td (bordure : 2px solide #69c ;) Riz. 5. Exemple de masquage d'une cellule de tableau vide

9. Disposez un tableau à l'aide de la propriété table-layout

La disposition du tableau est déterminée par l'une des deux approches suivantes : disposition fixe ou disposition automatique. Sous la mise en page dans dans ce cas fait référence à la façon dont la largeur du tableau est répartie entre les largeurs des cellules. La propriété n'est pas héritée.

Syntaxe

Tableau (mise en page de la table : fixe ;)

10. Meilleures dispositions de table

1. Minimalisme horizontal

Les tableaux horizontaux sont des tableaux dans lesquels le texte est lu horizontalement. Chaque entité est une ligne distincte. Vous pouvez donner à des tableaux comme celui-ci un aspect minimaliste en plaçant une bordure de deux pixels sous l'en-tête.

Employé	Salaire	Prime	Superviseur
Stephen C. Cox	$300	$50	Bob
Joséphine Tan	$150	-	Annie
Joyce Ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

table (famille de polices : "Lucida Sans Unicode", "Lucida Grande", Sans-Serif ; taille de police : 14 px ; arrière-plan : blanc ; largeur maximale : 70 % ; largeur : 70 % ; border-collapse : réduire ; texte -align: left; ) th ( police-weight: normal; couleur: #039; border-bottom: 2px solid #6678b1; padding: 10px 8px; ) td ( couleur: #669; padding: 9px 8px; transition : .3s linéaire; ) tr:hover td (couleur : #6699ff ;)

Lorsqu’il y a un grand nombre de lignes, cette conception de tableau rend leur lecture difficile. Pour résoudre ce problème, vous pouvez ajouter une bordure d'un pixel sous tous les éléments td.

Td ( border-bottom : 1px solid #ccc ; couleur : #669 ; remplissage : 9px 8px ; transition : .3s linéaire; )/*le reste du code est comme dans l'exemple ci-dessus*/

L'ajout d'un effet :hover à l'élément tr rendra les tableaux conçus dans un style minimaliste plus faciles à lire. Lorsque vous passez votre souris sur une cellule, les cellules restantes de la même ligne sont mises en surbrillance simultanément, ce qui facilite le suivi des informations si les tableaux comportent plusieurs colonnes.

Th ( poids de police : normal ; couleur : #039 ; remplissage : 10px 15px ; ) td ( couleur : #669 ; bordure supérieure : 1px solide #e8edff ; remplissage : 10px 15px ; ) tr:hover td (arrière-plan : #e8edff ;)

2. Minimalisme vertical

Bien que de tels tableaux soient rarement utilisés, les tableaux orientés verticalement sont utiles pour catégoriser ou comparer les descriptions d'objets représentés par une colonne. Vous pouvez les concevoir dans un style minimaliste en ajoutant un espace pour séparer les colonnes.

Th ( poids de la police : normal ; bordure inférieure : 2px solide #6678b1 ; bordure droite : 30 px solide #fff ; bordure gauche : 30px solide #fff ; couleur : #039 ; remplissage : 8px 2px; ) td ( border- droite : 30px solide #fff ; bordure gauche : 30px solide #fff ; couleur : #669 remplissage : 12px 2px )

3. Style en boîte

Le style le plus fiable pour concevoir des tables de tous types est le style dit « en boîte ». Il suffit d'en choisir un bon jeu de couleurs, puis définissez la couleur d’arrière-plan de toutes les cellules. N'oubliez pas de souligner la différence entre les lignes en définissant des bordures comme séparateur.

Th ( taille de police : 13 px ; poids de police : normal ; arrière-plan : #b9c9fe ; bordure supérieure : 4 px solide #aabcfe ; bordure inférieure : 1 px solide #fff ; couleur : #039 ; remplissage : 8 px ; ) td ( arrière-plan : #e8edff; bordure inférieure : 1 px solide #fff ; bordure supérieure : 1 px solide transparent ;

Le plus difficile est de trouver la palette de couleurs qui se mariera harmonieusement avec votre site internet. Si le site est lourd en graphisme et en design, il vous sera alors assez difficile d'utiliser ce style.

Tableau (famille de polices : "Lucida Sans Unicode", "Lucida Grande", Sans-Serif ; taille de police : 14 px ; largeur maximale : 70 % ; largeur : 70 % ; alignement du texte : centre ; réduction de la bordure : réduire ; bordure supérieure : 7 px solide #9baff1 ; bordure inférieure : 7 px solide #9baff1 ; taille de police : 13 px ; solide #9baff1 ; couleur : #039 ; remplissage : 8px ; ) td ( arrière-plan : #e8edff ; bordure droite : 1px solide #aabcfe ; bordure gauche : 1px solide #aabcfe ; couleur : #669 ; remplissage : 8px ; )

4. Zèbre horizontal

La table zébrée est très attrayante et confortable. Couleur supplémentaire L’arrière-plan peut servir de repère visuel aux personnes qui lisent le tableau.

Th ( poids de police : normal ; couleur : #039 ; remplissage : 10px 15px ; ) td ( couleur : #669 ; bordure supérieure : 1px solide #e8edff ; remplissage : 10px 15px ; ) tr:nth-child(2n) ( arrière-plan : #e8edff ;)

5. Style de journal

Pour obtenir ce qu'on appelle l'effet journal, vous pouvez appliquer des bordures aux éléments du tableau et jouer avec les cellules à l'intérieur. Un style de journal léger et minimaliste pourrait ressembler à ceci : jouez avec la palette de couleurs, ajoutez des bordures, un remplissage, des arrière-plans différents et un effet de survol lorsque vous survolez une ligne.

Tableau (bordure : 1px solide #69c ;) th ( poids de police : normal ; couleur : #039 ; bordure inférieure : 1px pointillé #69c ; remplissage : 12px 17px; ) td ( couleur : #669 ; remplissage : 7px 17px ; ) tr:hover td (arrière-plan : #ccddff;)

Tableau (bordure : 1px solide #69c ;) th (police-weight : normal ; couleur : #039 ; remplissage : 10px; ) td ( couleur : #669 ; bordure supérieure : 1px pointillé #fff ; remplissage : 10px ; arrière-plan : #ccddff; ) tr:hover td (arrière-plan : #99bcff;)

Tableau (bordure : 1px solide #6cf ;) th (police-weight : normal ; taille de police : 13px ; couleur : #039 ; transformation du texte : majuscules ; bordure droite : 1px solide #0865c2 ; bordure supérieure : 1px solide #0865c2 ; bordure gauche : 1px solide #0865c2 ; bordure inférieure : 1px solide #fff ;

6. Contexte du tableau

Si vous recherchez un service rapide et manière unique conception de la table, sélectionnez une image ou une photo attrayante liée au thème de la table et définissez-la comme arrière-plan de la table.

Png") 98 % 86 % sans répétition ; ) th ( poids de la police : normal ; taille de la police : 14 px ; couleur : #339 ; remplissage : 10 px 12 px ; arrière-plan : blanc ; ) td ( couleur : #669 ; bordure- haut : 1px blanc uni ; arrière-plan : rgba(51, 51, 153, .2); tr:hover td ( arrière-plan : rgba(51, 51, 153, .1); )

Les dimensions du tableau, sa hauteur et sa largeur, sont déterminées automatiquement en fonction de ce que contiennent les cellules à l'intérieur. Plus les cellules contiennent de contenu, plus la taille du tableau est grande et vice versa.

Cependant, les fonctionnalités CSS vous permettent de redimensionner un tableau en HTML en spécifiant exactement la largeur et la hauteur dont vous avez besoin. Pour être honnête, il convient de noter que les attributs de table vous permettent également de définir tailles requises. Cependant, pour l’instant nous ne parlerons que du CSS.

Il faut souligner que chaque tableau a sa propre largeur minimale et sa propre hauteur minimale, qui dépendent de son contenu. Et même si vous définissez les valeurs de largeur et de hauteur encore plus petites, rien ne se passera. Les côtés de la table ne dépasseront pas leur minimum.

Pour spécifier la largeur du tableau, vous devez utiliser une propriété CSS largeur, et pour définir la hauteur, vous devez utiliser la propriété hauteur.

Dans un exemple, cela ressemble à ceci.

Tableau ( largeur : 500px ; hauteur : 100px ; )

Résultat dans le navigateur :

Code complet :

Tableau avec les tailles données

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Les valeurs de largeur et de hauteur du tableau peuvent être spécifiées comme valeur absolue(en pixels) et relatif - en pourcentage. Par exemple, 20px et 20 % respectivement.

Si vous utilisez des pourcentages pour définir les dimensions du tableau, ils seront calculés en fonction des dimensions de l'élément parent. Si nous parlons de notre exemple, alors nous parlons deà propos de la fenêtre du navigateur.

Il y a une autre signification - auto. Et c'est spécial car avec son aide, la largeur et la hauteur du tableau sont calculées automatiquement, par défaut. En pratique, spécifier cette valeur ressemble à ceci.

Largeur : automatique ;

Hauteur : automatique ;

Nous aimerions attirer votre attention sur une chose supplémentaire : point important. Il est préférable de ne pas indiquer la hauteur en pourcentage, car, en règle générale, dans ce cas, ils ne fonctionneront pas.

Spécification des tailles de cellules et de colonnes individuelles

Si vous pensez que le navigateur n'a pas défini correctement la largeur des colonnes en fonction du contenu des cellules, vous avez le droit de spécifier vous-même la taille des cellules et des colonnes. Et maintenant, nous allons parler de la façon de modifier la taille des cellules dans un tableau HTML.

Le redimensionnement des cellules s'effectue en utilisant les mêmes propriétés CSS que les tailles des tableaux, à savoir : largeur Et hauteur.

Pour ajouter des styles aux cellules, vous pouvez utiliser l'une des deux options suivantes :

1. Donnez aux cellules des noms de classe individuels. Cela ressemblera à ceci : class="cell-50px"

   Et après cela, vous devez appliquer des styles pour ces classes.

2. Activer l'attribut style, à l'intérieur duquel écrivez le code CSS nécessaire.

En pratique, la deuxième option ressemblera à ceci :

...

Nous tenons toutefois à souligner qu'il n'est pas nécessaire de modifier très souvent la taille des cellules individuellement. En règle générale, cela est effectué dans les situations où il est nécessaire de définir une certaine largeur pour les colonnes du tableau. Dans ce cas, le problème est résolu plus facilement. Il vous suffit de préciser la largeur des cellules de la première ligne.

Tableau avec les tailles données

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Résultat dans le navigateur :

Comment changer la taille de la police dans un tableau

Il est souvent nécessaire de modifier la taille du texte dans un tableau. Par exemple, dans les cellules d'en-tête. Cela peut être fait en utilisant une propriété CSS taille de police. Définissons la taille de la police des éléments :

Th (taille de police : 30 px ; )

Ceci conclut cette leçon. Je vous suggère de bien réfléchir à vos devoirs. Étudiez-le attentivement et réfléchissez-y. Bonne chance à tous !

 

---

Lire:
Pourquoi rêvez-vous d'une tempête sur les vagues de la mer ? Comptabilisation des règlements avec le budget Cheesecakes au fromage cottage dans une poêle - recettes classiques de cheesecakes moelleux Gâteaux au fromage à partir de 500 g de fromage cottage Salade de perles noires aux pruneaux Salade de perles noires aux pruneaux Recettes de lecho à la pâte de tomate