学习笔记-html5-表格元素
2017-07-12 16:44
351 查看
四段代码分别完成了以下功能
1.使用了表格的基本标签
注意thead,tbody,tfoot存在的意义,以及tfoot里面的使用方法2.设置某行的背景的颜色
3.设置某列的背景颜色,方法一
注意占位,以及span的使用方法4.设置某列的背景颜色,方法二
代码:<html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5-表格</title> </head> <body> <h1>1.表格中的基本属性</h1> <p>包含有caption,thead,tbody,tfoot</p> <p>其中,thead内使用th;tbody和tfoot使用tr和td</p> <table border="1"> <caption>张三的成绩表</caption> <thead> <th>学科</th> <th>成绩</th> <th>排名</th> </thead> <tbody> <tr> <td>语文</td> <td>99</td> <td>1</td> </tr> <tr> <td>数学</td> <td>100</td> <td>1</td> </tr> <tr> <td>外语</td> <td>6</td> <td>33</td> </tr> </tbody> <tfoot> <tr> <td colspan="3"> 总分:205 总排名:22</td> </tr> </tfoot> </table> <br> <h1>2.将表格中的某行的背景色设置为红色</h1> <table border="1"> <caption>张三的成绩表</caption> <thead> <th>学科</th> <th>成绩</th> <th>排名</th> </thead> <tbody> <tr style="background-color: red"> <td>语文</td> <td>99</td> <td>1</td> </tr> <tr> <td>数学</td> <td>100</td> <td>1</td> </tr> <tr> <td>外语</td> <td>6</td> <td>33</td> </tr> </tbody> <tfoot> <tr> <td colspan="3"> 总分:205 总排名:22</td> </tr> </tfoot> </table> <br> <h1>3.1.将表格中的某列的背景色设置为红色-方法一</h1> <table border="1"> <colgroup span="1"><!--占位符,如果没有这一行--> <colgroup style="background-color: red" span="1"> <caption>张三的成绩表</caption> <thead> <th>学科</th> <th>成绩</th> <th>排名</th> </thead> <tbody> <tr> <td>语文</td> <td>99</td> <td>1</td> </tr> <tr> <td>数学</td> <td>100</td> <td>1</td> </tr> <tr> <td>外语</td> <td>6</td> <td>33</td> </tr> </tbody> <tfoot> <tr> <td colspan="3"> 总分:205 总排名:22</td> </tr> </tfoot> </table> <br> <h1>3.2.将表格中的某列的背景色设置为红色-方法二</h1> <table border="1"> <colgroup> <col span="1"> <col style="background-color: red" span="1"> </colgroup> <caption>张三的成绩表</caption> <thead> <th>学科</th> <th>成绩</th> <th>排名</th> </thead> <tbody> <tr> <td>语文</td> <td>99</td> <td>1</td> </tr> <tr> <td>数学</td> <td>100</td> <td>1</td> </tr> <tr> <td>外语</td> <td>6</td> <td>33</td> </tr> </tbody> <tfoot> <tr> <td colspan="3"> 总分:205 总排名:22</td> </tr> </tfoot> </table> <br> </body> </html>
效果图:
相关文章推荐
- 【HTML5学习笔记】5:表格元素的使用
- html5权威指南 学习笔记(1) 之 新增的主体结构元素
- HTML5学习笔记简明版(9):变化的元素和属性
- HTML5学习笔记:HTML5 Video元素
- HTML5学习笔记简明版(10):过时的元素和属性
- Web前端学习笔记(2)-html5新增的结构元素
- Html5学习笔记1 元素 标签 属性
- html5学习渐阶笔记---样式,链接,表格
- HTML5学习笔记简明版(9):变化的元素和属性
- HTML学习笔记(二)_HTML5常用元素与属性
- HTML学习笔记(五)_HTML5表单相关元素和属性
- HTML5 developer‘s cookbook 学习笔记(新的结构元素)
- TWaver HTML5学习笔记 —— 拓扑元素添加标签图标
- 【HTML5+css3】学习笔记之元素汇总
- HTML5学习笔记简明版(10):废弃的元素和属性
- TWaver HTML5学习笔记 —— 复制网络元素
- HTML5学习笔记简明版(9):变化的元素和属性
- html5学习渐阶笔记---元素,属性以及格式化方式
- 【HTML5+css3】学习笔记之音频元素和视频元素
- 【HTML5+css3】学习笔记之嵌入元素