Envoyer à un ami
Bordures autour des cellules
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Bordures autour d'un tableau</title>
<style>
table
{
border: 4px dashed black;
}
th, td
{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<th>Titre colonne 1</th>
<th>Titre colonne 2</th>
<th>Titre colonne 3</th>
</tr>
<tr>
<td>Elément 1 ligne 1</td>
<td>Elément 2 ligne 1</td>
<td>Elément 3 ligne 1</td>
</tr>
<tr>
<td>Elément 1 ligne 1</td>
<td>Elément 2 ligne 1</td>
<td>Elément 3 ligne 1</td>
</tr>
</table>
</body>
</html>
Espacer les cellules
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Espacer les cellules d'un tableau</title>
<style>
table
{
border: 1px solid black;
text-align: center;
border-collapse: separate;
border-spacing: 10px;
}
td
{
width: 120px;
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<td>Date</td>
<td>Articles</td>
<td>Prix</td>
</tr>
<tr>
<td>12/08</td>
<td>21</td>
<td>5412</td>
</tr>
<tr>
<td>17/08</td>
<td>14</td>
<td>1519</td>
</tr>
</table>
</body>
</html>
Ajouter une légende à un tableau
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Légender un tableau</title>
<style>
table
{
border: 2px solid red;
}
table > caption
{
caption-side: bottom;
font-style: italic;
text-align: right;
}
</style>
</head>
<body>
<table>
<caption>Titre du tableau</caption>
<tr>
<td>Elément 1 ligne 1</td>
<td>Elément 2 ligne 1</td>
<td>Elément 3 ligne 1</td>
</tr>
<tr>
<td>Elément 1 ligne 2</td>
<td>Elément 2 ligne 2</td>
<td>Elément 3 ligne 2</td>
</tr>
</table></body>
</html>
Mise en forme des cellules vides
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Bordure des cellules vides</title>
<style>
table
{
border: 2px solid red;
background-color: #dfd;
}
#table1 { empty-cells: show; }
#table2 { empty-cells: hide; }
td { border: 1px dashed black;}
</style>
</head>
<body>
<table id="table1">
<tr>
<td>Elément 1 ligne 1</td>
<td></td>
<td>Elément 3 ligne 1</td>
</tr>
<tr>
<td></td>
<td>Elément 2 ligne 2</td>
<td>Elément 3 ligne 2</td>
</tr>
</table>
<br><table id="table2">
<tr>
<td>Elément 1 ligne 1</td>
<td></td>
<td>Elément 3 ligne 1</td>
</tr>
<tr>
<td></td>
<td>Elément 2 ligne 2</td>
<td>Elément 3 ligne 2</td>
</tr>
</table>
</body>
</html>
Mise en forme des adjacents et enfants
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Adjacents et enfants</title>
<style>
body
{
font-family: arial;
color: black;
}
#tableau1
{
color: blue;
}
#tableau1 tr > td
{
font-style: italic;
}
#tableau1 td:first-child
{
font-weight: bolder;
}
#tableau1 td:first-child + td
{
background: yellow;
}
#tableau1 td:first-child + td + td
{
background: red;
}
</style>
</head>
</body>
<p>Utilisation des opérateurs > et + pour mettre en forme un tableau</p>
<table id="tableau1">
<tr>
<td>Elément 1 ligne 1</td>
<td>Elément 2 ligne 1</td>
<td>Elément 3 ligne 1</td>
</tr>
<tr>
<td>Elément 1 ligne 1</td>
<td>Elément 2 ligne 1</td>
<td>Elément 3 ligne 1</td>
</tr>
</table>
</body>
</html>
Habillage d’un tableau
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Habillage d'un tableau</title>
<style>
table
{
border: 1px solid silver;
background-color: #dfd;
}
caption
{
text-align: left;
color: red;
font-weight: bold;
font-size: 130%;
border-bottom: 5px solid blue;
margin-bottom: 10px;
}
th
{
border: 1px solid red;
empty-cells: hide;
background-color: yellow;
}
tr
{
text-align: center;
}
td
{
border: 1px dashed black;
}
td:first-child
{
color: red;
font-weight: bold;
border: 0;
text-align: right;
}
tr#dernier
{
background-color: silver;
}
</style>
</head>
</body>
<table>
<caption>Recettes budgétaires par région</caption>
<th></th>
<th colspan = 2>En Millions de F</th>
<th rowspan = 2>1985 en F/hab.</th>
<tr>
<th></th>
<th>1984</th>
<th>1985</th>
<tr>
<td>Ile-de-France</td>
<td>399258</td>
<td>415920</td>
<td>178,8</td>
</tr>
<tr>
<td>Midi-Pyrénnées</td>
<td>73961</td>
<td>63826</td>
<td>219,4</td>
</tr>
<tr id=dernier>
<td>Centre</td>
<td>43638</td>
<td>55802</td>
<td>185,9</td>
</tr>
</table>
</body>
</html>
Arrière-plan des cellules
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Arrière-plan des cellules</title>
<style>
table
{
border: 1px solid black;
text-align: center;
color: blue;
font-weight: bold;
font-size: 200%;
}
td {width: 200px;}
td.fond1 { background:url(fond1.jpg); }
td.fond2 { background:url(fond2.jpg); }
td.fond3 { background:url(fond3.jpg); }
</style>
</head>
</body>
<table>
<tr>
<td class=fond1>Date</td>
<td class=fond1>Articles</td>
<td class=fond1>Prix</td>
</tr>
<tr>
<td class=fond2>12/08</td>
<td class=fond3>21</td>
<td class=fond3>5412</td>
</tr>
<tr>
<td class=fond2>14/08</td>
<td class=fond3>10</td>
<td class=fond3>2215</td>
</tr>
<tr>
<td class=fond2>16/08</td>
<td class=fond3>15</td>
<td class=fond3>3219</td>
</tr>
<tr>
<td class=fond2>19/08</td>
<td class=fond3>17</td>
<td class=fond3>2719</td>
</tr>
</table>
</body>
</html>
Différentier les lignes paires des lignes impaires
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Différentiation des lignes paires/impaires</title>
<style>
table
{
border: 1px solid black;
}
tr:nth-child(odd)
{
background-color: silver;
}
tr:nth-child(even)
{
background-color: white;
}
td
{
width: 200px;
}
</style>
</head>
</body>
<table>
<tr>
<td>Date</td>
<td>Articles</td>
<td>Prix</td>
</tr>
<tr>
<td>12/08</td>
<td>21</td>
<td>5412</td>
</tr>
<tr>
<td>14/08</td>
<td>10</td>
<td>2215</td>
</tr>
<tr>
<td>16/08</td>
<td>15</td>
<td>3219</td>
</tr>
<tr>
<td>19/08</td>
<td>17</td>
<td>2719</td>
</tr>
</table>
</body>
</html>
Alignement dans les cellules
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Alignement des cellules</title>
<style>
table { border: 1px solid black; }
td
{
border: 1px dashed red;
width: 200px;
height: 40px;
}
td.c1
{
text-align: center;
vertical-align: middle;
}
td.c2
{
text-align: left;
vertical-align: top;
}
td.c3
{
text-align: right;
vertical-align: bottom;
}
</style>
</head>
<body>
<table>
<tr>
<tr>
<td class="c1">Date</td>
<td class="c1">Articles</td>
<td class="c1">Prix</td>
</tr>
<tr>
<td class="c2">12/08</td>
<td class="c2">21</td>
<td class="c2">5412</td>
</tr>
<tr>
<td class="c3">17/08</td>
<td class="c3">14</td>
<td class="c3">1519</td>
</tr>
</table>
</body>
</html>
Accessibilité des tableaux complexes
Exemple 1
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Accessibilité dans un tableau complexe</title>
<style>
td
{
color:red;
text-align: center;
}
</style>
</head>
</body>
<table border="1">
<tr>
<th id="hea1">Nom</th>
<th id="hea2">Indemnité</th>
<th id="hea3">Valeur</th>
</tr>
<tr>
<th id="hea1_1" headers="hea1" rowspan="2">Daniel Dumond</th>
<th id="hea2_1" headers="hea2 hea1_1">Repas</th>
<td headers="hea3 hea1_1 hea2_1">186</td>
</tr>
<tr>
<th id="hea2_2" headers="hea2 hea1_1">Déplacements</th>
<td headers="hea3 hea1_1 hea2_2">87</td>
</tr>
<tr>
<th id="hea1_2" headers="hea1" rowspan="2">Pierre PetitJean</th>
<th id="hea2_4" headers="hea2 hea1_2">Repas</th>
<td headers="hea3 hea1_2 hea2_4">28</td>
</tr>
<tr>
<th id="hea2_5" headers="hea3 hea1_2">Déplacements</th>
<td headers="hea3 hea1_2 hea2_5">43</td>
</tr>
</table>
</body>
</html>Exemple 2
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Accessibilité dans un tableau complexe</title>
<style>
td
{
color:red;
text-align: center;
}
</style>
</head>
</body>
<table border="1" summary="Indemnités de déplacement et de repas pour Janvier, Février et Mars">
<tr>
<td> </td>
<th scope="col">Janvier</th>
<th scope="col">Février</th>
<th scope="col">Mars</th>
</tr>
<tr>
<th scope="row">Déplacements</th>
<td>145</td>
<td>214</td>
<td>89</td>
</tr>
<tr>
<th scope="row">Repas</th>
<td>227</td>
<td>195</td>
<td>48</td>
</tr>
</table>
</body>
</html>
Des infos-bulles dans un tableau
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Des info-bulles dans un tableau</title>
<style>
td
{
border: 1px solid black;
}
</style>
</head>
</body>
<table>
<tr>
<th title="infobulle sur la première cellule de titre">Titre colonne 1</th>
<th>Titre colonne 2</th>
<th>Titre colonne 3</th>
</tr>
<tr>
<td>Elément 1 ligne 1</td>
<td title="infobulle sur la deuxième cellule de la première ligne de données">Elément 2 ligne 1</td>
<td>Elément 3 ligne 1</td>
</tr>
<tr>
<td>Elément 1 ligne 1</td>
<td>Elément 2 ligne 1</td>
<td>Elément 3 ligne 1</td>
</tr>
</table>
</body>
</html>
Mise en forme sophistiquée CSS3
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Mise en forme sphistiquée CSS3</title>
<style>
table
{
border: 4px double black;
border-spacing: 0;
text-align: center;
color: blue;
font-weight: bold;
font-size: 200%;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: gray 5px 5px 6px;
-webkit-box-shadow: gray 5px 5px 6px;
}
th
{
color: #fff;
font-size: 110%;
text-shadow: gray 2px 2px 2px
}
tr:nth-child(odd)
{
background-color: silver;
}
tr:nth-child(even)
{
background-color: white;
}
td
{
width: 200px;
}
</style>
</head>
</body>
<table>
<tr>
<th>Date</th>
<th>Articles</th>
<th>Prix</th>
</tr>
<tr>
<td>12/08</td>
<td>21</td>
<td>5412</td>
</tr>
<tr>
<td>14/08</td>
<td>10</td>
<td>2215</td>
</tr>
<tr>
<td>16/08</td>
<td>15</td>
<td>3219</td>
</tr>
<tr>
<td>19/08</td>
<td>17</td>
<td>2719</td>
</tr>
</table>
</body>
</html>