當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

W3School-CSS 表格实例

發布時間：2024/10/12 CSS 148 豆豆

生活随笔收集整理的這篇文章主要介紹了 W3School-CSS 表格实例小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS 表格實例

CSS 實例

CSS 背景實例
CSS 文本實例
CSS 字體(font)實例
CSS 邊框(border)實例
CSS 外邊距 (margin) 實例
CSS 內邊距 (padding) 實例
CSS 列表實例
CSS 表格實例
輪廓（Outline）實例
CSS 尺寸 (Dimension) 實例
CSS 分類 (Classification) 實例
CSS 定位 (Positioning) 實例
CSS 偽類 (Pseudo-classes)實例
CSS 偽元素 (Pseudo-elements)實例

01設置表格的布局

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>01設置表格的布局</title><style type="text/css">body {background-color: #FF7070;}table.one {table-layout: automatic;}table.two {table-layout: fixed;}</style></head><body><table class="one" border="1" width="100%"><tr><td width="20%">1000000000000000000000</td><td width="40%">1000</td><td width="40%">1000</td></tr></table><table class="two" border="1" width="100%"><tr><td width="20%">1000000000000000000000</td><td width="40%">1000</td><td width="40%">1000</td></tr></table></body></html>

02顯示表格中的空單元

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>02顯示表格中的空單元</title><style type="text/css">body {background-color: #FF7070;}table {border-collapse: separate;empty-cells: hide;}</style></head><body><table border="1"><tr><td>我老大</td><td>我老二</td></tr><tr><td>我老三</td><td></td></tr></table></body></html>

03合并表格邊框

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>03合并表格邊框</title><style type="text/css">table {border-collapse: collapse;}table,td,th {border: 1px solid black;}</style></head><body><table><tr><th>老幾</th><th>老幾</th></tr><tr><td>我老大</td><td>我老二</td></tr><tr><td>我老三</td><td>我老四</td></tr></table></body></html>

04設置表格邊框之間的空白

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>04設置表格邊框之間的空白</title><style type="text/css">table.one {border-collapse: separate;border-spacing: 10px;}table.two {border-collapse: separate;border-spacing: 10px 50px;}</style></head><body><table class="one" border="1"><tr><td>A1</td><td>A2</td></tr><tr><td>B1</td><td>B2</td></tr></table><table class="two" border="1"><tr><td>A1</td><td>A2</td></tr><tr><td>B1</td><td>B2</td></tr></table></body></html>

05設置表格標題的位置

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>05設置表格標題的位置</title><style type="text/css">caption {caption-side: bottom;}</style></head><body><table border="1"><caption>我是標題</caption><tr><td>111</td><td>222</td></tr><tr><td>333</td><td>444</td></tr></table></body></html>

06制作一個表格

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>制作一個表格</title><style type="text/css">#customers {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;width: 100%;border-collapse: collapse;}#customers td,#customers th {border: 1px solid #98bf21;}#customers th {text-align: left;background-color: #A7C942;color: #ffffff;}#customers tr.alt td {color: #000000;background-color: #EAF2D3;}</style></head><body><table id="customers"><tr><th>Company</th><th>Contact</th><th>Country</th></tr><tr><td>Apple</td><td>Steven Jobs</td><td>USA</td></tr><tr class="alt"><td>Baidu</td><td>Li YanHong</td><td>China</td></tr><tr><td>Google</td><td>Larry Page</td><td>USA</td></tr><tr class="alt"><td>Lenovo</td><td>Liu Chuanzhi</td><td>China</td></tr><tr><td>Microsoft</td><td>Bill Gates</td><td>USA</td></tr><tr class="alt"><td>Nokia</td><td>Stephen Elop</td><td>Finland</td></tr></table></body></html>

CSS 表格實例總結

轉載于:https://www.cnblogs.com/hoey/p/5094584.html

總結

以上是生活随笔為你收集整理的W3School-CSS 表格实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： win10设置安装包打不开怎么办解决W
下一篇： CSS3的chapter3