Les tableaux et formulaires CSS sont les éléments les plus courants sur les pages Web. En plus d'afficher des données, les tableaux sont souvent utilisés pour la mise en page.
Une bordure de tableau avec de la couleur
L'exemple ci-dessus spécifie le texte et le texte des éléments Th, TD et th d'un tableau Bordure de couleur d'arrière-plan :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<!-- Table goes in the document BODY -->
<table class="gridtable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>
</body>
</html>Pour afficher une seule bordure d'un tableau, utilisez l'attribut border-collapse.
2 Largeur et hauteur du tableau
Les attributs Largeur et Hauteur définissent la largeur et la hauteur du tableau.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table,td,th
{
border:1px solid black;
}
table
{
width:50%;
}
th
{
height:50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>汽车品牌</th>
<th>产地</th>
</tr>
<tr>
<td>马自达</td>
<td>日本</td>
</tr>
<tr>
<td>菲亚特</td>
<td>意大利</td>
</tr>
<tr>
<td>林肯</td>
<td>美国</td>
</tr>
</table>
</body>Trois Alignement du texte du tableau
L'attribut text-align définit l'alignement horizontal , Comme gauche, droite ou centre
la propriété vertical-align définit l'alignement vertical, comme haut, bas ou centre
<!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>汽车品牌</th>
<th>产地</th>
</tr>
<tr>
<td>马自达</td>
<td>日本</td>
</tr>
<tr>
<td>菲亚特</td>
<td>意大利</td>
</tr>
<tr>
<td>林肯</td>
<td>美国</td>
</tr>
</table>
</body>
section suivante