TABLE

Syntaxe

Paramètres

Description

Cette balise permet de définir un tableau. On entend par tableau, une surface avec un regroupement de cellules rectangulaires répartir en deux dimensions : horizontalement et verticalement.

Remarques

• Si vous souhaitez avoir un tableau avec des coins ronds (ou des coins arrondis) sans utiliser d'images, vous devriez utiliser la propriété du CSS3 «border-radius» (supporté à partir Firefox 3.6+, Chrome 9+ et IE9+). Dans le cas de IE6, IE7 et IE8, vous devrez utiliser des alternatives comme CSS3Pie ou DD_roundies (soit un fichier JavaScript Roundies.js) de Drew Diller (http://www.dillerdesign.com/experiment/DD_roundies/). Finalement, si aucune de ces solutions ne correspond à vos besoins, la plupart du temps, les moteurs de recherche ne tiennent pas compte du JavaScript et de l'utilisation d'un document.write par exemple.
• Tableau modifiable : Si vous souhaitez rendre dynamique un tableau ou si vous préférez qu'il soit modifiable comme une grille de données, vous devrez envisager d'utiliser des plugin basé sur jQuery comme «appendGrid» de l'auteur Albert L. de Hong-Kong.
• Trier un tableau par colonne : Si vous souhaitez effectuer des tri par colonne d'un tableau comme le ferait par exemple une application Excel, vous devrez envisager d'utiliser des plugins comme TinySort de Ron Valstar ou «tablesorter» de Christian Bach.
• On ne devrait pas utiliser cette balise en dehors de sa fonctionnalité première, c'est à dire afficher des tableaux de données.
• Tous les navigateurs supportent la possibilité de mettre un tableau à l'intérieur d'un tableau, ainsi cette méthode d'affichage se révèle souvent la seule solution pour afficher correctement des infolettres envoyées par courriel pour des clients de messageries.
• Il est possible d'inclure une balise «CAPTION» à l'intérieur d'une balise «TABLE», laquelle se révèle une technique simple pour donner un titre à un tableau.
• On devrait utiliser la balise THEAD et TH pour indiquer une cellule d'entête de tableau car la plupart des traitements de texte comprennent correctement qu'il s'agit d'un titre d'un tableau et la réafficheront après un saut de page.
• Conflit : Dans la plupart des navigateurs, le paramètre «style» est prioritaire sur le paramètre «class» ou «id». Ainsi, si vous définissez aux deux endroits, des valeurs différentes, par exemple «style="color:red;"» et «color:green» dans la classe, c'est le paramètre «style» avec son «color:red» qui sera utilisé par le navigateur Web. Il est à noter qu'il est préférable de ne pas mettre des informations contradictoires comme celle-ci (deux paramètres identiques avec des valeurs différentes) car le résultat peut malgré tout demeurer imprévisible.
• Ancienne pratiques : Au début du HTML, la bande passante était très limitée, par exemple, le modem avec un taux de transfert de quelques centaines d'octets par secondes. Le chargement des pages était très lent, et pour accélérer le processus beaucoup de développeurs enlevaient délibérément les guillemets «"» au paramètre de leur balise afin de réduire la taille de leur page HTML. Par la suite, à cause des résultats souvent imprévisible que cela causait par à un IE versus les autres navigateurs, les idées de la norme du w3c se sont imposées et le retour des guillemets au paramètres de balises est revenue.
• Les paramètres peuvent être indiqué dans l'ordre que vous le souhaitez. Il n'existe pas d'obligation de les mettre dans un ordre précis pour les navigateurs Web.
• TABLE HEIGHT=100% et bar en bas : Avant l'arrivée du CSS2, il n'était pas possible de positionner une barre d'information dans le bas de la page sans utiliser une balise «TABLE» avec le paramètre «HEIGHT="100%"», cependant, à partir du CSS2, on peut utiliser la propriété «bottom» lequel permet avec la feuille de style suivante de résoudre le problème : «position:fixed;bottom:0;».

Exemples

Voici un exemple montrant comment afficher un tableau avec une bordure  :

Voici le résultat affiché :

Voici un exemple montrant comment afficher un tableau avec des coins arrondis si vous supportez les CSS3  :

Voici le résultat affiché :

Références

HTML - The Definitive Guide, 3rd Edition, Edition O'Reilly, Chuck Musciano, Bill Kennedy, 1998, ISBN: 1-56592-492-4, page 527