W3School-CSS 表格实例
生活随笔
收集整理的這篇文章主要介紹了
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