H5 学习之旅-H5表格(7)
2015-09-17 20:03
537 查看
表格语法
table:简历表格
captian:表格标题
th:表格行表头
tr:表格行
td:单元格
thead:表格页眉
tfoot:表格页脚
tbody:表格主体
col:列属性
!!!代码实例
带标题的表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>H5表格</title> </head> <body> <p>表格</p> <table border="1"> <caption>表格</caption> <tr> <th>单元</th> <th>单元</th> <th>单元</th> </tr> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> </table> </body> </html>
效果图
带标签的表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>H5表格</title> </head> <body> <p>表格</p> <table border="1"> <caption>表格</caption> <tr> <th>单元</th> <th>单元</th> </tr> <tr> <td> <ul> <li>香蕉</li> <li>香蕉</li> <li>香蕉</li> </ul> </td> <td>我要吃药</td> </tr> </table> </body> </html>
效果图
单元格内边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>H5表格</title> </head> <body> <p>表格</p> <table border="1"> <caption>表格</caption> <tr> <th>单元</th> <th>单元</th> </tr> <tr> <th>单元</th> <th>单元</th> </tr> </table> <br/> <table border="1" cellpadding="10"> <caption>表格</caption> <tr> <th>单元</th> <th>单元</th> </tr> <tr> <th>单元</th> <th>单元</th> </tr> </table> </body> </html>
效果图
单元格外边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>H5表格</title> </head> <body> <p>表格</p> <table border="1"> <caption>表格</caption> <tr> <th>单元</th> <th>单元</th> </tr> <tr> <th>单元</th> <th>单元</th> </tr> </table> <br/> <table border="1" cellspacing="10"> <caption>表格</caption> <tr> <th>单元</th> <th>单元</th> </tr> <tr> <th>单元</th> <th>单元</th> </tr> </table> </body> </html>
效果图
设置单元格背景颜色是bgcolor,设置背景图片是background
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 交换机升级排障实例
- 原生js结合html5制作小飞龙的简易跳球
- sql2008启动代理未将对象应用到实例解决方案
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- HTML5实现微信拍摄上传照片功能
- 初识JQuery 实例一(first)
- JQuery入门基础小实例(1)
- jQuery+HTML5加入购物车代码分享
- 实现音乐播放器的代码(html5+css3+jquery)
- 2014 HTML5/CSS3热门动画特效TOP10
- jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
- HTML5使用DeviceOrientation实现摇一摇功能
- jquery+html5烂漫爱心表白动画代码分享