查看“表格的实际应用”的源代码
←
表格的实际应用
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
该页面已被保护以防止编辑和其他操作。
您可以查看与复制此页面的源代码。
==跨行、跨列表格== ===跨行表格=== *[[文件:w5-24.png|600px]] *源代码: <nowiki><html> <body> <table width="100%" border="1"> <tr> <th>Month</th> <th>Savings</th> <th>Savings for holiday!</th> </tr> <tr> <td>January</td> <td>$100</td> <td rowspan="2">$50</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> </body> </html></nowiki> ===跨列表格=== *[[文件:w5-25.png|600px]] *源代码: <nowiki><html> <body> <table width="100%" border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td colspan="2">January</td> </tr> <tr> <td colspan="2">February</td> </tr> </table> </body> </html></nowiki> ===课堂练习=== *[[文件:w5-26.png|600px]] ==长表格的制作== *[[文件:w5-27.png]] * <thead> 定义表格头,必须包含<tr>行标记,一般包含表格前大标题和第一行列标题。 *<tfoot> 定义表格页脚,可以不包含<tr>行标记,一般包含合计行或脚注标记。 *<tbody> 定义一段表格主体,只能只包含<tr>行标记,可以指定多行数据划分为一组。 *源代码: <nowiki> <html> <body> <table border="1"> <thead> <tr> <th>Month</th><th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table> </body> </html></nowiki> ==利用表格进行局部排版== *原来的代码(单纯用<nowiki><ul></nowiki>的): *[[文件:w5-28.png|700px]] <nowiki><ul> <li><a href="#">马克思主义学院召开陶行知教育...3月5日</a></li> <li><a href="#">我校承办2017年山东省“农产品质量...3月5日</a></li> <li><a href="#">2017山东养老服务业高峰论坛在我...3月5日</a></li> <li><a href="#">校报荣获全国高校校报协会2016年...3月5日</a></li> <li><a href="#">浙江纺织服装职业技术学院、河北...3月5日</a></li> </ul></nowiki> *现在用表格重新排版: ===第一步,基于表格的布局=== *[[文件:w5-29.png|700px]] *html代码: <nowiki> <ul> <table> <tr> <td class="col1"><li><a href="#">新浪山东:山东商职院承办2017年...</a></li></td><td class="col2">3月5日</td> </tr> <tr> <td class="col1"><li><a href="#">大众网:山东商职院承办山东省职...</a></li></td> <td class="col2">3月5日</td> </tr> <tr> <td class="col1"><li><a href="#">新浪山东:2017山东养老服务业高...</a></li></td> <td class="col2">3月5日</td> </tr> <tr> <td class="col1"><li><a href="#">新浪山东:全国高校“形势与政策”...</a></li></td> <td class="col2">3月5日</td> </tr> <tr> <td class="col1"><li><a href="#">大众网:全国高校“形势与政策”课...</a></li></td> <td class="col2">3月5日</td> </tr> </table> </ul></nowiki> ===第二步,调整列表的样式=== *[[文件:w5-30.png|700px]] *CSS代码: <nowiki>.layer2-2-1 ul{ padding:0; margin:0;} .layer2-2-1 ul li{ padding:0 0 0 20px;list-style:url(images/arrow.gif) inside;line-height:250%;} </nowiki> ===第三步,利用表格微调布局=== *[[文件:w5-31.png|700px]] *CSS代码: <nowiki>.layer2-2-1 table{ width:90%;} .layer2-2-1 table .col1{ width:85%; } .layer2-2-1 table .col2{ width:15%;text-align:right;} </nowiki> ===第四步,装饰与美化=== *[[文件:w5-32.png|700px]] *CSS代码: <nowiki>.layer2-2-1 table .col2{ width:15%;text-align:right;color:gray;} .layer2-2-1 table tr:hover{ //background:black; background:lightblue; color:white; font-weight:bold; }</nowiki>
返回至
表格的实际应用
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息