html table样式_CSS表格样式
????表格的樣式一般可以在HTML中直接定義，但是結構和樣式需要分開聲明，這可以方便后期的維護和修改。CSS中的表格樣式有caption-side(表格標題位置)、border-collapse(表格邊框合并)、border-spacing(表格邊框間距)。?
caption-side
????caption-side屬性取值只有2個，如下表
| 屬性值 | 說明 |
| top | 標題在頂部(默認) |
| bottom | 標題在底部 |
????舉一個標題在底部的示例
DOCTYPE?html>
<html>
????<head>
????????<meta?charset="UTF-8"?/>
????????<title>表格標題位置title>
????????<style?type="text/css">
????????????table{
????????????????caption-side:?bottom;
????????????}
????????????table,td{
????????????????border:?1px?solid?silver;
????????????}
????????style>
????head>
????<body>
????????<table>
????????????<caption>四大天王caption>
????????????<tr>
????????????????<td>劉德華td>
????????????????<td>60歲td>
????????????tr>
????????????<tr>
????????????????<td>張學友td>
????????????????<td>60歲td>
????????????tr>
????????????<tr>
????????????????<td>郭富城td>
????????????????<td>56歲td>
????????????tr>
????????????<tr>
????????????????<td>黎明td>
????????????????<td>55歲td>
????????????tr>
????????table>
????body>
html>
border-collapse
????在表格加入邊框后單元格之間有一定的空隙?，為了美觀，我們可以把單元格之間的空隙去除。
????border-collapse屬性取值有2個，如下表
| 屬性值 | 說明 |
| separate | 邊框分開，有空隙 |
| collapse | 邊框合并，無空隙 |
????示例：?
DOCTYPE?html>
<html>
????<head>
????????<meta?charset="UTF-8"?/>
????????<title>表格邊框合并title>
????????<style?type="text/css">
????????????table{
????????????????border-collapse:?collapse;
????????????}
????????????table,td{
????????????????border:?1px?solid?silver;
????????????}
????????style>
????head>
????<body>
????????<table>
????????????<caption>四大天王caption>
????????????<tr>
????????????????<td>劉德華td>
????????????????<td>60歲td>
????????????tr>
????????????<tr>
????????????????<td>張學友td>
????????????????<td>60歲td>
????????????tr>
????????????<tr>
????????????????<td>郭富城td>
????????????????<td>56歲td>
????????????tr>
????????????<tr>
????????????????<td>黎明td>
????????????????<td>55歲td>
????????????tr>
????????table>
????body>
html>
?
border-spacing
????表格邊框的間距，直接用像素值。?
DOCTYPE?html>
<html>
????<head>
????????<meta?charset="UTF-8"?/>
????????<title>表格邊框間距title>
????????<style?type="text/css">
????????????table{
????????????????border-spacing:?5px;
????????????}
????????????table,td{
????????????????border:?1px?solid?silver;
????????????}
????????style>
????head>
????<body>
????????<table>
????????????<caption>四大天王caption>
????????????<tr>
????????????????<td>劉德華td>
????????????????<td>60歲td>
????????????tr>
????????????<tr>
????????????????<td>張學友td>
????????????????<td>60歲td>
????????????tr>
????????????<tr>
????????????????<td>郭富城td>
????????????????<td>56歲td>
????????????tr>
????????????<tr>
????????????????<td>黎明td>
????????????????<td>55歲td>
????????????tr>
????????table>
????body>
html>
本節(jié)主要學習了表格樣式，最后對其總結。
表格標題位置：caption-side ??
表格邊框合并：border-collapse
表格邊框間距：border-spacing
總結
以上是生活随笔為你收集整理的html table样式_CSS表格样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jeecg boot一对多新增的附表不会
- 下一篇： 天线巴伦制作和原理_10米段的春天 |