Cookies acceptés.
bouton pour découvrir notre choix
bouton de redirection: haut
bouton de redirection: home
bouton de redirection: bas
bouton de redirection: explication des cookies
Création de sites web 3 D.   Webmaster, webdesign - Conseil.

Votre site web 3D, ... pour une autonomie.

Un espace francophone artisanal et pédagogique.
Logo de LigneWeb

la communication web
... JavaScript indispensable ... code utf-8 ... -  © design : LigneWeb

- Site expérimental en XHTML 1.0 et CSS 2.0 avec CSS 3.0 -


 •   Plan du site 
Avec des cours et des conseils.
  Notre Blog :  La ligne papyrus 
 Menu HTML 5  - Cours 1  - Cours 2  - Cours 3  - Cours 4  - Cours 5  - Cours 6  - Cours 7  - Cours 8  - Cours 9 
 Menu cours 9 HTML 5  - balise table  - border-cellspacing  - tr et td  - th  - colspan  - rowspan  / exemple 



Cours 9 HTML 5 avec LigneWeb
les tableaux.



 © LigneWeb  ... /HTML 5 : les tableaux
© design : LigneWeb
© : alain jean deligne - LigneWeb



Cette page est réalisée en XHTML 1.0 transitionnel avec du CSS 2 et du CSS 3 ...
Cette page va être réalisée en parallèlle en HTML 5 et CSS 3 prochainement ...



Le logo de LigneWeb

Les tableaux en HTML 5


Suivez-nous.








Remarque : ... en CSS2 et CSS3 ... :

pour cette page et non visible ... :
le fichier ...  ligne21.css  ... qui mélange du CSS 2 avec du CSS 3 ...
... et ceci grâce aux sélecteurs spécifiques ... expliqués au ...  Cours CSS 3 




Un tableau simple.

La balise table :

... qui ne connait les tableaux et leur utilité ? ...
... il est également possible de réaliser des tableaux complexes ...
... pour dire au navigateur que débute un tableau, on va utiliser la balise ... table ... avec ...
... <table> ... la balise entrante ... et ... </table>: ... la balise sortante ...
... entre ces deux balises vont se mettre les éléments qui vont spécifier le titre, les lignes et les colonnes ...
... une partie du style sera défini dans la ...  feuille de style  ... à l'extérieure ...
... l'autre partie est défini directement dans la balise table ...
... avec ... border, ... width ...

Nom de la balise table :

... la balise table, comme la balise div, peut avoir un nom ...
... il s'écrira avec ...  id=" ... "  ... avec le nom entre les guillemets ...
... cela permet par exemple de lui attribuer un style avec la feuille de style externe ...



Les balises tr et td :

... à l'intérieur de ces balises table nous aurons la balise ligne et ensuite la balise colonne ou cellule ...
...la première balise est ... <tr> ... la balise entrante ... et ... </tr>: ... la balise sortante ...
... elle crée des lignes et ...   est toujours la première utilisée   ...

... la balise suivante est ... <td> ... la balise entrante ... et ... </td> ... la balise ... sortante ...
... elle crée des colonnes ( des cellules ) ...   toujours placées en second   ...

 ... la ou les balises td seront placées à l'intérieur de la balise tr ...     ... (voir la structure ci-dessous) ...




La structure :



 ... voyons ce que cela donne dans le concret ... : 

Aqua Blue Fuschia Grey Green Lime
Maroon Navy Olive Purple Red Silver
Teal White Yellow AliceBlue Lavender Black

... avec 75% de la largeur du bloc dans lequel il est inscrit ...

... avec comme couleur de fond ... un dégradé radial avec center top ... circle ... en CSS 3 ...




... nous pouvons ne faire que trois colonnes ... et nous aurons six lignes dans le tableau ...
... et cela donnera comme structure : ...



 ... et cela nous donne dans le concret ... : 

Aqua Blue Fuschia
Grey Green Lime
Maroon Navy Olive
Purple Red Silver
Teal White Yellow
AliceBlue Lavender Black

... avec 30% de la largeur du bloc dans lequel il est inscrit ...

... avec comme couleur de fond ... un dégradé radial avec center top ... circle ... en CSS 3 ...

... on remarque qu'il n'y a plus de bordure ( border = 0 ) ...
... et que les lignes internes sont toutes fines ( cellspacing = 1 ) ...
... en fait il y a absence de ligne, ... ce que l'on voit, c'est un espace de 1px avec la couleur de fond du bloc ...



La balise th :


... ont peut mettre un titre dans le tableau ... avec la balise th ...
... <th> ... la balise entrante ... et ... </th> ... la balise sortante ...



 ... voyons ce que cela donne dans le concret ... : 

Les couleurs
Aqua Blue Fuschia Grey Green Lime
Maroon Navy Olive Purple Red Silver
Teal White Yellow AliceBlue Lavender Black

... avec 75% de la largeur du bloc dans lequel il est inscrit ...

... avec comme couleur de fond ... un dégradé radial avec center top ... circle ... en CSS 3 ...

