Maison >interface Web >tutoriel CSS >Comment définir le style du tableau avec CSS ? Comment définir le style du tableau avec CSS
Comment définir le style du tableau avec CSS ? Comment définir le style du tableau avec CSS
- 不言original
- 2018-08-18 14:16:105532parcourir
Un tableau simple semble parfois monotone, alors comment ajouter des styles à un tableau CSS ? Cet article vous présentera comment définir le style du tableau CSS.
1. Un tableau simple
table.html
<!doctype html><html><head>
<meta charset="utf-8">
<title>表格样式</title>
<link href="box.css" type="text/css" rel="stylesheet"></head><body>
<center>
<table class="class">
<caption>课程表</caption>
<tr>
<th>星期\课程</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<th>1-2节</th>
<td>数学</td>
<td>语文</td>
<td>化学</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<th>3-4节</th>
<td>英语</td>
<td>物理</td>
<td>化学</td>
<td>英语</td>
<td>体育</td>
</tr>
<tr>
<th>5-6节</th>
<td>数学</td>
<td>物理</td>
<td>体育</td>
<td>化学</td>
<td>美术</td>
</tr>
<tr>
<th>7-8节</th>
<td>数学</td>
<td>美术</td>
<td>化学</td>
<td>英语</td>
<td>体育</td>
</tr>
<tr>
<th>9-10节</th>
<td>生物</td>
<td>美术</td>
<td>生物</td>
<td>英语</td>
<td>物理</td>
</tr>
</table>
</center>
</body></html>table.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
} 2. Fusion des bordures : boder-collapse
Valeur de l'attribut :
separate; (séparé, par défaut)
collapse;
table.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
border-collapse:collapse;
} 3. Espacement des bordures (prémisse : border-collapse:separate;)
table.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
border-collapse:separate;
border-spacing: 45px;
}4, définissez la position du titre du tableau côté légende
valeur de l'attribut :
haut ;//Par défaut
en bas
à gauche ;
right;
table.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
border-collapse:separate;
border-spacing: 45px;
caption-side:bottom;
}5. Lorsque la largeur de l'objet cellule dépasse la largeur définie par la cellule, vous pouvez utiliser table-layout:fixed pour conserver la largeur du tableau n'est pas affectée. Modifiez la valeur de l'attribut
: auto (par défaut)
.
fixe (largeur fixe)
table.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
border-collapse:separate;
border-spacing: 5px;
table-layout: fixed;
caption-side:top;
}Recommandations associées :
Table de contrôle CSS style_html/css_WEB-ITnose
Introduction détaillée aux tables de style de base CSS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!