Zblog之SiteNav导航模板文章页添加表格

深山的鹿博客原创，介绍一下Zblog之SiteNav导航模板文章页添加表格，先看一下成功截图，可实现调用后台数据输出需要导航的网址信息，说白了就是一个简单的调用，这里仅介绍一下显示出这个样式的方法。

首先打开style目录下的main.css，在末尾添加表格样式：

table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;    
}
.zebra td, .zebra th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;    
}

.zebra {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc; 
    -moz-box-shadow: 0 1px 1px #ccc; 
    box-shadow: 0 1px 1px #ccc;         
}

.zebra td, .zebra th {
    padding-left: 10px; 
}
.zebra tbody tr:nth-child(even) {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;      
}

.zebrb td, .zebrb th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: center;    
}
.zebrb {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc; 
    -moz-box-shadow: 0 1px 1px #ccc; 
    box-shadow: 0 1px 1px #ccc;         
}

<div class="zebra" >
<table cellspacing="0" cellpadding="5"  align="center" interlaced="disabled">
    <tbody>
        <tr class="firstRow">
            <td width="200" valign="middle" style=" word-break: break-all;" align="center">
                网站名称
            </td>
            <td width="646" valign="top" style=" word-break: break-all;"></td>
        </tr>
        <tr>
            <td width="200" valign="middle" style=" word-break: break-all;" align="center">
                网站域名
            </td>
            <td width="646" valign="top" style=" word-break: break-all;">
                {$article.Metas.alink}
            </td>
        </tr>
        <tr>
            <td width="200" valign="middle" style=" word-break: break-all;" align="center">
                网站说明
            </td>
            <td width="646" valign="top" style=" word-break: break-all;"></td>
        </tr>
        <tr>
            <td width="200" valign="middle" style=" word-break: break-all;" align="center">
                网站导航
            </td>
            <td width="646" valign="top" style=" word-break: break-all;"></td>
        </tr>
        <tr>
            <td width="200" valign="middle" style=" word-break: break-all;" align="center">
                站长邮箱
            </td>
            <td width="650" valign="top" style=" word-break: break-all;"></td>
        </tr>
        <tr>
            <td width="200" valign="middle" style=" word-break: break-all;" align="center">
                联系Q Q
            </td>
            <td width="646" valign="top" style=" word-break: break-all;"></td>
        </tr>
        <tr>
            <td width="200" valign="middle" style=" word-break: break-all;" align="center">
                收录时间
            </td>
            <td width="650" valign="top" style=" word-break: break-all;">
                {$article.Metas.time}
            </td>
        </tr>
        <tr>
            <td width="200" valign="middle" style=" word-break: break-all;" align="center">
                用户评论
            </td>
            <td width="700" valign="top" style=" word-break: break-all;"></td>
        </tr>
    </tbody>
</table>
</div>
<p>
</p>
<div class="zebrb" >
<table cellspacing="0" cellpadding="10"  align="center" interlaced="enabled">
    <tbody>
        <tr class="ue-table-interlace-color-single firstRow">
            <td width="294" valign="middle" style=" word-break: break-all;background-color: #f5f5f5" align="center">
                站长之家综合查询
            </td>
            <td width="294" valign="middle" style=" word-break: break-all;" align="center">
                百度Site一下
            </td>
            <td width="294" valign="middle" style=" word-break: break-all;background-color: #f5f5f5" align="center">
                爱站网综合查询
            </td>
        </tr>
    </tbody>
</table>
</div>