La balise <table> est utilisée pour créer un tableau en HTML. Elle contient une série de balises <tr> (table row) qui représentent les lignes du tableau, et chaque ligne contient une série de balises <td> (table data) qui représentent les cellules du tableau. Il est également possible d'utiliser la balise <th> (table header) pour les en-têtes de colonnes ou de lignes.

Il est aussi d'usage d'utiliser la balise thead et tbody afin de mieux identifier l'entête d'un tableau et son contenu.

Voici une de tableau en HTML :

<style>
			  th{
           background: #adadad;
            padding:16px !important;
        }
        td{
            background: #e1e1e1;
            padding:16px !important;
        }
 
</style>

<table>
	<thead>
	  <tr>
	    <th>Nom</th>
	    <th>Type de viande</th>
	    <th>Echelle de piquance</th>
	  </tr>
	</thead>
	<tbody>
	  <tr>
	    <td>Bicky</td>
	    <td>Boeuf</td>
	    <td>1/10</td>
	  </tr>
	  <tr>
	    <td>Bicky fish</td>
	    <td>Poisson</td>
	    <td>1/10</td>
	  </tr>
	</tbody>
</table>

Notez qu’à l’instar d’un fichier Excel ou Google Sheet, il est possible de “fusionner” des cellules entre elles.

Ainsi, nous ajouterons un attribut “colspan” pour qu’un élément td ou th prenne plus ou moins de “cellules” en horizontal. Et “rowspan” sur l’axe vertical.

Exemple :

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

      <tr>
        <td colspan="2">Bicky qui prendra deux cellules</td>
        <td>Boeuf</td>
      </tr>
      <tr>
        <td>Bicky fish</td>
        <td colspan="2">Poisson</td>
      </tr>
</table>