IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
logo
Sommaire > Tableaux
        Comment adapter la taille d'un tableau selon son contenu ?
        Comment centrer horizontalement un tableau dans une page ?
        Comment définir les bordures d'un tableau ?
        Que signifie le nom de balise td ?



Comment adapter la taille d'un tableau selon son contenu ?
auteur : Jérôme
La cellule d'un tableau s'adapte toujours à son contenu, les dimensions qui lui sont données sont en quelque sorte les dimensions minimums. Si le contenu ne tient pas dans la cellule, alors elle s'agrandit en fonction de celui-ci.


Comment centrer horizontalement un tableau dans une page ?
auteur : Linaa
On peut centrer un tableau en (X)HTML ou en CSS. En (X)HTML, on utilise l'attribut align qui peut prendre pour valeur : left, center, ou right.
Définition du tableau
<table align="center">
  <tr><td>Contenu du tableau</td></tr>
</table>
En CSS, il faut fixer une largeur au tableau, puis appliquer à l'élement des marges automatiques, à gauche et à droite.
Définition du CSS approprié
table {
  width : 400px;
  margin-left : auto;
  margin-right : auto;
}
Note : Ce style s'applique à tous les tableaux de la page. Pour l'appliquer à un seul tableau, il faut passer par des classes ou des identifiants.

lien : faq Comment utiliser les identifiants en CSS
lien : faq Comment utiliser les classes en CSS

Comment définir les bordures d'un tableau ?
auteurs : Jérôme, Kerod
L'attribut border spécifie les épaisseurs pour les quatre côtés d'un objet.

Exemple :
<table border="1">
  <tr>
	<td width="50%">toto</td>
	<td width="50%">titi</td>
  </tr>
</table>

La définition des bordures peut aussi être faite en CSS. De plus, grâce aux effets de style nous pouvons définir la couleur et type de trait pour chacune d'entre elles.

Exemple :
<table style="border: 1px solid black">
  <tr>
	<td width="50%">toto</td>
	<td width="50%">titi</td>
  </tr>
</table>
Pour qu'une case vide ait quand même des bordures, il faut mettre &nbsp; entre les balises <td> et </td>.

On peut également spécifier chacun des côtés grâces à ces attributs :
  • border-top
  • border-right
  • border-bottom
  • border-left

Note : La définition des bordures à l'aide du CSS n'est pas spécifique au tableau, elle peut être faîte sur toutes les balises existantes

lien : faq Comment simplifier mon Style CSS (raccourcis) ?

Que signifie le nom de balise td ?
auteur : Jérôme
Cela signifie Table Data



Consultez les autres F.A.Q's


Valid XHTML 1.0 TransitionalValid CSS!

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez.com Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.