... l'attribut ...  colspan  ... est vu plus loin, c'est un attribut de ... fusion ... ainsi que …  width="75%" 



Les attributs de table :

Border.

... un tableau est la plus part du temps concrétisé par des lignes et des colonnes ...
... il y a d'abord la bordure entourant le tableau et les différentes cellules ...
...qui se nomme ... border ... prenant une valeur que l'on peut voir sur les exemples précédants ...
... avec 1 sur le premier et 0 sur le suivant ...

Cellspacing.

... la séparation entre cellules est exprimé par ... cellspacing ... qui sera 0 avec aucun espacement, ...
... et une séparation d'une valeur de 1, 2, etc ... (voir les exemples) ...
... la couleur de cet espacement est celui du fond ...

Width.

... la largeur ... width ... se défini souvent en % pour garder la souplesse de celle-ci ...




... un exemple avec border ="1" ... et cellspacing ="4" ... et width ="70%" ...
... et cela donnera comme structure : ...



 ... et cela nous donne dans le concret ... : 

Aqua Blue Fuschia
Grey Green Lime
Maroon Navy Olive
Purple Red Silver
Teal White Yellow
AliceBlue Lavender Black

... avec 70% de la largeur du bloc dans lequel il est inscrit ...

... avec comme couleur de fond ... un dégradé radial avec center top ... circle ... en CSS 3 ...

... l'espace entre les cellules, est de 4px, un vide de couleur du fond du bloc ...
... border ... entoure le grand rectangle (tableau) ... et chaque cellule ...

... un autre exemple avec ... border ="0" ... et cellspacind ="3" ... et width ="30%"



 ... et cela nous donne dans le concret ... : 

Aqua Blue Fuschia
Grey Green Lime
Maroon Navy Olive
Purple Red Silver
Teal White Yellow
AliceBlue Lavender Black

... avec 30% de la largeur du bloc dans lequel il est inscrit ...

... avec comme couleur de fond ... un dégradé radial avec center top ... circle ... en CSS 3 ...

... ici, il faut tenir compte de l'ombrage possible en CSS 3.0 mais qui n'est pas vu par tout le monde ...
... pour ceux qui voient l'ombrage, on remarque que l'espacement entoure totalement chaque cellule ...

... si je ne précise pas cellspacing, le résultat sera comme dans le premier exemple ...



L'attribut de fusion :

Colspan : fusion horizontale.

... horizontale ... donc dans la balise ... th ... ou ... td ... avec l'attribut de fusion :
... colspan="..." ... en y plaçant le nombre de colonnes qui fusionnent ...

Rowspan : fusion verticale.

... verticale ... donc dans la balise ... td ... avec l'attribut de fusion :
... rowspan="..." ... en y plaçant le nombre de lignes qui fusionnent ...



Structure :


... découvrons ces balises et attributs ...

... nous y découvrons aussi le nom de cette table ... id : fusion ...
... comme il y a plusieurs table dans cette page html, il peut être intéressant de leur donner un nom différent, s'ils sont stylisés de manière différente ...


 exemple 
fusion titre
fusion verticale

dessin humoristique
Aqua Blue Fuschia
fusion horizontale
Grey Green Lime
Maroon Navy Olive
Purple Red Silver
Teal White Yellow
AliceBlue Lavender Black

... avec comme couleur de fond ... un dégradé radial avec center top ... circle ... en CSS 3 ...

... il y est ajouté un attribut de fusion ...
... colspan="4" ... pour une fusion de quatres colonnes horizontales ... pour le titre en gras ...
... colspan="3" ... pour une fusion horizontale de trois colonnes avec td ...
... rowspan="8" ... pour une fusion de huit lignes verticales ...
... ces deux attributs se mettent dans la balise entrante de .. td ... et de ... th ...

... nous avons une balise pour le titre qui se met au-dessus du tableau : ... caption ...
... <caption> ... la balise entrante ... et ... </caption> ... la balise sortante ...
... avec le titre ... exemple ... pour celui-ci ... qui se trouve au dessus du tableau ...

... nous pouvons même y placer une image ... ( voir le code html ) ...



... changeons quelques attributs ...

... nous avons ajouté ... cellspacing="0" ... pour alléger le tout ...


 exemple 
fusion titre
fusion verticale

dessin humoristique
Aqua Blue Fuschia
fusion horizontale
Grey Green Lime
Maroon Navy Olive
Purple Red Silver
Teal White Yellow
AliceBlue Lavender Black

... avec comme couleur de fond ... un dégradé radial avec center top ... circle ... en CSS 3 ...




Des exemples plus étudiés :

... changeons quelques attributs ...

... nous avons ajouté ... cellspacing="20" ... avec border="0" ... pour étaler le tout ...
... avec les couleurs ... et l'ombrage pour certains ...

 <div class="table1j"> 

 <table id="fusion" border="0" cellspacing="20" width="40%" align="center"> 

 exemple 
fusion titre
fusion verticale

