一個簡單的表格有時會覺得很單調,那要怎麼為css表格加樣式呢?本篇文章就跟大家介紹關於css表格樣式的設定方法。
1、一個簡單的表格
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、邊框合併:boder-collapse
屬性值:
separate;(分開,預設)
collapse;(合併)
table.css
table,td,th{ border:1px solid #aaa; font-size: 23px; border-collapse:collapse; }
3、邊框間距border-spacing(前提是:border-collapse:separate;)
table.css
table,td,th{ border:1px solid #aaa; font-size: 23px; border-collapse:separate; border-spacing: 45px; }
4、設定表格標題的位置caption- side
屬性值:
top;//預設
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、當單元格物件寬度超過單元格所定義的寬度時,可用table-layout:fixed保持表格寬度不被改變
屬性值:auto(預設)
fixed(寬度固定)
table.css
table,td,th{ border:1px solid #aaa; font-size: 23px; border-collapse:separate; border-spacing: 5px; table-layout: fixed; caption-side:top; }
相關建議:
#精通CSS DIV網頁樣式與佈局設定表單和表格_html/css_WEB-ITnose
以上是css怎麼設定表格樣式? css設定表格樣式的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!