Les tableaux

Ecrire un tableau en html

Format 1:

<table>
<caption> Titre du tableau </caption>
<tr> <th> Titre 1 </th> <th> Titre 2 </th> <th> Titre 3 </th> </tr>
<tr> <td> Cellule 1 </td> <td> Cellule 2 </td> <td> Cellule 3 </td> </tr>
<tr> <td> Cellule 4 </td> <td> Cellule 5 </td> <td> Cellule 6 </td> </tr>
<tr> <td> Cellule 7 </td> <td> Cellule 8 </td> <td> Cellule 9 </td> </tr>
<tr> <td> Cellule 10 </td> <td> Cellule 11 </td> <td> Cellule 12 </td> </tr>
</table>

Résultat:

Titre du tableau
Titre 1	Titre 2	Titre 3
cellule 1	cellule 2	cellule 3
cellule 4	cellule 5	cellule 6
cellule 7	cellule 8	cellule 9
cellule 10	cellule 11	cellule 12

Format 2:

<table>
<caption> Titre du tableau </caption>
<tr><th>Titre 1</th> <td> Cellule 1 </td> <td> Cellule 2 </td> <td> Cellule 3 </td></tr>
<tr><th>Titre 2</th> <td> Cellule 4 </td> <td> Cellule 5 </td> <td> Cellule 6 </td></tr>
<tr><th>Titre 3</th> <td> Cellule 7 </td> <td> Cellule 8 </td> <td> Cellule 9 </td></tr>
<tr><th>Titre 4</th> <td> Cellule 10</td> <td> Cellule 11</td> <td> Cellule 12</td></tr>
</table>

Résultat

Titre du tableau
Titre 1	cellule 1	cellule 2	cellule 3
Titre 2	cellule 4	cellule 5	cellule 6
Titre 3	cellule 7	cellule 8	cellule 9
Titre 4	cellule 10	cellule 11	cellule 12

Habiller les tableaux en CSS

Cellules et bordures

Couleurs des cellules:

Titre du tableau
Titre 1	Titre 2	Titre 3	Titre 4
cellule 1	cellule 2	cellule 3	cellule 4
cellule 5	cellule 6	cellule 7	cellule 8
cellule 9	cellule 10	cellule 11	cellule 12

Bordures collées:

Titre du tableau
Titre 1	Titre 2	Titre 3	Titre 4
cellule 1	cellule 2	cellule 3	cellule 4
cellule 5	cellule 6	cellule 7	cellule 8
cellule 9	cellule 10	cellule 11	cellule 12

Bordures horizontales:

Titre du tableau
Titre 1	Titre 2	Titre 3	Titre 4
cellule 1	cellule 2	cellule 3	cellule 4
cellule 5	cellule 6	cellule 7	cellule 8
cellule 9	cellule 10	cellule 11	cellule 12

caption{
	font-weight:bold;
	background:yellow;
	}
	table{
	border:solid black 2px;}
	th{
	border:solid red 2px;}
	td{
	border:solid green 2px;}

Pour coller les bordures, ajout de:

table{border-collapse:collapse;}

La bordure noire du tableau disparait.

Pour afficher les bordures horizontales:

	table{
	border-collapse:collapse;}
   	tr{
	border:solid blue 2px;}

Marges et taille du tableau

Les marges intérieures:

Titre du tableau
Titre 1	Titre 2	Titre 3	Titre 4
cellule 1	cellule 2	cellule 3	cellule 4
cellule 5	cellule 6	cellule 7	cellule 8
cellule 9	cellule 10	cellule 11	cellule 12

La largeur du tableau:

Titre du tableau
Titre 1	Titre 2	Titre 3	Titre 4
cellule 1	cellule 2	cellule 3	cellule 4
cellule 5	cellule 6	cellule 7	cellule 8
cellule 9	cellule 10	cellule 11	cellule 12


	caption{
	font-style:italic;}
	table{
	border-collapse:collapse;}
	th, td{
	border:solid black 1px;
	padding:5px;}


	caption{
	font-style:italic;}
	table{
	width:100%;
	border-collapse:collapse;}
	th, td{
	border:solid black 1px;}

Couleurs du tableau

Titre du tableau
Titre 1	Titre 2	Titre 3
Cellule 1	Cellule 2	Cellule 3
Cellule 4	Cellule 5	Cellule 6
Cellule 7	Cellule 8	Cellule 9
Cellule 10	Cellule 11	Cellule 12

table {
border-collapse:collapse;}
th, td{padding:5px;}
tr.color {
background-color:#A3EBF9;}

En html:

<tr class="color"> <td> Cellule 1 </td> 
<td> Cellule 2 </td> <td> Cellule 3 </td> </tr>

Fusion verticale (colonnes)

Titre du tableau
Titre 1	Titre 2	Titre 3	Titre 4
cellule 1	cellule 2	cellule 3	cellule 4
	cellule 6	cellule 7	cellule 8
	cellule 10	cellule 11	cellule 8

Code html:

<table>
    <tr> <th>Titre 1</th> <th>Titre 2</th>
<th>Titre 3</th> <th>Titre 4</th> </tr>
<tr> <td rowspan="3">cellule 1</td><td>cellule 2</td>
<td>cellule 3</td><td>cellule 4</td></tr>
<tr>  <td>cellule 6</td> <td>cellule 7</td>
<td rowspan="2">cellule 8</td> </tr>
<tr>  <td>cellule 10</td> <td>cellule 11</td>  </tr>
    </table>

Fusion horizontale (lignes)

Titre du tableau
Titre 1		Titre 2	Titre 3
cellule 1	cellule 2	cellule 3	cellule 4
cellule 5	cellule 6	cellule 7	cellule 8
cellule 9	cellule 10	cellule 11	cellule 12

Code html:

<table>
<caption> Titre du tableau </caption>
<tr> <th colspan="2"> Titre 1 </th>  
<th> Titre 2 </th> <th> Titre 3 </th></tr>
... </table>