HTML常用table样式
程序员文章站
2022-03-13 23:26:26
...
常用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>