Insérer des tableaux

Très important dans la conception d'une page. Nous avons utilisé pour mettre n'importe quel élément dans une place particulière dans le document. Ils peuvent mettre les bords ou les cacher si nous n'aimons pas à voir. Plus tard, avec des styles, nous avons même rendre les bords ressembler à un élément décoratif, mais une table. Nous pouvons mettre une couleur unie, ou d'arrière-plan. Mais finalement avec eux, nous voulons faire de la conception, car, comme nous le verrons, nous permettra de mettre à un certain point tout élément.

Ouvrez un nouveau document et enregistrez-le avec des tables de noms. Rappelez-vous le rêve ajoute l'extension, nous avons décidé (htm ou html) Nous devons ressembler à:

tablas.htm

Une autre chose ... maintenant habituer à aller à chaque fois quelque chose de insertéis. Juste au cas où ok?

Dans l'inspecteur Propriétés appliquer une couleur de fond à la page. Et nous allons insérer un tableau Insérer / Tableau:

img 1

Il fera apparaître une boîte de dialogue comme ceci:

img2

, (Horizontales) el ancho en % , (También en píxeles) El borde y grosor , el relleno de celdas , que sera el espacio que va a quedar entre lo que insertemos en la tabla y su borde, el espacio entre las celdas y los encabezados, que ya tendrán un predeterminado estilo que aplicarán al contenido. Dans ce document, nous pouvons définir le nombre de lignes, (vertical) Colonnes, (horizontal) de largeur en% (également en pixels) et d'épaisseur de bord, marge intérieure des cellules, qui sera l'espace sera entre ce que nous insérons dans la table et son bord, l'espace entre les cellules et en-têtes, qui ont un style par défaut appliquée au contenu.

, 80% de ancho, grosor de borde 0 , si no ponemos nada en relleno y espacio, por defecto el Dreamweaver, pondrá dos píxeles. Nous mettrons 4 lignes, 6 colonnes, 80% de largeur, l'épaisseur des frontières, 0, si nous ne remplissons pas quoi que ce soit dans l'espace et, par défaut de Dreamweaver mettra deux pixels. Pour ne pas mettre n'importe quoi, nous devrions mettre 0. Aucune nouvelle.

Ressemble à ceci:

img 3
Dans l'inspecteur des propriétés peut le changer complètement. Mais voyons maintenant ce que nous disons dans ce tableau que nous venons inséré. Placez le curseur dans une cellule.

Et voir une série de lignes et les numéros de la définition de la table. Dans le centre, on voit une flèche avec le bouton gauche de la souris, cliquez dessus et nous allons voir un sous-menu où vous pouvez le sélectionner.

img 4

Maintenant, nous sommes sûrs que la table sélectionnée, voir l'inspecteur des propriétés:

img 5

: Ou où nous sommes situés dans l'espace de la table sont les balises html, nous voyons juste au-dessus des propriétés:

6 img

Des balises HTML pour prendre en compte.
<body> (du corps, le corps) se réfère à l'ensemble du document, nous voyons dans le navigateur.
<table> (tableau de, table) à la table entière.
<tr> (à partir de ligne de la table, ligne de la table) à la ligne où le curseur
<td> (à partir de données de table ou d'une table de données) à la cellule.

En outre, nous notons que le <td> étiquette est cochée, cela nous dit-il, où le curseur et que si vous insérez un élément, restera là où placé.

Nous allons le centre de la table dans le document, cliquez sur le <table> étiquette:

7 img

y elegimos Centro dans l'inspecteur des propriétés d'alignement et nous avons choisi Centre

8 img

La table est placée au centre du document:

img 9

On ajoute les valeurs indiquées par le cliquet (Tableau ;)

10

píxeles de borde con el color #000066 para éste borde. 5 pixeles de separación entre los bordes de las celdas y el texto, o imagen que insertemos luego en ellas. Nous blanc (# FFFFFF) au fond de la table. 3 pixels de bord avec la couleur # 000066 pour ce bord. 5 pixels de séparation entre les bordures des cellules et le texte ou les images que nous les insérer ensuite. Et de 2 pixels, la séparation entre les cellules.

11

y columnas : Ces valeurs, nous avons pris le tableau Maintenant, pour faire des lignes et des colonnes:

Le premier permet d'insérer un texte:

12

Ne vous inquiétez pas si nous voyons que cette colonne est plus large aujourd'hui, quand nous insérer du texte dans l'autre. va ressembler avant

* Remarque: En fait, il se creusera en termes de ce que nous insérer dans les cellules, considérées comme la colonne de lundi, est plus étroite que le mercredi ;) De même pourrait mettre ... une valeur fixe à chaque colonne, comme le montre une capture d'écran ci-dessous.

Plus tard, plus sur la largeur des tables et des colonnes ;)

13

, sin tener que tocar la tabla o celdas con el cursor. Pour vous déplacer entre les colonnes, nous utilisons les touches fléchées du clavier, sans avoir à toucher la table ou des cellules avec le curseur. Plus rapide et plus certaine que nous ne changeons rien à toutes les valeurs qui ont cette table. Maintenant, sélectionnez la première colonne:

14

Inspecteur des propriétés:
15

Taille de la police: 14 points, blancs.
Alignement: Centre.
La largeur de colonne fixe: 50 pixels
Couleur de fond de la colonne: # CC3300

(Notez que le haut de la colonne, a montré le nombre de pixels que maintenant nous avons assigné 50)

16

Le résultat:

17

: Maintenant, sélectionnez la première ligne, placez le curseur dans la première cellule:

18

cliquez sur la balise html, <tr>

19

Ligne entière est sélectionnée ci-dessus:

20

Inspecteur des propriétés:

21

et nous avons donc:

22

La prochaine Institut se poursuivra avec les tables et peut-être, s'il n'est pas trop longtemps, nous allons voir quelques liens.

Comme nous n'avons pas inséré de nouvelles images ou d'objets autres que la langue htm, nous ne ressuscitera la page index.htm, écrasant celle que nous avons ci-dessus.

Veréisque nous avons maintenant un document avec un autre nom qui n'est pas le chemin index.htm ce nouveau document .. la gravité de la suivante, ou nous ne pouvions pas voir toute façon ..... sauf avec un lien, mais nous n'y sommes pas encore ;) nous avons donc mis tous les chemin d'accès complet : P

http://web-design.shalanastylo.com/tablas.htm

Répondre