這篇文章主要為大家展示了“css如何設(shè)置表格樣式”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css如何設(shè)置表格樣式”這篇文章吧。
成都創(chuàng)新互聯(lián)公司基于分布式IDC數(shù)據(jù)中心構(gòu)建的平臺為眾多戶提供服務(wù)器托管 四川大帶寬租用 成都機(jī)柜租用 成都服務(wù)器租用。
1、一個簡單的表格
table.html
<!doctypehtml><html><head>
<metacharset="utf-8">
<title>表格樣式</title>
<linkhref="box.css"type="text/css"rel="stylesheet"></head><body>
<center>
<tableclass="class">
<caption>課程表</caption>
<tr>
<th>星期\課程</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<th>1-2節(jié)</th>
<td>數(shù)學(xué)</td>
<td>語文</td>
<td>化學(xué)</td>
<td>英語</td>
<td>英語</td>
</tr>
<tr>
<th>3-4節(jié)</th>
<td>英語</td>
<td>物理</td>
<td>化學(xué)</td>
<td>英語</td>
<td>體育</td>
</tr>
<tr>
<th>5-6節(jié)</th>
<td>數(shù)學(xué)</td>
<td>物理</td>
<td>體育</td>
<td>化學(xué)</td>
<td>美術(shù)</td>
</tr>
<tr>
<th>7-8節(jié)</th>
<td>數(shù)學(xué)</td>
<td>美術(shù)</td>
<td>化學(xué)</td>
<td>英語</td>
<td>體育</td>
</tr>
<tr>
<th>9-10節(jié)</th>
<td>生物</td>
<td>美術(shù)</td>
<td>生物</td>
<td>英語</td>
<td>物理</td>
</tr>
</table>
</center>
</body></html>
table.css
table,td,th{
border:1pxsolid#aaa;
font-size:23px;
}
2、邊框合并:boder-collapse
屬性值:
separate;(分開,默認(rèn))
collapse;(合并)
table.css
table,td,th{
border:1pxsolid#aaa;
font-size:23px;
border-collapse:collapse;
}
3、邊框間距border-spacing(前提是:border-collapse:separate;)
table.css
table,td,th{
border:1pxsolid#aaa;
font-size:23px;
border-collapse:separate;
border-spacing:45px;
}
4、設(shè)置表格標(biāo)題的位置caption-side
屬性值:
top;//默認(rèn)
bottom;
left;
right;
table.css
table,td,th{
border:1pxsolid#aaa;
font-size:23px;
border-collapse:separate;
border-spacing:45px;
caption-side:bottom;
}
5、當(dāng)單元格對象寬度超過單元格所定義的寬度時,可用table-layout:fixed保持表格寬度不被改變
屬性值:auto(默認(rèn))
fixed(寬度固定)
table.css
table,td,th{
border:1pxsolid#aaa;
font-size:23px;
border-collapse:separate;
border-spacing:5px;
table-layout:fixed;
caption-side:top;
}
以上是“css如何設(shè)置表格樣式”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
文章標(biāo)題:css如何設(shè)置表格樣式
文章路徑:http://bm7419.com/article2/geegoc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)站排名、響應(yīng)式網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站維護(hù)、網(wǎng)站策劃
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)