转自:http://atgoingguoat.iteye.com/blog/2074431
常用table样式,备自己常年复制用。
效果图
- <!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=gb2312” />
- <title>无标题文档</title>
- <style type=“text/css”>
- <!–
- /************ Table ************/
- .xwtable {width: 100%;border-collapse: collapse;border: 1px solid #ccc;}
- .xwtable thead td {font-size: 12px;color: #333333;text-align: center;background: url(table_top.jpg) repeat-x top center;border: 1px solid #ccc; font-weight:bold;}
- .xwtable tbody tr {background: #fff;font-size: 12px;color: #666666;}
- .xwtable tbody tr.alt-row {background: #f2f7fc;}
- .xwtable td{line-height:20px;text-align: left;padding:4px 10px 3px 10px;height: 18px;border: 1px solid #ccc;}
- –>
- </style>
- </head>
- <body>
- <table class=“xwtable”>
- <thead>
- <tr>
- <td>条数(可去掉这行)</td>
- <td>内容(可去掉这行)</td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>第1条</td>
- <td>内容内容内容</td>
- </tr>
- <tr>
- <td>第2条</td>
- <td>内容内容内容内容</td>
- </tr>
- <tr>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td> </td>
- <td> </td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>
今天的文章HTML常用table样式分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/33587.html