HTML Tableau

Exemple de tableau

Jean Bonneau 10
Eve Jackson 20
shipping
New-York
USA
by airmail
526.32 € 24h

Définition basique d'un tableau en HTML
(2 lignes - 3 colonnes)

<table>							<!-- définition du tableau -->
	<tr>							<!-- 1ère ligne -->
		<td>Hello</td>				<!-- 1ère colonne -->
		<td>World</td>				<!-- 2ème colonne -->
		<td>100</td>				<!-- 3ème colonne -->
	</tr>							<!-- FIN de la 1ère ligne -->
	<tr>							<!-- 2ème ligne -->
		<td>Lille</td>
		<td>HEI</td> 
		<td>3</td>
	</tr>
</table> 							<!-- FIN du tableau -->
		
Voir

Balise relatives au tableau

Tableau avec bord, rubrique et légende

Les rubriques sont définies avec le tag <th> (table headings). Par défaut, les navigateurs affichent les titres de rubrique en gras et centré

La légende d'un tableau est définie avec le tag <caption>. Il doit être inséré immédiatement après le tag <table>

<table border="1">
<caption>Résultats</caption>
	<tr>
		<th>Nom</th>
		<th>Prénom</th>
		<th>Points</th>
	</tr>
	<tr>
		<td>DUBOIS</td>
		<td>David</td> 
		<td>1024</td>
	</tr>
</table>
		
Voir

Regroupement des lignes ou des colonnes

Pour faire un regroupement :

<!-- ***************************************************** -->
<h1>Regroupement de colonnes (sur la même ligne)</h1>
<!-- ***************************************************** -->

<table style="width:50%">
	<tr>
		<th>Name</th>
		<th colspan="2">mobile phone</th>
	</tr>
	<tr>
		<td>Bill Gates</td>
		<td>36 15</td>
		<td>18</td>
	</tr>
</table>

<!-- ***************************************************** -->
<h1>Regroupement de lignes (sur la même colonne)</h1>
<!-- ***************************************************** -->

<table style="width:50%">
	<tr>
		<th>Name:</th>
		<td>Bill Gates</td>
	</tr>
	<tr>
		<th rowspan="2">Telephone:</th>
		<td>36 15</td>
	</tr>
	<tr>
		<td>18</td>
	</tr>
</table>
				
Voir