向大家請(qǐng)教一下，以下圖片的表格樣式代碼如何用html+css寫(xiě)出來(lái)，新手求教，謝謝大家了
2 回答
已采納
幕布斯6393831
TA貢獻(xiàn)111條經(jīng)驗(yàn) 獲得超40個(gè)贊
<!DOCTYPE html>
<html>
<head>
? ?<meta charset="UTF-8">
? ?<title>Document</title>
? ?<style>
? ? ? ?table{
? ? ? ? ? ?border-collapse: collapse;
? ? ? ? ? ?/*border-collapse 屬性設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框，還是象在標(biāo)準(zhǔn)的 HTML 中那樣分開(kāi)顯示。*/
? ? ? ? ? ?width: 800px;
? ? ? ? ? ?margin: ?auto;
? ? ? ? ? ?border:1px solid #ccc;
? ? ? ?}
? ? ? ?thead{
? ? ? ? ? ?background-color: #333;
? ? ? ? ? ?color: #fff;
? ? ? ? ? ?text-align: left;
? ? ? ?}
? ? ? ?tr:last-child{
? ? ? ? ? ?background: #666;
? ? ? ? ? ?color: #fff;
? ? ? ?}
? ?</style>
</head>
<body>
<table border="1">
? ?<thead>
? ?<tr>
? ? ? ?<th>表頭</th>
? ? ? ?<th>表頭</th>
? ? ? ?<th>表頭</th>
? ? ? ?<th>表頭</th>
? ?</tr>
? ?</thead>
? ?<tbody>
? ?<tr>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ?</tr>
? ?<tr>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ?</tr>
? ?<tr>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ?</tr>
? ?<tr>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ?</tr>
? ?<tr>
? ? ? ?<td colspan="2">合計(jì)</td>
? ? ? ?<td colspan="2">999</td>
? ?</tr>
? ?</tbody>
</table>
</body>
</html>
<html>
<head>
? ?<meta charset="UTF-8">
? ?<title>Document</title>
? ?<style>
? ? ? ?table{
? ? ? ? ? ?border-collapse: collapse;
? ? ? ? ? ?/*border-collapse 屬性設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框，還是象在標(biāo)準(zhǔn)的 HTML 中那樣分開(kāi)顯示。*/
? ? ? ? ? ?width: 800px;
? ? ? ? ? ?margin: ?auto;
? ? ? ? ? ?border:1px solid #ccc;
? ? ? ?}
? ? ? ?thead{
? ? ? ? ? ?background-color: #333;
? ? ? ? ? ?color: #fff;
? ? ? ? ? ?text-align: left;
? ? ? ?}
? ? ? ?tr:last-child{
? ? ? ? ? ?background: #666;
? ? ? ? ? ?color: #fff;
? ? ? ?}
? ?</style>
</head>
<body>
<table border="1">
? ?<thead>
? ?<tr>
? ? ? ?<th>表頭</th>
? ? ? ?<th>表頭</th>
? ? ? ?<th>表頭</th>
? ? ? ?<th>表頭</th>
? ?</tr>
? ?</thead>
? ?<tbody>
? ?<tr>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ?</tr>
? ?<tr>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ?</tr>
? ?<tr>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ?</tr>
? ?<tr>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ? ? ?<td>表內(nèi)容格</td>
? ?</tr>
? ?<tr>
? ? ? ?<td colspan="2">合計(jì)</td>
? ? ? ?<td colspan="2">999</td>
? ?</tr>
? ?</tbody>
</table>
</body>
</html>
-
Lukkk你好，謝謝你的回答啦，我試了一下代碼，發(fā)現(xiàn)沒(méi)有達(dá)到圖片的效果，首先是表頭位置居中，然后最后一欄總計(jì)那一行，背景顏色沒(méi)有弄的上去，在請(qǐng)問(wèn)一下怎么調(diào)試呢？ -
幕布斯6393831我修改了下
-
Lukkk太感謝啦，表頭那一行還是居中，還有我還想請(qǐng)教一下，有什么零基礎(chǔ)的常用代碼詞匯的資料推薦嘛，上網(wǎng)看視頻，結(jié)合自己做的，再結(jié)合一些其他朋友做的，發(fā)現(xiàn)好多詞匯都沒(méi)看到過(guò)，麻煩你啦?。?！再次感謝啦！！
點(diǎn)擊展開(kāi)后面3條
添加回答
舉報(bào)
0/150
提交
取消