向大家請教一下，以下圖片的表格樣式代碼如何用html+css寫出來，新手求教，謝謝大家了
2 回答
已采納
幕布斯6393831
TA貢獻111條經驗 獲得超40個贊
<!DOCTYPE html>
<html>
<head>
? ?<meta charset="UTF-8">
? ?<title>Document</title>
? ?<style>
? ? ? ?table{
? ? ? ? ? ?border-collapse: collapse;
? ? ? ? ? ?/*border-collapse 屬性設置表格的邊框是否被合并為一個單一的邊框，還是象在標準的 HTML 中那樣分開顯示。*/
? ? ? ? ? ?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>表內容格</td>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ?</tr>
? ?<tr>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ?</tr>
? ?<tr>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ?</tr>
? ?<tr>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ?</tr>
? ?<tr>
? ? ? ?<td colspan="2">合計</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 屬性設置表格的邊框是否被合并為一個單一的邊框，還是象在標準的 HTML 中那樣分開顯示。*/
? ? ? ? ? ?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>表內容格</td>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ?</tr>
? ?<tr>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ?</tr>
? ?<tr>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ?</tr>
? ?<tr>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ? ? ?<td>表內容格</td>
? ?</tr>
? ?<tr>
? ? ? ?<td colspan="2">合計</td>
? ? ? ?<td colspan="2">999</td>
? ?</tr>
? ?</tbody>
</table>
</body>
</html>
-
Lukkk你好，謝謝你的回答啦，我試了一下代碼，發現沒有達到圖片的效果，首先是表頭位置居中，然后最后一欄總計那一行，背景顏色沒有弄的上去，在請問一下怎么調試呢？ -
幕布斯6393831我修改了下
-
Lukkk太感謝啦，表頭那一行還是居中，還有我還想請教一下，有什么零基礎的常用代碼詞匯的資料推薦嘛，上網看視頻，結合自己做的，再結合一些其他朋友做的，發現好多詞匯都沒看到過，麻煩你啦！??！再次感謝啦??！
點擊展開后面3條
- 2 回答
- 0 關注
- 1353 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消