Home > Article > Web Front-end > How to set table style with css? How to set table style with css
How to set table style with css? How to set table style with css
- 不言Original
- 2018-08-18 14:16:105504browse
A simple table sometimes feels monotonous, so how do you add styles to a CSS table? This article will introduce to you how to set the CSS table style.
1. A simple table
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. Border Merge: boder-collapse
Attribute value:
separate; (separate, default)
collapse; (merge)
table.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
border-collapse:collapse;
}3. Border-spacing (premise: border-collapse:separate;)
table.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
border-collapse:separate;
border-spacing: 45px;
}4. Set the position of the table title caption- side
Attribute value:
top;//Default
bottom;
left;
right;
table.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
border-collapse:separate;
border-spacing: 45px;
caption-side:bottom;
}5. When the width of the cell object exceeds the width defined by the cell, table-layout: fixed can be used to keep the table width unchanged
Attribute value: auto (default)
fixed (fixed width)
table.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
border-collapse:separate;
border-spacing: 5px;
table-layout: fixed;
caption-side:top;
}Related recommendations:
CSS control table style_html/css_WEB-ITnose
Proficient in CSS DIV web page style and layout settings forms and tables_html/css_WEB-ITnose
Detailed introduction to Css basic style tables
The above is the detailed content of How to set table style with css? How to set table style with css. For more information, please follow other related articles on the PHP Chinese website!