This page has been robot translated, sorry for typos if any. Original content here.

Tables de construction

Tables de construction

Les tables dans le sens "original" de ce mot lors de la composition de pages Web sont bien sûr utilisées à des fins directes, mais pas aussi omniprésentes que celles utilisées pour la mise en page. Avec l'aide d'eux la page du site est divisée en plusieurs parties, où le nombre de pièces n'est pas limité. Avec leurs excellentes capacités de positionnement à un ami et un large choix de structuration - la manière de marquer des pages avec des tableaux fait aujourd'hui le meilleur outil pour le concepteur Web. Il y a deux autres façons de remplir les pages - en utilisant des outils de conception et en utilisant des cadres . Les premiers ayant des avantages en termes de facilité d'utilisation (les objets sont positionnés visuellement par l'utilisateur sans connaître le langage HTML) présentent un inconvénient important: ils ne créent des pages que pour une extension d'écran spécifique. Sur les autres extensions, la page aura l'air incorrecte. Avec les cadres, les choses sont encore pires - ils ne sont pas "vus" par les moteurs de recherche. Par conséquent, appliquez presque toujours la méthode tabulaire, et vous suggérez d'aborder ce sujet avec une attention particulière.

Tags de table

Il n'y a que quatre étiquettes pour créer des tableaux. Ils ont besoin de savoir par coeur :

  1. <TABLE> - indique qu'une table sera créée sur la page.
  2. <TR> - Forme une ligne dans la table.
  3. <TD> - forme la cellule de la table.
  4. <TH> - indique où l'en-tête sera dans la table.

L'étiquette d'ouverture et de fermeture est appelée le conteneur . Les conteneurs <TD> contenu des cellules </ TD> sont insérés dans les conteneurs <TR> ligne </ TR> (les deux peuvent être d'un nombre quelconque), ce dernier étant déjà dans la table <TABLE> dans son ensemble </ TABLE> . Si nécessaire, la balise <TD> devient <TH>. C'est aussi simple qu'une matriochka russe. Voici un exemple:

<TABLE> <TR> <TD> </ TD> <TD> </ TD> </ TR> <TR> <TD> </ TD> <TD> </ TD> </ TR> </ TABLE>

L'insertion d'une table dans une autre table est nécessaire dans le conteneur <TD> </ TD> et rien d'autre. Exemple:

.... une autre table .... <TD> <TABLE> table insérable </ TABLE> </ TD> .... une autre table ......

Dans le code HTML pour plus de commodité, nous devons écrire chaque balise à partir d'une nouvelle ligne. Mais si vous écrivez tout dans le formulaire ci-dessus, alors dans le navigateur, vous ne verrez rien. Le navigateur ne "voit" aucun paramètre de la table ou des tables. Ils sont spécifiés en utilisant des attributs avec leurs valeurs.

Les attributs de la balise <TABLE>

Les attributs de la balise <TABLE> sont nécessaires pour déterminer l'apparence de la table (dimensions, couleur, épaisseur des lignes), ainsi que l'emplacement de la table sur la page. Voici une liste d'entre eux:

  • WIDTH - largeur de la table (valeur en pixels ( px ) ou en pourcentage)
  • HEIGHT - la hauteur de la table (la valeur en pixels ( px ) ou en pourcentage)
  • ALIGN - alignement de la table sur la page (valeurs: gauche, droite, centre )
  • BORDER - l'épaisseur du cadre de la table (valeur en px, éventuellement - zéro (cadre invisible)
  • BORDERCOLOR - spécifie la couleur de la bordure de la table
  • BGCOLOR - couleur d'arrière-plan de la table
  • BACKGROUND - définit l'image d'arrière-plan de la table
  • CELLSPACING - distance entre les cellules de la table
  • CELLPADDING - la distance entre la limite de la cellule et le texte

Les attributs du <TD>

Les attributs des cellules de tableau ont les mêmes noms et dimensions des valeurs que les tables avec la seule différence que les deux derniers attributs de la liste (voir ci-dessus) ne s'appliquent pas, mais les attributs d'alignement vertical de VALIGN avec haut (haut), moyen (milieu) et botton (bas) et COLSPAN - la combinaison de cellules dans un groupe avec une valeur numérique égale au nombre de cellules à fusionner.

Les attributs de la balise <TR>

  • WIDTH - largeur de la ligne du tableau (valeurs en pixels ( px ))
  • HEIGHT - la hauteur de la ligne du tableau (valeurs en pixels ( px ))
  • RÈGLES - le type de lignes internes (valeurs - all , rows , cols , none ,
  • FRAME est l'apparence des lignes externes (les valeurs sont box (all), lhs (gauche), rhs (droite), above , below , vsides (gauche et droite), hsides (bottom et top), volid )
  • COLGROUP - la ligne de démarcation entre les groupes de cellules

Tous les attributs ci-dessus sur cette page doivent être ajoutés qu'ils n'ont pas besoin d'appliquer tout à la fois à n'importe quelle balise, vous augmenterez seulement la taille de la page. Ils sont appliqués au besoin.

Dans la construction des tables, il y a une autre balise <TBODY>. Il est destiné au regroupement d'éléments de table et est facultatif.

Maintenant, faisons une mise en page simple de la page pour fixer le matériel en utilisant la table. Ouvrez n'importe quel éditeur de texte. Si vous voulez, qu'il n'y ait pas de retraits sur les bords à la résolution de l'écran 800x600, alors dans la balise <BODY> écrivez:

<BODY leftmargin = "0" topmargin = "0" marginwidth = "0" marginheight = "0">

Ensuite, dans le conteneur <BODY> , tapez ce qui suit:
<TABLE largeur = "780" hauteur = "580" border = "0" align = "centre"
<TR> <TD colspan = 2 hauteur = "100" bgcolor = "rouge" align = "centre"> En-tête </ TD> </ TR>
<TR> <TD largeur = "200" bgcolor = "gris"> Menu </ TR> </ TD>
<TR> <TD largeur = "580"> Texte </ TR> </ TD> </ TABLE>
Enregistrez et regardez dans le navigateur dans différents modes d'expansion de l'écran.

Affectation

Dans la table compilée, expérimentez le texte, en l'alignant différemment par rapport aux différentes cellules et répétez la même chose, mais avec des tables.