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, où le nombre de parties n'est pas limité. Outre ses nombreuses options de positionnement pour les amis et son 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 de la facilité d'utilisation (les objets sont visuellement positionnés par l'utilisateur sans connaître le 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. Avec les cadres, les choses 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> de cellules de contenu </ TD> sont insérés dans la rangée de conteneurs <TR> </ TR> (les deux peuvent être autant que vous le souhaitez), cette dernière à son tour 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é, en code HTML, vous devez écrire chaque balise à 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" aucun paramètre de la ou des tables. 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 - 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 dimensions de valeurs 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 cellule de 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 fusionnées.

Attributs de la balise <TR>

  • WIDTH - largeur de la ligne du tableau (valeurs en pixels ( px ))
  • HEIGHT - 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

Vous devez ajouter à tous les attributs ci-dessus sur cette page 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.

Dans la construction des tables, il existe une autre balise <TBODY>. 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ériau. 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 à différentes cellules et répétez la même chose, mais avec les tableaux.