Apprendre la programmation HTML et CSS #10 Tableaux HTML

Bienvenue cette 10e partie des tutoriels sur apprendre le HTML et le CSS pour les débutants. Aujourd’hui, nous allons voir à créer des tableaux en HTML. Avec les tableaux HTML, nous serons capables de faire plusieurs choses intéressantes. Par choses intéressantes, nous serons capables, par exemple, de créer une page produit qui afficherait des produits dans un tableau.

Avec les tableaux HTML, nous serons capables de faire beaucoup de choses. En fait, si tu remarques sur les sites web, la plupart vont être construites avec des tableaux, car c’est une façon simple d’arranger notre contenu. 

Alors aujourd’hui nous allons voir comment ajouter des tableaux HTML et avec du CSS.  

Version vidéo

Tu préfères la version vidéo ? Je t’invite à regarder ce tutoriel version vidéo sur la chaîne YouTube Informerick.

Créer un tableau HTML

En fait, créer des tableaux HTML sera super simple. Le seul problème, c’est le fait qu’il va y avoir des balises a ajouté, durant notre création de tableaux. 

C’est pourquoi, je veux prendre le temps de vous montrer chacune des balises pour créer un tableau qui va nous servir en HTML. Par la suite, je vais vous montrer comment faire un beau tableau qui pourrait être responsive, qui s’adapte à notre écran et qui pourrait y avoir des bordures, des espacements, etc.

Pour ajouter des tableaux en HTML, voici la balise de base qu’il va falloir ajouter:

<table>
</table>
<!-- Tout ce qui va se retrouver entre ces deux balises sera dans le tableau, c’est simplement pour définir le tableau –> 

Donc, voilà, tout ce qui se retrouvera entre ces 2 balises sera un tableau. Mais, nous n’avons pas encore défini de colonne ni de ligne. 

Nous allons voir comment ajouter notre première ligne, car avec nos tableaux HTML, nous allons fonctionner ligne par ligne. 

Alors voici ce que les balises pour les lignes et les colonnes:

<tr> </tr> <!-- Définit une ligne –>

<td> </td> <!-- Définit une colonne →

Voici à quoi ressemblerait un tableau:

<table>
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
        <td>Cellule 3</td>
    </tr>
    <tr>
        <td>Cellule 4</td>
        <td>Cellule 5</td>
        <td>Cellule 6</td>
    </tr>
    <tr>
        <td>Cellule 7</td>
        <td>Cellue 8</td>
        <td>Cellule 9</td>
    </tr>
</table>

Et donc notre code HTML, physiquement, ressemblerait à:

Ajouter des bordures a son tableau

Comme vous avez pu le voir avec l’image ci-dessus, nous n’avons pas de bordure de bordure avec notre tableau. Ce ne sera pas toujours le cas de que nous aurons besoin de bordures avec un tableau, car finalement nous n’aurons besoin que de la structuration que nous donne notre tableau.

Mais si vous voulez toujours ajouter des bordures à vos tableaux, voici ce que vous pouvez faire:

<table border=”1”>
</table>

Ici, nous ajoutons l’attribut border à notre tableau afin d’ajouter des bordures avec des bordures de la largeur des unités de mesure.

Vous pouvez aussi utiliser le CSS pour y parvenir. 

table, tr, td{
    border: 1px solid black;
}

Modifier la grosseur et l’espacement de son tableau

Bon, maintenant que nous avons ajouté notre tableau et que nous savons comment y ajouter des bordures. Avez-vous trouvé un autre problème? 

Effectivement! Il manque de définir la grosseur de notre tableau. Aussi, nous allons voir comment modifier l’espacement entre les cellules. 

Pour les définir la grosseur de notre tableau nous avons tout d’abord un attribut que nous pouvons y ajouter:

<table width=”500px” height=”500px”>
</table>

<!-- Le width est la largeur, donc 500 pixels de largeur notre tableau -->
<!-- Le height est la hauteur, ici de 500 pixels aussi -->

Mais nous pouvons aussi le faire pour autant avec le CSS:

table{
    width: 500px;
    height: 500px;
}

Après ceci, si vous voulez ajouter de la grosseur aux cellules de votre tableau, vous pouvez ajouter des padding à vos cellules eux-mêmes. 

<table cellpadding=”50px”>
</table>

<!-- Ici, le cellpading sont les marges intérieures des cellules de notre tableau, ce qui permet de définir de la hauteur à celui-ci –>

Et finalement, nous allons définir de l’espacement entre nos tableaux. 

<table cellspacing=”10px”>
</table>

<!-- Ici toutes mes cellules vont avoir 10 pixels d’Espacement entre eux –>

Fusion de cellules

Comme dans Excel, nous pourrons faire La fusion des cellules? Vous pouvez fusionner des cellules, autant sur la hauteur que sur la largeur. Nous pouvons aussi faire des cellules qui ont 3 de largeur où qui ont 3 de hauteur ou tout simplement les 2. 

Le seul point à retenir là-dedans, c’est que cela ne va pas fusionner de cellules, cela va créer une cellule qui fait la largeur demandée donc vous allez devoir à supprimer une dans votre colonne ou dans votre ligne ou sinon.

C’est que cela ne va pas fusionner de cellules, cela va créer une cellule qui fait la largeur et hauteur que nous avons demandé, donc vous allez devoir à supprimer une dans votre colonne ou dans votre ligne ou sinon voici comment:

Pour faire des cellules sur la largeur (horizontal), il faudra faire:

<td colspan=”2”>
</td>

<!-- Ici notre cellule va faire 2 colonnes de largeur –>

Et pour la fusion de cellules sur la hauteur (vertical):

<td rowspan=”3”>
</td>

<!-- Notre cellule va faire 3 lignes de hauteur –>

Les sections des tableaux

Bon, maintenant, nous avons vu tous les tableaux, ils nous manquent les sections de tableau.. En fait, vous connaissez les sections HTML de base, le virgule, le body et de Footer. Ce sera la même chose pour notre tableau. 

Nous pouvons séparer notre tableau en 3. 

Le header, le body et le footer. 

Voici les sections et comment vous pouvez disposer tout cela:

<thead>
</thead> <!-- En-tête de tableau –->

<tbody>
</tbody> <!-- Corps du tableau -->

<tfoot>
</tfoot> <!-- Pied de page du tableau -->

En fait, ces sections ne servent presque à rien, à part à définir comment quelles sections sont du contenu ou pas. Alors, ça vous permet, entre autres, de définir des titres à vos tableaux. Et de dire ce qui est le vrai contenu. 

FAQ

Ce tutoriel se trouve dans la catégorie: Programmation