dessin humoristique
Aqua Blue Fuschia
fusion horizontale
Grey Green Lime
Maroon Navy Olive
Purple Red Silver
Teal White Yellow
AliceBlue Lavender Black

... ce n'est pas réalisé avec Photoshop ...
... c'est la propriété box-shadow, l'ombrage en CSS 3.0 ...

 </table> 

 </div> 

... avec comme couleur de fond ... un dégradé radial avec center top ... circle ... en CSS 3 ...

... pour ceux qui voient ... l'ombrage, ... nous avons du 3D ...
... prenez les pastilles de couleur ...
... avec la propriétée en CSS 3.0 ... intégrée avec ...  information CSS 3.0  ... avec la propriété ... shadow ...

... pas de travail avec un logiciel de traitement de l'image ... etc. ...
... nous avons les mêmes ombrages dans les tableaux précédants ... ce qui crée ces effets spéciaux ...
... mais nous y ajoutons ... les arrondis ... expliqués dans ...  information 1 CSS 3.0  ... avec la propriété ... radius ...

... voila le style pour obtenir ces effets là ... avec shadow et radius ...
... le div avec la ... class="table1j" ... et ces sous-ensembles ...
En le réactualisant pour les derniers navigateurs essentiels :
Ce qui est expliqué au cours  d'introduction du CSS 3 .


 <div class="table1j"> 

 ... ou encore, avec border="1" ... 
fusion titre
fusion verticale

dessin humoristique
Aqua Blue Fuschia
fusion horizontale
Grey Green Lime
Maroon Navy Olive
Purple Red Silver
Teal White Yellow
AliceBlue Lavender Black

 </div> 

... avec comme couleur de fond ... un dégradé radial avec center top ... circle ... en CSS 3 ...

… pour obtenir l'écriture en blanc pour le blue, fuschia, etc. …
… nous ajoutons la précision : … ; color: white … comme ceci :


… le … ; color: white … prend le dessus sur la couleur d'écriture de la feuille de style ...





... nous pourions aussi avoir celle-ci ...


 exemple 
fusion titre
fusion verticale

dessin humoristique
Aqua Blue Fuschia
fusion horizontale
Grey Green Lime
Maroon Navy Olive
Purple Red Silver
Teal White Yellow
AliceBlue Lavender Black

 ... avec ... border="1" ... et ... cellspacing="0" ... 

... avec comme couleur de fond ... un dégradé radial avec center top ... circle ... en CSS 3 ...


 ... et encore ... 

Aqua Blue Fuschia
Grey Green Lime
Maroon Navy Olive
Purple Red Silver
Teal White Yellow
AliceBlue Lavender Black

... avec 90% de la largeur du bloc dans lequel il est inscrit ...

 ... avec ... border="0" ... et ... cellspacing="30" ... 

... avec comme couleur de fond ... un dégradé radial avec center top ... circle ... en CSS 3 ...

... il y a évidemment dans tous ces exemples ... l'ombrage ... qui n'est pas vu par tout le monde ...






Remarque :

Calcul de la largeur du tableau :

...nous pouvons mettre une largeur définie pour le tableau, ainsi qu'une hauteur ...
...mais dans le cas de ce site web, nous avons choisis de ne mettre qu'une largeur (width)...
... quand à la hauteur, elle se fera automatiquement ...

... pour la largeur, nous utilisons par exemple …  un pourcentage (75%)  ... ce qui permet au tableau de se mettre à la taille de la largeur du bloc dans lequel il se situe et qui impose une largeur définie maximum ...
... l'adaptation est toujours garantie par cette méthode ...
... la taille minimum de la page web est de ... 880 px ... en largeur ...
... ce qui nous donne un minimum de ... 75 % de 880 px ... comme largeur de tableau ... qui est 660px ...


... design 3 D ...

...  fenêtre sur l'univers  ...             © design : LigneWeb - © Apple






 Menu HTML 5  - Cours 1  - Cours 2  - Cours 3  - Cours 4  - Cours 5  - Cours 6  - Cours 7  - Cours 8  - Cours 9 
  Essentiel :   - Accueil  - Offres  - Site photo  - Projet  - Historique  - Historique RSS  - Réalisations  - Création 
- Cours XHTML  - Cours CSS 2  - Création site  - Cours  HTML 5  - Cours CSS 3  - Cours jQuery 
- Programmes JS  - Liens - © - cookies  - Contact  - Plan du site 

Chaque enfant compte. Plan Belgique     Valid XHTML 1.0 Transitional     [Valid RSS]     CSS Valide !     Le logo de LigneWeb

... tout ne respecte pas le W3C ... site d'expérimentation ...

le titre du site web
©  Copyright :  "LigneWeb" (2008-2017) Tous droits réservés.  Légal  Design, Artisan web: mathalan 
 LigneWeb :   BE 0843 356 602. (2012-2017)   Conditions d'utilisation  Création: masterligne  • Qui sommes nous? 

Réinstaller le Bien en soi ... pour réinstaller le Bien sur terre ... et changer le monde.
© LigneWeb  Utilisation de cookies