Galactic Civilizations 3
Programmer en html - Les tableaux

Programmer en html - Les tableaux

Catégorie: Javascript.
Posté par le 23/05/2014.
Dernière mise à jour le 28/05/2014.

<<Tutoriel précédent    Tutoriel suivant>>

Description

Dans ce tutoriel, vous apprendrez comment ajouter des tableaux dans votre page html.

Introduction

Ce tutoriel peut être réalisé à l'aide d'un simple éditeur de texte comme le « bloc notes ». Il ne nécessite aucun prérequis.

Les tableaux

Les tableaux simples

Si vous désirez afficher des données structurées sur vos page html vous pouvez les tableaux.

Un tableau est définit par l'élément « table » et celui-ci est composé de lignes et de colonnes.

  • L'élément « tr » définit une ligne de table.
  • L'élément « td » définit une cellule de données. Celles-ci doivent être placées dans les balises « tr », qui doivent être placées dans l'élément « table ».

Par exemple, imaginez un tableau de 3 lignes et 4 colonnes. Cela correspond à 12 cellules, il devrait donc y avoir trois éléments « tr » et quatre éléments « td » dans chacune des lignes, soit un total de 12 éléments « td ».

Voici un exemple de tableau:

<table>
    <tr>
        <td>
Colonne 1 - ligne 1</td>
        <td>
Colonne 2 - ligne 1</td>
    </tr>
    <tr>
        <td>
Colonne 1 - ligne 2</td>
        <td>
Colonne 2 - ligne 2</td>
    </tr>
</table>

Les tableaux avancés

Cellules d'en-tête

Afin de créer des tableaux complexe, l'html 5 à défini de nouvelle balise qui permet notamment d'identifier les entêtes de colonne. Une entête de colonne est représenté par la balise html « th ». Tout comme pour la balise « td », celle-ci se place à l'intérieur d'une balise « tr ».

<table>
    <tr>
        <th>
Titre de la Colonne</th>
    </tr>
    <tr>
        <td>
Cellule</td>
    </tr>
</table>

Fusionner les colonnes et les lignes

Pour fusionner des colonnes il vous suffit d'utiliser l'attribut « colspan » de l'élément « td »:

<table>
    <tr>
        <td
colspan="2">Cellule fusionnée</td>
    </tr>
    <tr>
        <td>
Cellule 1</td>
        <td>
Cellule 2</td>
    </tr>
</table>

L'attribut « rowspan » est similaire à « colspan », sauf que celui-ci permet de fusionner des lignes plutôt que des colonnes.

Voici un exemple complet utilisant les en-têtes et les fusions de ligne et de colonne:

<table>
    <tr>
        <th>
Colonne 1 titre</th>
        <th>
Colonne 2 titre</th>
        <th>
Colonne 3 titre</th>
    </tr>
    <tr>
        <td>
Colonne 1 - ligne 1</td>
        <td
colspan="2">Colonne 2 et 3 - ligne 1</td>
    </tr>
    <tr>
        <td
Row rowspan="2">Colonne 1 - ligne 2 et 3</td>
        <td>
Colonne 2 - ligne 2</td>
        <td>
Colonne 3 - ligne 2</td>
    </tr>
    <tr>
        <td>
Colonne 2 - ligne 3</td>
        <td>
Colonne 3 - ligne 3</td>
    </tr>
</table>

Tu as aimé ce tutoriel ?
Aide nous à améliorer le site ! Deviens partenaire officiel ou suis nous sur facebook !

<<Tutoriel précédent    Tutoriel suivant>>

Commentaires[0]

Tu as aimé ce tutoriel ? Alors partage-le avec tes amis !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo Voir le flux rss

Mots Clés: html HTML5 Programmer en html web

Veve :
(11/04/2013 - 17:19:44)
il faut juste mettre "sudo" à la place de "su" pour exécuter la commande en root

Veve :
(11/04/2013 - 17:18:56)
Salut tu peux aller lire ce tutoriel: http://www.tutorielsenfolie.com/tutoriels-63-installation-configuration-opennebula.html Il fonctionne aussi sous ubuntu

safa.souissi4 :
(10/04/2013 - 20:58:13)
s'il vous plait c urgent :(

safa.souissi4 :
(10/04/2013 - 20:56:25)
bonsoir,je cherche un tutos pour installer opennebula.org sous ubuntu 12.

Veve :
(18/03/2013 - 20:07:49)
oui, j'essaye de voir d'ou viens le problème.

sonde :
(18/03/2013 - 13:29:57)
re merci (j apprend un peu plus) je crois que j ai trouver pourquoi je peu pas poster si il y a ligne code impossible de poster lol

Veve :
(17/03/2013 - 21:34:49)
Salut, j'espère que ça t'a aidé.

sonde :
(17/03/2013 - 09:59:02)
pour ton aide

sonde :
(17/03/2013 - 09:57:36)
slt Veve impossible de laisser com

sonde :
(17/03/2013 - 09:56:55)
??

Demi-dieu :
(15/03/2013 - 18:41:13)
salut ^^

sonde :
(13/03/2013 - 14:49:35)
un petit coucou

Tanamoureuse :
(29/09/2011 - 06:11:08)
Je t'aime

Faire un don

Ma Publicité ici


Faire un don