'>

tout propos des Tableaux en HTML

 Les tableaux sont utilisés lorsque vous avez besoin de voir "des données tabulaires», c'est l'information qui est logiquement présenté en lignes et en colonnes.
Est-il difficile?

Construire des tableaux au format HTML peut à première vue sembler compliqué, mais si vous continuez à refroidir et Attention à la marche, il est en fait strictement logique - comme tout le reste en HTML.

Exemple 1:

    <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>

Ressemblera à ceci dans le navigateur:
Cellule 1     Cell 2
Cellule 3     Cell 4
Quelle est la différence entre <tr> et <td> ?

Comme vous pourrez le voir dans l'exemple ci-dessus, ce qui est probablement l'exemple le plus compliqué HTML que nous vous avons donné jusqu'ici. Nous allons décomposer et expliquer les différents mots-clés:

3 éléments différents sont utilisés pour insérer des tableaux:

    La balise ouverture <table> et la balise fermante </table> commence et se termine la table. Logique.
    <tr> signifie "t en mesure oe r" et commence et se termine rangées horizontales. Encore logique.
    <td> est l'abréviation de "t capable d ata". Cette balise commence et finit chaque cellule dans les lignes de votre table. Tout simple et logique.

Voici ce qui se passe dans l'exemple 1: la table commence par une <table> , suivie d'une <tr> , qui indique le début d'une nouvelle ligne. Deux cellules sont insérées dans cette ligne: <td> Cellule 1 </td> et <td> Cellule 2 </td> . La rangée se termine avec un </tr> et une nouvelle ligne <tr> commence immédiatement après. La nouvelle ligne contient également deux cellules. Le tableau est fermé avec </table> .

Juste pour préciser: les lignes sont des lignes horizontales de cellules et les colonnes sont des lignes verticales de cellules:
Cellule 1     Cell 2
Cellule 3     Cell 4

Cellule 1 et Cellule 2 forment une rangée. Cellule 1 et Cellule 3 forment une colonne.

Dans l'exemple ci-dessus, le tableau comporte deux lignes et deux colonnes. Toutefois, une table peut avoir un nombre illimité de lignes et de colonnes.

Exemple 2:

    <table> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> </tr> <tr> <td>Cell 9</td> <td>Cell 10</td> <td>Cell 11</td> <td>Cell 12</td> </tr> </table>
    <table> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> </tr> <tr> <td>Cell 9</td> <td>Cell 10</td> <td>Cell 11</td> <td>Cell 12</td> </tr> </table>

Ressemblera à ceci dans le navigateur:
Cellule 1     Cell 2     Cellule 3     Cell 4
Cellule 5     Cell 6     Mobile 7     8 cellules
9 cellules     La cellule 10     Cell 11     Cell 12
Y at-il des attributs?

Bien sûr il ya des attributs. Par exemple, l'attribut border est utilisé pour spécifier l'épaisseur de la bordure autour de votre table:

Exemple 3:

    <table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>
    <table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>

Ressemblera à ceci dans le navigateur:
Cellule 1     Cell 2
Cellule 3     Cell 4

L'épaisseur de la bordure est spécifiée en pixels ( voir la leçon 9 )

Comme pour les images, vous pouvez également définir la largeur d'une table en pixels - ou encore en pourcentage de l'écran:

Exemple 4:

    <table border="1" width="30%">
    <table border="1" width="30%">

Cet exemple sera affiché dans le navigateur comme une table avec la largeur de 30% de l'écran. Essayez vous-même.
Plus attributs?

Il ya beaucoup d'attributs pour les tables. Voici deux autres:

    align: spécifie l'alignement horizontal du contenu de la table entière, dans une ligne ou dans une seule cellule. Par exemple, à gauche, au centre ou à droite.
    valign: spécifie l'alignement vertical du contenu dans une cellule. Par exemple, en haut, au milieu ou en bas.

Exemple 5:

    <td align="right" valign="top">Cell 1</td>
    <td align="right" valign="top">Cell 1</td>

Que puis-je insérer dans mes tables?

Théoriquement, vous pouvez insérer quoi que ce soit dans les tableaux: du texte, des liens et des images ... mais les tables sont destinés à présenter des données tabulaires (à savoir des données qui peuvent être utilement présentées en colonnes et rangées) afin de s'abstenir de mettre les choses en tables simplement parce que vous voulez pour être placé à côté de l'autre.

Dans l'ancien temps sur l'Internet - c'est à dire il ya quelques années - tables étaient souvent utilisés comme un outil de mise en page. Mais si vous voulez contrôler la présentation des textes et des images il ya un moyen beaucoup plus frais pour le faire (indice: CSS). Mais plus sur cela plus tard.

Maintenant, mettez ce que vous venez d'apprendre à pratiquer et à concevoir un certain nombre de tables de différentes tailles, avec différents attributs et le contenu. Cela devrait vous tenir occupé pendant des heures.

Ce qui reste alors?

Les deux attributs colspan et rowspan sont utilisés lorsque vous souhaitez créer des tableaux de fantaisie.

Colspan est l'abréviation de «durée de colonne". Colspan est utilisé dans le <td> tag pour spécifier le nombre de colonnes de la cellule doit couvrir:

Exemple 1:

    <table border="1"> <tr> <td colspan="3">Cell 1</td> </tr> <tr> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>
    <table border="1"> <tr> <td colspan="3">Cell 1</td> </tr> <tr> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>

Ressemblera à ceci dans le navigateur:
Cellule 1
Cell 2     Cellule 3     Cell 4

En réglant colspan à "3", la cellule de la première rangée s'étend sur trois colonnes. Si nous avions mis en place colspan à "2", la cellule n'aurait duré deux colonnes et il aurait été nécessaire d'insérer une cellule supplémentaire dans la première rangée de sorte que le nombre de colonnes s'intégrera dans les deux rangées.

Exemple 2:

    <table border="1"> <tr> <td colspan="2">Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> </tr> </table>
    <table border="1"> <tr> <td colspan="2">Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> </tr> </table>

Ressemblera à ceci dans le navigateur:
Cellule 1     Cell 2
Cellule 3     Cell 4     Cellule 5
Qu'en est-il rowspan?

Comme vous peut-être déjà deviné, rowspan spécifie le nombre de lignes d'une cellule doit s'étendre sur:

Exemple 3:

    <table border="1"> <tr> <td rowspan="3">Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> </tr> </table>
    <table border="1"> <tr> <td rowspan="3">Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> </tr> </table>

Ressemblera à ceci dans le navigateur:
Cellule 1     Cell 2
Cellule 3
Cell 4

Dans l'exemple ci-dessus rowspan est réglé sur "3" dans la cellule 1. Ceci indique que la cellule doit s'étendre sur 3 rangées (sa propre ligne, plus un deux supplémentaires). Cellule 1 et Cellule 2 sont ainsi dans la même rangée, tandis que la cellule 3 et 4 cellules forment deux lignes indépendantes.

Confus? Eh bien, ce n'est pas simple et il est facile de perdre la trace. Par conséquent, il pourrait être une bonne idée pour attirer la table sur un morceau de papier avant de commencer avec le HTML.

Pas confondre? Alors allez-y et créer un couple de tables à la fois colspan et rowspan sur votre propre. 
Publié par Drupal Study