首页 > 代码库 > 简易表格练习
简易表格练习
html:
<body> <!--html注释 css注释用/**/--> <!--主体--> <div id="body"> <!--第一张表--> <h2>1.我喜欢的歌曲</h2> <table width="100%" height="100px" border="1px" frame="hsides" rules="groups"> <tr> <th>序号</th><th>歌曲</th><th>歌手</th> </tr> <tr> <td>1.</td><td>杨柳</td><td>范宗沛</td> </tr> <tr> <td>2.</td><td>夜的钢琴曲五</td><td>石进</td> </tr> <tr> <td>3.</td><td>梦醒了</td><td>袁惟仁</td> </tr> <tr> <td>4.</td><td>故乡的原风景</td><td>宗次郎</td> </tr> <tr> <td>5.</td><td>还是朋友</td><td>张雨生</td> </tr> </table> <!--第二张表--> <h2>2.table 标签属性说明</h2> <table width="100%" height="500px" cellpadding="0" cellspacing="0" border="1" frame="border" rules="all"> <tr> <th>属性</th><th>说明</th> </tr> <tr> <td>width</td><td>定义宽度。功能与css的width属性一致</td> </tr> <tr> <td>height</td><td>定义高度。功能与css的width属性一致</td> </tr> <tr> <td>border</td><td>定义边框，属性值为0时，边框线隐藏，值越大边框线越粗。功能与css的border属性相似，但没有css边框 属性强大</td> </tr> <tr> <td>rules</td><td><p>取值：void、box、border、above、below、lhs、rhs、hsides、vsides</p> <p>当frame=void时，不显示表格最外围的边框，默认设置</p> <p>当frame=box时，显示四条边框</p> <p>当frame=border时，同时显示四条边框</p> <p>当frame=above时，显示顶部边框，其余隐藏</p> <p>当frame=below时，只显示底部边框，其余隐藏</p> <p>当frame=lhs时，只显示左而边框，其他隐藏</p> <p>当frame=rhs时，只显示右而边框，其他隐藏</p> <p>当frame=hsides时，只显示水平方向的两条边框，其他隐藏</p> <p>当frame=vsides时，只显示垂直方向的两条边框，其他隐藏</p> </td> </tr> <tr> <td>rules</td> <td> <p>取值：all、none、cols、groups</p> <p>当rules=all时，纵向分隔线和横向分隔线将全部显示，默认设置</p> <p>当rules=none时，纵向分隔线和横向分隔线将全部隐藏，显示表格的外框</p> <p>当rules=cols时，表格会隐藏横向的分隔线，显示表格的列</p> <p>当rules=rows时，表格会隐藏纵向的分隔线，显示表格的行</p> <p>当rules=groups时，为行组或列组设置边框，需要<tbody>标签等分组元素查看效果</p> </td> </tr> <tr> <td>cellpadding</td><td>定义单元格的补白，功能与css的padding属性一致</td> </tr> <tr> <td>cellspacing</td><td>定义单元格的边界，功能与css的margin属性一致</td> </tr> </table> <!--第三张表--> <h2>3.设计表格的附加结构（合并单元格、表格描述）</h2> <table width="100%" height="250px" border="1" frame="border" rules="all" summary="表格不可见描述"> <caption><span>表格可见描述，即表格总标题</span></caption> <tr> <th>序号</th><th>句子</th><th>作者</th> </tr> <tr> <td>0.</td><td colspan="2">html的colspan\rowspan属性通常用在td和th标签中用。summary表格摘要属性和图片的alt属性类似，caption包含行内元素，描述表格的标记文本。caption是标签，summary是属性。</td> </tr> <tr> <td>1.</td><td>一个不欣赏自己的人，是难以快乐的。</td><td rowspan="2">三毛</td> </tr> <tr> <td>2.</td><td>一个人至少拥有一个梦想，有一个理由去坚强。心若没有栖息的地方，到哪里都是在流浪。</td> </tr> <tr> <td>3.</td><td>多数的错失，是因为不坚持，不努力，不挽留，然后催眠自己说一切都是命运。 </td><td rowspan="3">somebody</td> </tr> <tr> <td>4.</td><td>若现在就觉得失望无力，未来那么远你该怎么扛。</td> </tr> <tr> <td>5.</td><td>我习惯了无所谓，却不是真的什么都不在乎。 </td> </tr> <tr> <td>6.</td><td>我一直以为人是慢慢变老的，其实不是，人是一瞬间变老的。</td><td>莫言</td> </tr> </table> <!--第四张表--> <h2>4.表格结构分组</h2> <p>方便网页设计师进行区域化控制，以方便数据显示、样式控制，还有利于搜索引擎的检索。</p> <p>如：表头表尾静止，主体滚动。</p> <table width="100%" height="250px" border="1" frame="hsides" rules="groups"> <caption>表格标题</caption> <colgroup> <col span="1" class="col1"> <col class="col2"> </colgroup> <thead> <tr> <th scope="col">标签</th><th>说明</th> </tr> </thead> <tbody> <tr> <td>thead</td><td>表示表格表头，可以使用单独的样式定义表头，并且打印时可以在分页产的上部打印表头。</td> </tr> <tr> <td>tbody</td><td>表示表格主体，浏览器在显示时，先下载表格后，再全部显示，可以使用该标签实现分段显示</td> </tr> <tr> <td>tfooter</td><td>表示表格表尾，如同WORD的页角属性。</td> </tr> <tr> <td>colgroup</td><td>标签定义表格列的分组，对列进行格式化。在table内部使用合法。</td> </tr> <tr> <td>col</td><td>为表格中一个或多个列定义属性值。可以在colgroup标签中使用，也可独立使用。</td> </tr> <tr> <th scope="rows">scope属性</th><td>为表格中一个或多个列定义属性值。可以在colgroup标签中使用，也可独立使用。</td> </tr> </tbody> <tfooter> <tr><td>more>></td><td></td></tr> </tfooter> </table> <h2>5.使用样式</h2> <table class="tb1" width="100%" height="100px"> <tr> <th>序号</th><th>歌曲</th><th>歌手</th> </tr> <tr> <td>1.</td><td>杨柳</td><td>范宗沛</td> </tr> <tr> <td>2.</td><td>夜的钢琴曲五</td><td>石进</td> </tr> <tr> <td>3.</td><td>梦醒了</td><td>袁惟仁</td> </tr> <tr> <td>4.</td><td>故乡的原风景</td><td>宗次郎</td> </tr> <tr> <td>5.</td><td>还是朋友</td><td>张雨生</td> </tr> </table> <h2>6.使用样式2</h2> <table class="tb2" width="100%" height="100px"> <tr> <th>序号</th><th>歌曲</th><th>歌手</th> </tr> <tr> <td>1.</td><td>杨柳</td><td>范宗沛</td> </tr> <tr> <td>2.</td><td>夜的钢琴曲五</td><td>石进</td> </tr> <tr> <td>3.</td><td>梦醒了</td><td>袁惟仁</td> </tr> <tr> <td>4.</td><td>故乡的原风景</td><td>宗次郎</td> </tr> <tr> <td>5.</td><td>还是朋友</td><td>张雨生</td> </tr> </table> </div> </body>
css:
/*注释*/ body{ background:ivory; width:800px; height:1800px; font-family:微软雅黑;font-size:14px; } /*注释*/ /*一般将所有元素的边距清为0*/ html,body, h1,h2,h3,h4,h5,h6, table,caption,tr,td,th, ul,ol,li,dl,dt,dd, form,legend,fieldset,img { padding:0px;margin:0px; } #body{width:800px;height:100%;padding:10px; font-family:微软雅黑;font-size:14px;} #body p{font-family:微软雅黑;font-size:14px;line-height:5px;} #body h2 { /*display:none;标题H2不显示*/ line-height:50px; /*text-indent:20px;*/ } .col1{background:#ff6666;} .col2{background:#ffcc99;} .tb1{background:#CCFF99;border:1px solid #009966;border-collapse:collapse;} .tb1 th,.tb1 tr,.tb1 td{background:#CCFF99;border:1px solid #009966;} .tb2{background:#FFCC33;border:1px solid #cc0066;border-spacing:10px 5px;} .tb2 th,.tb2 tr,.tb2 td{background:#CCFF99;border:1px solid #cc0066;}
简易表格练习
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。