Les tableaux HTML
Presenté par :
Ezzaary Mohamed Professeur : Zakaria Alami
Fhyel otmane
Messouar taoufik
Rajiz otmane
Les tableaux
HTML permet de réaliser des tableaux avec réglage de l'encadrement, de la taille et
de l'espacement des cellules. Chaque cellule peut contenir du texte, des listes, des
images, des liens hypertextes, des éléments de formulaire...
La balise <table>
La première balise à connaître est <table>
</Table>.
C’est cette balise qui permet d’indiquer le début et la fin d’un tableau
La balise <tr>
La balise tr permet la création d’une ligne dans le tableau
Les balise <th> et <td>
Les balises <th> permettent d’ajouter une cellule d’en-tete
Les balises td permettent d’ajouter une cellule normale
L’attribut <border>
L’attribut border fait apparaître un bordure pour le tableau . On
l’inscrit dans la balise <Table> ou bien dans une feuille de style CSS
avec l’attribut border qui prend comme paramètre l’épaisseur en
(pixel) ou bien (%)
Quelques attributs de tableaux :
<table bgcolor="couleur"> Mettre un fond de couleur
<table width="50%"> Occupation en % de la page, également en pixels
<table border="1"> Taille des bords (0=pas de bords)
border color="couleur" couleur des bordures
cellpadding="2" Marge intérieure des cellules
cellspacing="3" Espacement entre les cellules
Exemple:
COULEUR BORDURE
<table border="3" bordercolor="red">
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></
tr>
<tr><td>13</td><td>14</td><td>15</td><td>16</td><
/tr> </table>
Fusionner les lignes et colonnes :
Les lignes et colonnes peuvent êtres fusionnées, afin d'obtenir des
cellules plus ou moins grandes et accueillir des données. Ce
fusionnement est réalisé avec les attributs : rowspan et colspan.
- Pour fusionner 2 cellules adjacentes sur une
ligne, COLSPAN est requis (pour th ou td)
- Pour fusionner 2 cellules adjacentes sur une
colonne, ROWSPAN est requis (pour th ou td)
Exemple:
Le code source :
<B><TABLE BORDER=1>
<TR>
<TD>Cellule 1</TD>
<TD COLSPAN=2>2 cellules fusionnées (sur la même ligne)</TD>
</TR>
<TR>
<TD>Cellule 2</TD>
<TD>Cellule 3</TD>
<TD ROWSPAN=2>2 cellules fusionnées (sur la même colonne)</TD>
</TR>
<TR>
<TD>Cellule 4</TD>
<TD>Cellule 5</TD>
</TR>
</TABLE>
Exemple:
Cellule 1 2 cellules fusionnées (sur la même ligne)
Cellule 2 Cellule 3
2 cellules fusionnées (sur la même
colonne)
Cellule 4 Cellule 5
TAILLE DU TABLEAU
Une des premières choses que l’on peut mettre en forme sur un
tableau HTML, c’est sa taille. En effet, vous pouvez modifier
ce dernier pour qu’il respecte une certaine dimension. Pour
cela on utilise le paramètre « width » dans la balise <table>
auquel on peut indiquer deux paramètres. Soit une donnée en
pixel, soit une donnée en pourcentage.
De même, vous pouvez utiliser un paramètre « height » pour
gérer la hauteur du tableau. C’est très rare, je ne l’ai jamais
utilisé. Du coup, je vous présente l’utilisation de « width » pour
la largeur . Je vais réutiliser le tableau contenant les chiffres
pour faciliter la compréhension.
<table width="70%"> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>13</td><td>14</td><td>15</td><td>16</td></tr> </table>
LARGEUR DES CELLULES
On peut gérer la taille du tableau, mais on peut aussi gérer la
taille des cellules. C’est utile si vous souhaitez affecter la même
taille à chacune d’elles malgré un texte de taille différente (sinon
le tableau va s’adapter à la taille du texte). Cela permet
d’uniformiser ce dernier. Il suffit d’appliquer le paramètre sur la
première ligne. On utilise le paramètre « witdh » comme pour le
tableau. Et comme pour le tableau la valeur renseignée peut-être
en pixels ou en pourcent.
<table> <tr><td width="15%">1</td><td width="15%">2</td><td width="35%">3</td><td
width="35%">4</td></tr> <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
</table>
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16