css基礎篇11-表格樣式

標

表格邊框合并
表格邊框的間距設置
表格標題位置的設置

表格可以說是網頁必備的元素之一，但是原生的表格樣式都是很丑，列如表格加入邊框的默認情況下，單元格與單元格之間有一定的空隙；設置單元格邊框間距等等，都是可以通過css來設置自己的默認樣式

表格邊框合并

默認情況下，表格有邊框的情況下，內部看似有一層填充物，其實是表格的外邊框和內部單元格的間距。

這層間距是可以通過表格的標簽屬性進行設置，讓它看起來像是合并了一樣，但是這樣的合并并不完美，會得到一個很粗的邊框。

理想中的邊框合并，應該達到exelce表格那樣，是一個細線表格。Css專門有個屬性是為了表格邊框合并服務的。

語法：border-collapse：屬性值

屬性值

會發現，通過css控制合并和通過標簽屬性合并的效果都不一樣，通過css控制的效果跟exelce表格一模一樣，屬于細線表格。

對比圖

表格邊框間距

如果想自己設置表格邊框的間距，一樣是可以通過css來控制。

語法：border-spacing:像素值;

這個屬性可以設置兩個值。指定了1個像素值時，這個值將作用于橫向和縱向上的間距；當指定了2個length值時，第1個作用于橫向間距，第2個作用于縱向間距。

兩個值

邊框被拉大

單元格之間的距離也是一樣的。

表格標題位置

表格的標題不一定都是設置在表格的上方，也有可能是設置在下方。

可以使用css來定義表格標題的位置

語法：caption-side:屬性值;

屬性值

這樣就可以得到一個倒置標題的表格

標題倒置

總結

標

表格作用是什么？
表格包含哪些基本元素？
表格包含哪些屬性？

表格的作用

最直觀展示統計信息，也是最直觀的反映數據間的關系，比用數據和文字描述更清晰、更易懂。能讓用戶更清晰、更有效率的處理繁瑣的數據，從而幫助我們快速且直觀的得到它們想要表現的內容。是一種很好的將對象屬性數據直觀、形象地"可視化"的手段。

學員入職信息表

公司倒閉統計表

表格包含了哪些元素？

<table></table>標簽--表格容器
<tr></tr>標簽--表行容器
<th></th>標簽--表頭
<td></td>標簽--表格單元

其中th和td是屬于同一級別

1、先創立<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樣式碼，讓你的表格更加漂亮，先放最終效果：

最終樣式

HTML表格代碼如下：

<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>