<!--html文档开始--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--头部--> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> <title>表格练习</title> </head> <style type="text/css"> /*注释*/ body{ background:ivory; width:800px; height:2100px; 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; /*border-collapse:collapse/separate;合并单元格边框/单元格边框相互独立*/ } .tb1 th,.tb1 tr,.tb1 td{background:#CCFF99;border:1px solid #009966;padding:2px 0 2px 25px;} .tb2{ background:#FFCC33;border:1px solid #cc0066;border-spacing:10px 5px; /*border-spacing：早期的版本不支持该属性，定义相同效果的样式，需要同时结合html的cell-spacing属性来设置。 确保单元格之前相互独立，不能使用border-collapse来定义合并单元格； 不能用css的margin属性来代替，td不支持margin； */ } .tb2 th,.tb2 tr,.tb2 td{background:#CCFF99;border:1px solid #cc0066;} .tb3{background:#ccffcc;border:1px solid green; empty-cells:hide; padding:10px;/*两个值hide和show，控制空单元格是否显示*/ } .tb3 th,.tb3 tr,.tb3 td{background:#CCFF99;border:1px solid #cc0066;padding:30px;} </style> <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 class="tb2" 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 owspan属性通常用在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> <h2>7.使用样式3</h2> <table class="tb3" width="60%" height="100px"> <tr> <th>笔记本</th><th>地图</th><th>汉堡包</th> </tr> <tr> <td><img src="book.png"/></td><td><img src="map.png"/></td><td><img src="hamburger.png"/></td> </tr> <tr> <td><img src="book.png"/></td><td><img src="map.png"/></td> </tr> </table> </div> </body> </html> <!--html文档结束-->