H5 学习之旅-H5表格(7)
2015-09-17 20:03
696 查看
表格语法
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
相关文章推荐
- H5 学习之旅-H5表格(7)
- H5 学习之旅-H5表格(7)
- HTML5 重力感应 事件讲解
- HTML5 重力感应试玩
- html5屏幕旋转事件 onorientationchange
- 20150913HTML5心得
- H5学习之旅-H5的超链接以及图片链接(6)
- H5学习之旅-H5的超链接以及图片链接(6)
- H5学习之旅-H5的超链接以及图片链接(6)
- H5学习之旅-H5的超链接以及图片链接(6)
- ajax与HTML5 history pushState/replaceState实例
- html5之div,article,section区别与应用
- html5预览上传图片缩略图
- HTML5 LocalStorage 本地存储
- html5实现表单内的上传文件框,建立一个可存取到该file的url。
- 中秋节福利---HTML5-玉兔吃月饼游戏
- 学习H5写的第一个登录页面
- H5学习之旅-H5的格式化(4)
- H5学习之旅-H5的格式化(4)
- H5学习之旅-H5的格式化(4)