lundi 26 juin 2017

Le tableau, chef-d’œuvre du HTML !





Récapitulons !




Avec « Savez-vous parler le web, à la mode de chez nous ? » (https://l-eusses-tu-cru.blogspot.fr/2017/06/savez-vous-parler-le-web-la-mode-de.html), nous avons survolé le langage HTML. C’est un langage de balises, chaque élément qui le constitue (avec quelques exceptions), se retrouve entre une balise ouvrante et une fermante.




Conteneurs génériques et blocs sémantiques


La mise en page de type web, s’apparente à la mise en page papier. Pour organiser et structurer une page web, nous avons besoin de conteneurs. Le plus courant est le paragraphe <p>…</p>, nous l’avons déjà rencontré dans notre article précédent.
Si le paragraphe, comme contenu, est une section de texte en prose (https://fr.wikipedia.org/wiki/Paragraphe), avec des attributs de fonte, de taille, couleur, de graisse, de mise en exergue, il est aussi un conteneur, un bloc, qui a des dimensions, une couleur de fond, ou une image de fond, un contour avec épaisseur et couleur, un espace de retrait du texte vers l’intérieur, ou contraire à l’extérieur, pour repousser un texte qui l’habille, il peut avoir une ombre etc.  Il est aussi le plus petit des conteneurs de type bloc, il ne peut contenir un autre bloc, (en principe, nous reviendrons…) Par contre, il peut inclure un autre conteneur de type en ligne,  aux caractéristiques différentes du reste du contenu du paragraphe, c’est le span, <span>…</span>.

Un autre conteneur générique est le div, <div>…</div>. Il est de type bloc, car c’est un groupe de blocs, de paragraphes, ou d’autres div. Avec le HTML 5, le bloc div doit servir en dernier recours, les blocs génériques sont remplacés par des blocs sémantiques :

  • L’article <article>…</article>
  • L’aparté <aside>…</aside>
  • La section <section>…</section>
  • La navigation <nav>…</nav> qui regroupe les liens de navigation (le menu)
  • L’entête <header>…</header>
  • Le pied de page <footer>…</footer>



Les tableaux


En dehors de ces blocs il en existe un particulier et ancien, le tableau <table>…</table>. À l’origine du HTML, il servait à présenter simplement des données sous forme de tableau, d’une manière plus flexible que le texte brut.

Le tableau est balisé par <table>…</table>, à l’intérieur nous trouvons des rangées <tr>…</tr>, qui contiennent des cellules, des datas <td>…</td>. D’autres balises complètent depuis le tableau, comme caption, pour le légender :


<table align="center" cellpadding="25" cellspacing="10" style="background: white;">
  <caption>
    <div style="background: red; color: white; padding: 5px;">
      <strong>Titre de mon beau tableau</strong>
    </div>
  </caption>
  <tbody>
    <tr>
      <td style="background: MistyRose;">case 1</td>
      <td style="background: Lavender;">case 2</td>
      <td style="background: Gainsboro;">case 3</td>
    </tr>
    <tr>
      <td style="background: lime;">case 4</td>
      <td style="background: AquaMarine;">case 5</td>
      <td style="background: Silver;">case 6</td>
    </tr>
    <tr>
      <td style="background: Silver;">case 7</td>
      <td style="background: pink;">case 8</td>
      <td style="background: Gold;">case 9</td>
    </tr>
    <tr>
      <td style="background: Aqua;">case 10</td>
      <td style="background: Plum;">case 11</td>
      <td style="background: lime;">case 12</td>
    </tr>
  </tbody>
</table>



Voici le résultat de ce fragment de code HTML, interprété par un navigateur. Un titre, des strips avec des cases, on dirait bien une bande dessinée :


Titre de mon beau tableau
case 1 case 2 case 3
case 4 case 5 case 6
case 7 case 8 case 9
case 10 case 11 case 12


Tableaux et mise en page

Pendant longtemps au cours de son histoire, le tableau HTML a montré des possibilité de mise en page. Cette possibilité est bannie aujourd’hui par la recommandation HTML5 : les tableaux ne doivent pas être utilisés comme des moyens de mise en page.






À suivre, le HTML s’habille avec style…

Aucun commentaire:

Enregistrer un commentaire