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

Construire des tables

Construire des tables

Les tableaux de la compréhension "originale" du mot lors de la préparation de pages Web sont bien sûr utilisés pour l'usage auquel ils sont destinés, mais pas aussi répandus qu'ils le sont pour la mise en page. Avec eux, la page du site est divisée en plusieurs parties, le nombre de parties n'étant pas limité. Outre leurs nombreuses options de positionnement pour les amis et un large choix de structures, le marquage des pages à l'aide de tableaux en fait le meilleur outil pour le concepteur Web d'aujourd'hui. Il existe deux autres moyens de remplir les pages: utiliser des constructeurs et des cadres . Les premiers avantages en termes de facilité d’utilisation (les objets sont positionnés visuellement par l’utilisateur sans connaissance du langage HTML) présentent un inconvénient majeur: ils créent des pages uniquement pour une extension d’écran spécifique. Sur d'autres extensions, la page semblera incorrecte. Les cadres sont encore pires - les moteurs de recherche ne les "voient" pas. Par conséquent, utilisez presque toujours la méthode tabulaire et nous vous suggérons d’aborder ce sujet avec une attention particulière.

Balises de table

Il existe quatre balises 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 une cellule dans la table.
  4. <TH> - indique où se trouve le titre dans la table.

La balise d'ouverture et de fermeture s'appelle un conteneur . Les conteneurs <TD> du contenu de la cellule </ TD> sont insérés dans la rangée <TR> du tableau des conteneurs < / TR> (les deux peuvent être n'importe quel nombre), cette dernière figure déjà dans la table <TABLE> dans son ensemble </ TABLE> . Si nécessaire, la balise <TD> est remplacée par <TH>. Tout est simple, comme la "poupée gigogne russe". Voici un exemple:

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

Vous devez insérer la table dans une autre table dans le conteneur <TD> </ TD> et rien d'autre. Exemple:

.... une autre table .... <TD> <TABLE> table en cours d'insertion </ TABLE> </ TD> .... une autre table ......

Pour plus de commodité, dans le code HTML, chaque balise doit être écrite à partir d'une nouvelle ligne. Mais si vous écrivez tout dans le formulaire ci-dessus, vous ne verrez rien dans le navigateur. Le navigateur ne "voit" aucune table ni aucun paramètre de table. Ils sont définis en utilisant des attributs avec leurs valeurs.

Attributs de la balise <TABLE>

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

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

Attributs de la balise <TD>

Les attributs de cellule de tableau ont les mêmes noms et les mêmes dimensions que les tableaux, à la différence que les deux derniers attributs de la liste (voir ci-dessus) ne leur sont pas applicables, mais que les attributs d'alignement vertical de la cellule VALIGN avec les valeurs top (top) et middle sont ajoutés. (middle) et botton (bottom) et COLSPAN - fusion de cellules dans un groupe avec une valeur numérique égale au nombre de cellules en cours de fusion.

Attributs de la balise <TR>

  • WIDTH - la largeur de la ligne du tableau (valeurs en pixels ( px ))
  • HEIGHT - la hauteur de la ligne du tableau (valeurs en pixels ( px ))
  • REGLES - type de lignes internes (valeurs - toutes (toutes)), lignes (horizontales), colonnes (verticales), aucune (aucune)
  • FRAME - type de lignes externes (valeurs - box (all), lhs (gauche), rhs (droite), dessus (haut), dessous (bas), vsides (gauche et droite), hides (bas et haut), volid (non )
  • COLGROUP - ligne de séparation entre des groupes de cellules

A tous les attributs ci-dessus sur cette page, vous devez ajouter qu'ils ne doivent pas nécessairement être appliqués en une seule fois à une balise, vous devez simplement augmenter la taille de la page. Ils sont utilisés au besoin.

Il existe une autre balise <TBODY> dans la construction des tables . Il est destiné à regrouper des éléments de table et est facultatif.

Faisons maintenant une mise en page simple en utilisant un tableau pour réparer le matériel. Ouvrez n'importe quel éditeur de texte. Si vous souhaitez éviter les retraits sur les bords avec une résolution d'écran de 800x600, dans la balise <BODY>, écrivez:

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

Ensuite, dans le conteneur <BODY> , tapez ce qui suit:
<TABLE width = "780" height = "580" border = "0" align = "center"
<TR> <TD colspan = 2 height = "100" bgcolor = "red" align = "center"> En-tête </ TD> </ TR>
<TR> <TD width = "200" bgcolor = "grey"> Menu </ TR> </ TD>
<TR> <TD width = "580"> Texte </ TR> </ TD> </ TABLE>
Enregistrez et regardez dans le navigateur sous différents modes d’extension d’écran.

Tâche:

Expérimentez dans le tableau avec le texte, en l'alignant différemment par rapport aux différentes cellules et répétez la même chose, mais avec les tableaux.