Gérer dispositions de table en HTML5

En HTML, tables rendent facile à exposer les données, le texte, et même des images dans une grille. Tables aider à rendre plus facile à présenter des données numériques (qui apparaît naturellement sous forme de tableau dans des tableurs et autres applications similaires).

Mais tables permettent aussi facile et pratique de présenter toutes sortes d'informations qui tombe naturellement en lignes et en colonnes, et pour aider à maximiser l'espace lors de l'introduction beaucoup de termes ou d'autres éléments qui pourraient perdre trop d'espace blanc se heurter à gauche ou à droite marges sur une page.

Si vous regardez les choses de la bonne façon, toutes les capacités et la complexité intéressante dans les tableaux HTML construire à partir de trois éléments de base:

• Borders: Chaque table de base a exactement quatre bords qui composent un rectangle.

• Cellules: Ce sont les zones individuelles pour les données, informations, images ou autre, à l'intérieur des frontières d'une table.

• 
  
  
  
  

  Cellule de vie: Dans la structure de quatre parois d'une table, vous pouvez ajouter ou supprimer des parois cellulaires (comme le montre avec les cellules sur le côté droit de la table dans la figure). Lorsque vous supprimez les parois cellulaires, vous faites une cellule empan plusieurs lignes ou colonnes - et qui est exactement ce que fait tableaux si flexible à accepter des ententes de cellules différentes et intéressantes.

  

Spanning cellule et la cellule de travail de largeur différente. Lorsque vous étendez cellules, vous modifiez l'espace de la cellule par la combinaison ou la fusion des cellules. Cette étape élimine les parois des cellules, pour ainsi dire. Lorsque vous réglez les dimensions d'une cellule, généralement en utilisant CSS largeur et hauteur contrôles, vous pouvez spécifier la quantité d'espace qu'ils occuperont.

Le tableau de la figure montre comment vous pouvez créer une disposition intéressante simplement en couvrant les cellules dans les rangées supérieures et inférieures (marqué 1 et 7), avec deux cellules de gauche (cellules 2 et 3) qui couvrent deux rangées, et trois cellules de droite (cellule 4 enjambant deux colonnes, et les cellules 5 et 6 côte à côte).

Laissant de côté les détails sur la façon de contrôler l'ensemble largeur de la table et de hauteurs et largeurs de cellules individuelles, voici ce que le code HTML de base pour une telle table ressemble:

nbsp-1nbsp-
nbsp-2nbsp-
nbsp-3nbsp-
nbsp-4nbsp-
nbsp-5nbsp-
nbsp-6nbsp-
nbsp-7nbsp-

Un examen attentif de ce dossier montre que les numéros inclus pour chacune des cases dans ce tableau, numérotées de 1 à 7, pour démontrer comment la table énonce. Comme vous développez vos propres structures de table, vous voudrez peut-être adopter une approche similaire de sorte que vous pouvez voir et de comprendre exactement ce que vous faites.

Essayez l'étiquetage des boîtes individuelles avec incrémentation des numéros de sorte que vous pouvez voir comment l'organisation se joue sur une page web.

Vous ne devez remplir votre table avec le contenu ou désordre réel autour largement à l'approche de dimensionnement que le fichier contient dans ses sections de style CSS. Comptez le nombre total de cellules à travers dans votre table, en ajouter une à ce numéro, puis multiplier le résultat par quatre em-largeurs pour obtenir la largeur du tableau (20em dans l'exemple).

Utilisation 4em que la largeur de la cellule dans les données de table () Les informations de style de l'élément, et vous êtes bon pour aller. Si vous gardez la largeur totale de table en synchronisation avec le nombre de cellules à travers, vous ne pouvez pas vous tromper!

Une fois que vous avez travaillé sur tous les replis de l'arrangement des cellules individuelles, vous pouvez commencer à peaufiner les attributs de style au contenu de votre coeur pour faire la table comme lisible et attractif que possible. Mais d'abord, vous aurez envie d'obtenir le droit d'arrangement. Après cela, tout le reste est window dressing.