Tableau CSS


Tableau CSS


L'utilisation de CSS peut grandement améliorer l'apparence des tableaux HTML. Exemple :

CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Berglunds snabbköpChristina BerglundSweden
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Königlich EssenPhilip CramerGermany
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly
North/SouthSimon CrowtherUK
Paris spécialitésMarie BertrandFrance
The Big CheeseLiz NixonUSA
VaffeljernetPalle IbsenDenmark

Bordure du tableau

Spécifiez la bordure du tableau CSS à l'aide de l'attribut border.

L'exemple suivant spécifie une bordure noire pour les éléments Th et TD d'une table :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
table,th,td
{
	border:1px solid black;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>

Exécuter l'exemple »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Veuillez noter que dans l'exemple ci-dessus, le tableau a des bordures doubles. En effet, les éléments table et th/td ont des limites distinctes.

Pour afficher une seule bordure d'un tableau, utilisez l'attribut border-collapse.

Réduire la bordure

L'attribut border-collapse définit si la bordure du tableau est réduite en une seule bordure ou séparée :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

<p><b>注意;</b> 如果没有指定 !DOCTYPE  border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne


Largeur et hauteur du tableau

Les propriétés Largeur et Hauteur définissent la largeur et la hauteur du tableau.

L'exemple suivant est un tableau qui définit la largeur de 100 % et la hauteur du ème élément à 50 pixels :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
table,td,th
{
	border:1px solid black;
}
table
{
	width:100%;
}
th
{
	height:50px;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>

Exécuter l'exemple»

Cliquez sur le bouton « Exécuter l'exemple » pour afficher l'exemple en ligne


Alignement du texte du tableau

Alignement du texte et les propriétés d'alignement vertical dans le tableau .

L'attribut text-align définit l'alignement horizontal, comme gauche, droite ou centre :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
table,td,th
{
	border:1px solid black;
}
td
{
	text-align:right;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>

Exécuter l'exemple»

Cliquez sur le bouton « Exécuter l'exemple » pour afficher l'exemple en ligne

Propriété d'alignement vertical pour définir l'alignement vertical, tel que haut, bas ou milieu :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
table, td, th
{
	border:1px solid black;
}
td
{
	height:50px;
	vertical-align:bottom;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne


Remplissage de tableau

Si vous souhaitez contrôler les bordures entre les espaces dans le contenu d'un tableau, vous devez utiliser l'attribut padding des éléments td et th :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
table, td, th
{
	border:1px solid black;
}
td
{
	padding:15px;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


Couleur du tableau

L'exemple suivant spécifie la couleur de la bordure, et la couleur du texte et de l'arrière-plan du ème élément :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
table, td, th
{
	border:1px solid green;
}
th
{
	background-color:green;
	color:white;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher des exemples en ligne

Plus d'exemples

Exemple : Réaliser un formulaire personnalisé

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
#customers
{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	width:100%;
	border-collapse:collapse;
}
#customers td, #customers th 
{
	font-size:1em;
	border:1px solid #98bf21;
	padding:3px 7px 2px 7px;
}
#customers th 
{
	font-size:1.1em;
	text-align:left;
	padding-top:5px;
	padding-bottom:4px;
	background-color:#A7C942;
	color:#ffffff;
}
#customers tr.alt td 
{
	color:#000000;
	background-color:#EAF2D3;
}
</style>
</head>

<body>
<table id="customers">
<tr>
  <th>Company</th>
  <th>Contact</th>
  <th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>

Exécuter l'exemple »

Cliquez sur le bouton « Exécuter l'exemple » pour afficher l'exemple en ligne

Cet exemple montre comment créer un tableau personnalisé.

Exemple : Définir la position du titre du tableau

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
caption {caption-side:bottom;}
</style>
</head>

<body>

<table border="1">
<caption>Table 1.1 Customers</caption>
<tr>
  <th>Company</th>
  <th>Contact</th>
  <th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>

<p><b>注意:</b>如果!DOCTYPE指定IE8支持caption-side属性 .</p>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Cet exemple montre comment positionner le titre du tableau.