表格-示例（詳細代碼）
要作出上述表格來代碼以下：html
文檔自帶字體
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
樣式：
<style>
table{
text-align: center;文字居中
width:350px;表格寬
height: 120px;表格高
}
table tbody tr td{
border-top: 1px red solid;
}三條橫線
table tbody tr:
first-child td{
border-top: 2px red solid;
}最上面那一條粗點的橫線單獨設樣式
</style>
</head>
<body>
<table
cellspacing="0" cellpadding="0"（表格原本有內外邊距，將這兩個值設爲0後，便不會有邊距）>（表格table）
<thead>(表頭)
<tr>（table表頭）
<th>#</th>（字體會加粗的th）
<th>First Name</th>
<th>Last Name</th>
<th>User Name</th>
</tr>
</thead>
<tbody>（表身體）
<tr>（表身體1）
<td>1</td>（字體正常的td）
<td>亮</td>
<td>成</td>
<td>@liang</td>
</tr>
<tr
style="background: cornflowerblue;"（內聯樣式-只變這一個tr裏的內容樣式）>（表身體2）
<td>2</td>
<td>亮</td>
<td>成</td>
<td>@liang</td>
</tr>
<tr>（表身體3）
<td>3</td>
<td>亮</td>
<td>成</td>
<td>@liang</td>
</tr>
</tbody>
</table>
</body>
</html>
相關文章
- 1. SQLServer動態掩碼的詳細介紹（代碼示例）
- 2. Hadoop RCFile存儲格式詳解（源碼分析、代碼示例）
- 3. Bootstrap表格示例
- 4. ExtJS表格示例
- 5. Android APP退出提示——詳細代碼
- 6. co yield避免嵌套詳細代碼示例。
- 7. JDK7新特性詳細說明及代碼示例
- 8. iOS 3D Touch超詳細入門(附帶demo示例代碼)
- 9. 淺談Java內部類（超詳細代碼示例）
- 10. 快速排序詳細圖解分析（含代碼示例）
- 更多相關文章...
- • Markdown 代碼 - Markdown 教程
- • Eclipse 代碼模板 - Eclipse 教程
- • IntelliJ IDEA代碼格式化設置
- • IntelliJ IDEA安裝代碼格式化插件
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
