Développeur Web RoR

Aller au contenu | Aller au menu | Aller à la recherche

Tag - table

Fil des billets

mercredi 17 novembre 2010

Plugin jquery - header de table toujours visible

Voici un petit plugin jquery bien pratique qui permet d'avoir un header de table toujours visible en haut du tableau quand on scroll.

Non seulement le plugin fait ce qu'on lui demande mais il en fait plus encore : quand on scroll jusqu'à la fin du tableau le header disparait ! Trop top !

La demo ici : http://www.mustafaozcan.net/en/demo/fixedtableheader/jquery-fixedtableheader-demo-en.html

Le plugin ici : http://plugins.jquery.com/project/fixedtableheader

mardi 22 décembre 2009

CSS 3 - Les tables avec des div - display:table

Cette après-midi je discutai avec un collègue qui voulait faire une table dans <table> et qui d'ailleurs ne savait pas pourquoi cette guère à la mise en page en table.

Pourquoi la guerre :
Parce que table en plus d'avoir l'apparence d'un tableau, exprime l'idée d'un tableau de données. Il s'agit d'une balide sémantique (la même différence existe entre <b> : mise en gras du texte et <strong> : balise sémantique car marque l'importance du texte.)

Et alors le problème me direz-vous ?
L'accessibilité ! Un traducteur non voyant (synthétiseur vocale) va traduire <table> par "Voici un tableau". Donc imaginez si le moindre mise en page utilise <table>...

Mais il faut avouer que une apparence de tableau est bien pratique. Si on doit faire ceci avec des <div> c'est long et lourd ! CSS 3 a pensé à nous !

Voici quelques nouvelles valeurs à l'attribut css display : table, table-row, table-cell.

Le style css inline de l'implémentation est volontaire ci dessous.

Mise en page <table> irrespectueux de l'accessibilité:


<table>
 <tr>
  <td>
   1
  </td>
  <td>
   2
  </td>
 </tr>
</table>

Mise en page <div> respectueux de l'accessibilité:


<div style="display:table">
 <div style="display:table-row">
  <div style="display:table-cell">
   1
  </div>
  <div style="display:table-cell">
   2
  </div>
 </div>
</div>