# Des tableaux en html
![category](développement)
![tag](design)
![tag](angularjs)


Basic
-----

Il est facile d'écrire un tableau en html

```html
<table>
    <thead>
      <tr>
          <th>id</th>
          <th>lib</th>
          <th>valeur</th>
      </tr>
    </thead>
    <tbody>
      <tr  ng-repeat="data in datas">
        <td>{{data.id}}</td>
        <td>{{data.lib}}</td>
        <td>{{data.valeur}}</td>
      </tr>
    </tbody>
</table>
```

Modifier la taille des colonnes
-------------------------------

Nous obtenons un tableau basique pour lequel toutes les colonnes ont la même taille.
Ce qui n'est pas très beau, on souhaiterai avec un champ id et valeur le plus petit
possible sans de retour à la ligne,, et un champ libellé le plus grand.

Pour cela nous utilisons le css suivant

```css
table td.shrink {
    white-space:nowrap
}
table td.expand {
    width: 99%
}
```

et notre html devient

```html
<table>
    <thead>
      <tr>
          <th>id</th>
          <th>lib</th>
          <th>valeur</th>
      </tr>
    </thead>
    <tbody>
      <tr  ng-repeat="data in datas">
        <td class="shrink">{{data.id}}</td>
        <td class="expand">{{data.lib}}</td>
        <td class="shrink">{{data.valeur}}</td>
      </tr>
    </tbody>
</table>

```