## 前言
表格作為頁面展現中一部分不可獲取,尤其在后臺管理界面中,我們對之既愛又恨。那么它有哪些樣式需要控制呢,又有哪些你所不知道的。本文通過一個簡單的table實例來幫你解析實現一個table表格實例所需要的基礎知識。
## 基本了解
1. 表格標題用caption標簽,標頭的用thead, 表格內容用tbody ,一個表格默認只有一個標題一個表格頭 一個表格內容,標題標簽的高度不算入table 的高度 ,表格的默認樣式需要修正初始化
2. 一般情況下針對數據表格建議使用table標簽,做好每個表格所需要的枚舉數據項總數(如每頁10條),做好分頁以及意外數據處理,當然也可以用div模擬表格布局。
3. td默認會根據內容擴充的,而且布局不是固定布局,為了統一美化處理,需要對每一個單元格做限制單行高寬,如果必須為多行文本且限制高度,內部再加div高度,td本身寫高度以及行高是無法限制的,如果不需要處理的采用自動拓展高度即可
4. 針對數據項的寬度可以采用百分比或者固定數值布局,需要根據不同數據項的需求采用合適的寬高以及樣式,例如身份證號、日期等要給合適的寬度,而標題長字段的要給較大的寬度值等
5. 設置寬度只需要在數據項的名稱設置一次即可,后面的表格內容布局會自動參考上面的比例
6. colspan為合并列,rowspan為合并行,在布局明顯為表格而且有合并單元格時,建議用table實現,簡約大方
## 代碼實踐
* html代碼部分
````
<table class="tableDemo" >
<caption >我是表格的標題</caption>
<thead>
<tr><th class="no">編號</th>
<th class="name">姓名</th>
<th class="idno">身份證號</th>
<th class="desc">描述</th></tr>
</thead>
<tbody>
<tr><td>001</td><td>李四趙武</td><td>131102199010242011</td><td>13110219901024201的v的的v的的v的的v的1</td></tr>
<tr><td>002</td><td>張三</td><td>131102199010242011</td><td>13的1</td></tr>
<tr><td>002</td><td>張三</td><td>131102199010242011</td><td>13的1</td></tr>
<tr><td>002</td><td>張三</td><td>131102199010242011</td><td>13的1</td></tr>
<tr><td>002</td><td>張三</td><td>131102199010242011</td><td>13的1</td></tr>
</tbody>
</table>
```
* css代碼部分
```
*{
margin: 0;
padding: 0;
}
.tableDemo {
width: 800px;
/*實際高度286px,如果不清楚實際高度可以不寫*/
/*height:251px;*/
border: 1px solid grey;
/*采用固定數據項的寬度決定布局*/
table-layout: fixed;
/*控制表格外間距*/
border-spacing: 0;
/* 設置合并邊框*/
border-collapse: collapse;
}
/*表格標題欄的樣式*/
.tableDemo caption {
height: 40px;
line-height: 40px;
font-size: 30px;
}
/*每一行的數據項*/
.tableDemo tr {
height: 40px;
line-height: 40px;
}
.tableDemo tr th,
.tableDemo tr td {
border: 1px solid grey;
}
/*table中的表格不能做多行超出隱藏 只能通過內部div的設置超出隱藏,這里直接設置內容為單行超出隱藏*/
.tableDemo tr td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tableDemo th {
line-height: 40px;
height: 40px;
}
/*針對各個數據項給不同的寬度*/
.tableDemo .no {
width: 100px;
}
.tableDemo .name {
width: 150px;
}
.tableDemo .idno {
width: 250px;
}
```
* 效果圖如下

- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi