CSS表格設定
css表格屬性可以極大的改善表格的外觀
表格邊框
- 在css中設定表格邊框，使用
border
- 為
table
th
td
<html>
<head>
<style type="text/css">
table,th,td{
border:1px solid blue;
}
</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>
👇運作結果👇
- 上例中的表格具有雙線條邊框。這是由于
table
th
td
- 如果需要把表格顯示為單線條，則需要使用
border-collapse
折疊邊框
-
border-collapse
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table{
border-collapse:collapse;
}
table, td, th{
border:1px solid blue;
}
</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>
👇運作結果👇
border-collapse
- JavaScript文法👇
| 值 | 描述 |
|---|---|
| 預設值。邊框會被分開。不會忽略 |
| 如果可能，邊框會合并為一個單一的邊框。會忽略 |
| 規定應該從父元素繼承 |
表格寬度和高度
- 通過
width
height
table{
width:100%;
}
th{
height:50px;
}
表格文本對齊
-
text-align
vertical-align
-
text-align
-
vertical-align
-
表格内邊距
- 如需控制表格中内容與邊框的距離，請為
td
th
padding
表格顔色
- 如需控制表格的顔色請分别為
table
td
th
border
background-color
color
| 屬性 | 描述 | 值 |
|---|---|---|
| 設定是否把表格邊框合并為單一的邊框 | |
| 設定分隔單元格邊框的距離 (僅用于“分離邊框”模式) | 兩個長度——前者對應水準間距，後者對用垂直 一個長度——定義水準和垂直的間距 |
| 設定表格标題的位置 | |
| 設定是否顯示表格中的空單元格 僅用于“分離邊框”模式 | |
| 設定顯示單元，行和列的規則 | |