L’ élément HTML de type block table permet de créer des tableaux.
Il est utilisé avec les éléments tr pour les lignes et td pour les colonnes.

<table>
<tr>
<td>Lorem ipsum dolor sit amet,</td>
<td>Suspendisse pharetra placerat felis</td>
<td>Mauris id nunc ac quam sollicitudin varius.</td>
</tr>
</table>

Attributs

Attribut : class

Permet de spécifier la classe css à utiliser sur le tableau.

Exemple

HTML
<table class="tableau">
<tr>
<td>Lorem ipsum dolor sit amet,</td>
<td>Suspendisse pharetra placerat felis</td>
<td>Mauris id nunc ac quam sollicitudin varius.</td>
</tr>
<tr>
<td>Mauris eget erat vitae purus lacinia egestas.</td>
<td>Proin nibh nisl, dictum vitae lacinia quis,</td>
<td>consectetur congue elit.</td>
</tr>
</table>
CSS
.tableau{
background-color:chocolate;
border:1px solid black;
}
.tableau tr td{
border:1px solid black;
}
Lorem ipsum dolor sit amet, Suspendisse pharetra placerat felis Mauris id nunc ac quam sollicitudin varius.
Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis,

consectetur congue elit.

Attribut : id

Permet de spécifier l’identifiant css à utiliser sur le corps de la page HTML.

Exemple

HTML
<table id="tableau">
<tr>
<td>Lorem ipsum dolor sit amet,</td>
<td>Suspendisse pharetra placerat felis</td>
<td>Mauris id nunc ac quam sollicitudin varius.</td>
</tr>
<tr>
<td>Mauris eget erat vitae purus lacinia egestas.</td>
<td>Proin nibh nisl, dictum vitae lacinia quis,
<td>consectetur congue elit.</td>
</tr>
</table>
CSS
#tableau{
font-weight:bolder;
background-color:yellow;
border:1px solid black;
}
.tableau tr td{
border:1px solid black;
}
Lorem ipsum dolor sit amet, Suspendisse pharetra placerat felis Mauris id nunc ac quam sollicitudin varius.
Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis,

consectetur congue elit.

Attribut : title

Permet de mettre une infobulle sur le tableau.

Exemple

HTML
<table title="tableau">
<tr>
<td>Lorem ipsum dolor sit amet,</td>
<td>Suspendisse pharetra placerat felis</td>
<td>Mauris id nunc ac quam sollicitudin varius.</td>
</tr>
</table>
Lorem ipsum dolor sit amet, Suspendisse pharetra placerat felis Mauris id nunc ac quam sollicitudin varius.

Attribut : dir

Permet de spécifier le sens d’écriture du texte. Elle prend 2 valeurs :
- ltr : Left To Right : de gauche à droite(valeur par défaut).
- rtl : Right To Left : de droite à gauche.

Exemple

HTML
<table dir="rtl">
<tr>
<td> فصل وجهان واُسدل بمباركة بـ. بها عل أعلنت</td>
<td>ويعزى الحروب مع دون, عام كل قررت تسمّى الشتوية.</td>
<td>الى حاملات الأمريكي، قد, معركة المدنيون بـ أخر.</td>
</tr>
</table>
فصل وجهان واُسدل بمباركة بـ. بها عل أعلنت ويعزى الحروب مع دون, عام كل قررت تسمّى الشتوية. الى حاملات الأمريكي، قد, معركة المدنيون بـ أخر.

Attribut : style

Permet d’appliquer un style au tableau directement dans le html, sans avoir besoin d’une feuille de style.

Exemple

HTML
<table style="border:1px solid black;">
<tr>
<td style="border:1px solid black;">Lorem ipsum dolor sit amet,</td>
<td style="border:1px solid black;">Suspendisse pharetra placerat felis</td>
<td style="border:1px solid black;">Mauris id nunc ac quam sollicitudin varius.</td>
</tr>
</table>
Lorem ipsum dolor sit amet, Suspendisse pharetra placerat felis Mauris id nunc ac quam sollicitudin varius.

Attribut : lang

Permet de spécifier la langue à l’intérieur du tableau.

Exemple

HTML
<table lang="en">
<tr>
<td>Where is Brian?</td>
<td>He is in the kitchen</td>
<td>He can't cook, what is he doing there?</td>
</tr>
</table>
Where is Brian? He is in the kitchen He can’t cook, what is he doing there?