整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
標
表格可以說是網頁必備的元素之一，但是原生的表格樣式都是很丑，列如表格加入邊框的默認情況下，單元格與單元格之間有一定的空隙；設置單元格邊框間距等等，都是可以通過css來設置自己的默認樣式
默認情況下，表格有邊框的情況下，內部看似有一層填充物，其實是表格的外邊框和內部單元格的間距。
這層間距是可以通過表格的標簽屬性進行設置，讓它看起來像是合并了一樣，但是這樣的合并并不完美，會得到一個很粗的邊框。
理想中的邊框合并，應該達到exelce表格那樣，是一個細線表格。Css專門有個屬性是為了表格邊框合并服務的。
語法：border-collapse：屬性值
屬性值
會發(fā)現，通過css控制合并和通過標簽屬性合并的效果都不一樣，通過css控制的效果跟exelce表格一模一樣，屬于細線表格。
對比圖
如果想自己設置表格邊框的間距，一樣是可以通過css來控制。
語法：border-spacing:像素值;
這個屬性可以設置兩個值。指定了1個像素值時，這個值將作用于橫向和縱向上的間距；當指定了2個length值時，第1個作用于橫向間距，第2個作用于縱向間距。
兩個值
邊框被拉大
單元格之間的距離也是一樣的。
表格的標題不一定都是設置在表格的上方，也有可能是設置在下方。
可以使用css來定義表格標題的位置
語法：caption-side:屬性值;
屬性值
這樣就可以得到一個倒置標題的表格
標題倒置
標
最直觀展示統(tǒng)計信息，也是最直觀的反映數據間的關系，比用數據和文字描述更清晰、更易懂。能讓用戶更清晰、更有效率的處理繁瑣的數據，從而幫助我們快速且直觀的得到它們想要表現的內容。是一種很好的將對象屬性數據直觀、形象地"可視化"的手段。
學員入職信息表
公司倒閉統(tǒng)計表
其中th和td是屬于同一級別
1、先創(chuàng)立<table>標簽，作為表格的容器
<table> </table>
2、定義<tr>行的容器，之后才能往里面填充東西
<table> <tr></tr> </table>
3、然后可以往里面填充東西，根據需要填充的類型，是表頭還是表體來選擇合適的單元格標簽
<table> <tr> <th>我是表頭</th> </tr> <tr> <td>我是單元格</td> </tr> </table>
代碼結構圖
表格效果圖
border屬性--邊框線條粗細
border屬性
cellpadding屬性--單元格內邊距
cellpadding屬性
cellspacing屬性--單元格外邊距
cellspacing屬性
table基本結構總結
5行CSS樣式碼，讓你的表格更加漂亮，先放最終效果：
最終樣式
<table class="style-table">
<thead>
<tr>
<th>序號</th>
<th>物品名稱</th>
<th>金額</th>
<th>備注</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>洗衣粉</td>
<td>15.00</td>
<td>自己用</td>
</tr>
<tr class="active-row">
<td>2</td>
<td>潔爾陰</td>
<td>25.00</td>
<td>老婆用</td>
</tr>
<tr >
<td>3</td>
<td>搓衣板</td>
<td>5.00</td>
<td>自己用</td>
</tr>
</tbody>
</table>*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
