Créer son site Web

livre création de site Internet-Bon de commande

table, caption, tr, th, td, thead, tfoot, tbody
balises de tableau

Formation site internet>compléments du livre>Exemples de code XHTML et CSS>Balises de tableau>

balises de tableau table , caption , tr , th , td , thead , tfoot , tbody . Cette page internet est relative à la programmation en XHTML (pages 103 à 113 sur la syntaxe). Elle complète les pages 197 à 206 (table, caption, tr, th, td, thead, tfoot, tbody ) du livre-atelier Créer son site Web pas à pas.

Création site Web Formation site Web Livre site Web

Balises de tableau

Tableau simple : balises table, caption, tr, th, td

Exemple d'utilisation des balises de tableau table, caption, tr, th, td

Tableau simple

Lignes CSS

table
{
	border-collapse:collapse;/*fusionne les traits*/
	border:2px solid black;
}
th
{
	border:1px solid black;
	background-color:rgb(220,230,240);
}
td
{
	border:1px solid black;
}

Lignes XHTML correspondantes

<!--************************************************ Tableau simple *****************************************-->
<link rel="stylesheet" media="screen" type="text/css" href="15-style-tableau.css" />
<table summary="exemple de présentation de tableau">
 <!-- conteneur de tableau-->
<caption>Caption</caption>
	<tr> <!-- conteneur de ligne -->
		<th>th</th> <!-- cellule d'en-tête -->
		<th>th</th>
		<th>th</th>
	</tr>
	<tr>
		<th>th</th>
		<td>td</td> <!-- cellule du tableau -->
		<td>td</td>
	</tr>
</table>

Tableau structuré : balises thead, tfoot, tbody

Exemple d'utilisation des balises thead, tfoot, tbody

tableau structuré avec en-tête et pied

Lignes CSS

table
{
	border-collapse:collapse;/*fusionne les traits*/
	border:2px solid black;
}
th
{
	border:1px solid black;
	background-color:rgb(220,230,240);
}
td
{
	border:1px solid black;
}
thead
{
	font-weight:bold;
	background-color:rgb(220,230,240);
}
tfoot
{
	font-weight:bold;
	background-color:rgb(200,220,240);
}

Lignes XHTML correspondantes

<!--****************************************** Tableau avec en-tête et pied *************************************-->
<link rel="stylesheet" media="screen" type="text/css" href="15-style-tableau.css" />
<table summary="exemple de présentation de tableau"> <!-- conteneur de tableau-->
<caption>Caption</caption>
	<thead> <!-- conteneur d'en-tête de tableau peut comporter plusieurs lignes -->
		<tr> <!-- conteneur de ligne -->
			<th>th</th> <!-- cellule d'en-tête -->
			<th colspan="2">th</th> <!-- cellules d'en-tête fusionnées horizontalement-->
			<!-- ligne absente car cellule fusionnée horizontalement"-->
		</tr>
		<tr> <!-- conteneur de ligne -->
			<th>th</th> 
			<th>th</th> 
			<th>th</th>
		</tr>
	</thead>
	<tfoot><!-- conteneur de pied de tableau peut comporter plusieurs lignes et doit se trouver immédiatement après la balise thead -->
		<tr>
			<th>th</th>
			<td>td</td><!-- cellule du tableau -->
			<td>td</td>
		</tr>
	</tfoot>
	<tbody><!-- conteneur de corps de tableau doit se trouver  après la balise tfoot si elle est présente -->
		<tr>
			<th>th</th>
			<td>td</td>
			<td rowspan="2">td </td><!-- cellules  fusionnées verticalement -->
		</tr>
		<tr>
			<th>th</th>
			<td>td</td>
			<!-- ligne absente car cellule fusionnée verticalement"-->
		</tr>
	</tbody>
</table>
<!--*******************************************************************************************************-->

Les autres balises XHTML

Autres exemples de code XHTML à copier-coller :

Cet article vous a intéressé ?
Twitter Google +
Partagez-le !

Glossaire Outils pédagogiques Formation site Web Mentions légales Contact