tables de construction

tables de construction

Les tableaux dans le sens «originel» du mot lors de l'élaboration Web-pages de cours utilisés pour leur but direct, mais pas partout où ils sont utilisés pour la mise en page. Avec eux, la page du site est divisé en plusieurs parties, où le nombre de pièces ne se limite pas. Avec leur grand potentiel pour positionner drgug autres et un large choix de structuration - une façon de marquer les pages de tableaux fait le meilleur à l'outil de date pour les concepteurs Web. Il y a eu deux façons de remplir les pages - en utilisant un logiciel-designers et utilisant des cadres. Première présentant des avantages en termes de facilité d'utilisation (les objets utilisateur sont positionnés visuellement sans connaissance de HTML) présentent un inconvénient important - ils créent une page juste pour une extension spécifique de l'écran. Sur les autres extensions de la page apparaît correctement. Avec cadres pires choses - ils ne "voient" pas les moteurs de recherche. Par conséquent, utiliser presque toujours la table de méthode et vous offrir à aborder ce sujet avec une attention particulière.

Mots-clefs tables

Tag pour produire un total de quatre tables. Ils doivent connaître par cœur:

  1. <TABLE> - indique que la table sera établie sur la page.
  2. <TR> - forme une ligne dans la table.
  3. <TD> - forme une cellule dans le tableau.
  4. <TH> - spécifie où le tableau sera le titre.

La balise d'ouverture et de fermeture est appelé un conteneur. Contenants <TD> contenu de la cellule </ TD> est inséré dans des conteneurs <TR> ligne de tableau </ TR> (et l'autre peut être un nombre quelconque), ce dernier, à son tour, déjà dans le <TABLE> Table dans son ensemble </ TABLE>. Si nécessaire, la balise <TD> changements à <TH>. Tout simplement, comme la «poupée gigogne russe". Voici un exemple:

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

Insérez une table dans une autre table devrait être dans un conteneur <TD> </ TD> et rien d' autre. exemple:

.... Une autre table .... <TD> <TABLE> tables d'insertion </ TABLE> </ TD> .... une autre table ......

Dans le code HTML pour la facilité nécessaire d'écrire chaque étiquette sur une nouvelle ligne. Mais si vous écrivez tout d'une manière qui est indiqué ci-dessus, dans le navigateur, vous ne verrez rien. Browser ne "voit" pas de paramètres de la table ou des tables. Ils sont spécifiés par les valeurs de leurs attributs.

Les attributs de la balise <table>

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

  • WIDTH - la largeur de la table (valeur en pixels (px) ou en pourcentage)
  • HAUTEUR - table de hauteur (valeur en pixels (px) ou en pourcentage)
  • ALIGN - aligner le tableau de la page (valeurs: gauche, droite, centre)
  • La frontière - l'épaisseur du cadre de la table (valeur en px, peut - être - zéro (trame invisible)
  • BORDERCOLOR - détermine la couleur du cadre de la table
  • couleur de fond de tableau - BGCOLOR
  • CONTEXTE - définit l'image d'arrière - plan de table
  • CELLSPACING - la distance entre les cellules du tableau
  • CELLPADDING - la distance entre la limite de la cellule et le texte

Les attributs de la balise <TD>

Les attributs des cellules du tableau ont le même nom et les valeurs mesurées comme une table avec la seule différence qu'il ne vaut pas pour les deux derniers attributs sur la liste (sm. Ci - dessus), mais les attributs sont ajoutés aligner verticalement les valeurs des cellules avec VALIGN haut ( en haut), milieu ( au milieu) et le botton ( en bas) et COLSPAN - l'union d'un groupe de cellules avec une valeur numérique égale au nombre de cellules fusionnées.

Les attributs de la balise <TR>

  • WIDTH - la largeur des lignes du tableau (valeurs en pixels (px))
  • HAUTEUR - hauteur de la ligne dans le tableau (valeurs en pixels (px))
  • RÈGLES - nature Extension (valeurs - tous (toutes), lignes (horizontal), cols (vertical), aucun (none)
  • FRAME - type de lignes externes (valeurs - boîte (tous), lhs ( à gauche), rhs ( à droite), au- dessus ( en haut), ci - dessous ( en bas), vsides (gauche et droite), hsides (inférieur et supérieur), volid (pas )
  • COLGROUP - la ligne de démarcation entre les groupes de cellules

Pour tous les attributs ci-dessus sur cette page doivent être ajoutés qu'ils ne devraient pas être utilisés à la fois à une balise, vous augmentez seulement le volume de cette page. ils sont utilisés selon les besoins.

La construction des tables il y a une autre balise <TBODY>. Il est destiné à la table des éléments et des groupes est facultative.

Maintenant, nous allons consolider le matériau va produire une mise en page simple à l'aide des tables. Ouvrez un éditeur de texte. Si vous voulez éviter les retraits de bords de l'écran à une résolution de 800x600, la balise <BODY> écriture:

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

En outre, dans le conteneur <BODY>, tapez ce qui suit:
<Table width = "780" height = frontière "580" = "0" align = "center"
<TR> <TD colspan = 2 height = "100" bgcolor = "red" align = "center"> Titre </ TD> </ TR>
<TR> <td width = "200" bgcolor = "gray"> Menu </ TR> </ TD>
<TR> <TD width = "580"> text </ TR> </ TD> </ TABLE>
Enregistrer et vérifier dans le navigateur dans différents modes d'expansion de l'écran.

Tâche:

L'expérience de tabulation avec le texte, en l'alignant différemment par rapport à des cellules différentes et répéter la même chose, mais avec les tables.