HTML网状结构的DOM实现

　　前一阵写了一个日期插件，在对日期的排列时需要实现一个网状表格一样的东西来放置日期。想了许多方法，下面把这些方法罗列，以备以后查用。

　　1.table实现

<style>
table{width:170px;}
td{width:14%;height:24px;line-height:24px;border:1px solid #e0e0e0;}
</style>
<table>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
...
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>

　　优点：此种方法，css和dom结构非常简洁。

　　缺点：每一行都有tr包裹,脚本操作不太容易。

　　2.div实现方式1

<style>
.days{width:170px;border:1px solid #e0e0e0; border-width:1px 0 0 1px;}
.days .day{ float:left;width:13%;height:24px;line-height:24px;border:1px solid #e0e0e0; border-width:0 1px 1px 0;}
</style>
<div class="days">
    <div class="day">&nbsp;</div>
    <div class="day">&nbsp;</div>
    <div class="day">&nbsp;</div>
    <div class="day">&nbsp;</div>
    <div class="day">&nbsp;</div>
    <div class="day">&nbsp;</div>
    <div class="day">&nbsp;</div>
</div>

优点：排版方便，利于脚本生成。

缺点：要精确计算每个div的宽度。

 3.div实现方式2

<style>
.days{width:170px;}
.days .day{ float:left; margin-top:-1px; margin-left:-1px;width:13%;height:24px;line-height:24px;border:1px solid #e0e0e0;}
</style>
<div class="days">
    <div class="day">&nbsp;</div>
    <div class="day">&nbsp;</div>
    <div class="day">&nbsp;</div>
    <div class="day">&nbsp;</div>
    <div class="day">&nbsp;</div>
    <div class="day">&nbsp;</div>
    <div class="day">&nbsp;</div>
</div>

优点：排版方便，利于脚本生成，无需计算。

缺点：当实现边框的hover效果时，需要添加z-index。