HTML的TABLE边框技巧 HTML表格TABLE 边框样式美化.pdfVIP

运用CSS语法美化表格Table 注：除非特殊声明，本文所举各例插入的表格的cellspacing、cellpadding、border值均为0。 例一：1px 表格 很多人热衷于制作1px 表格，于是发明了各式各样的方法，用css 做起来可就灵活的多。如果要制作一 个1x1 的1px 表格只要简单定义一下边框值就可以了。我们首先用Dreamweaver插入一个1x1表格，宽度 为50，然后在该表格table 或者td 中定义border:1solid teal,所做的表格的效果如下： 但是要制作一个非1x1 的表格 （如2x2）就稍微麻烦些，因为如果直接定义td 样式border:1solidteal ， 则显示的效果如下： 你会发现表格外框为1px，而里面则变成了2px 了，这是由于叠加的原因。为了解决这么问题我们可以 这样做： 首先为td 定义样式：border:#cc0000 solid;border-width:0 1 10,这样表格表现为： 然后再为table 定义样式:border:#cc0000 solid;border-width:10 0 1,这样就可做作成一个完整的1px 表 格了。 例二：粗边框的1px 表格 此表格的内格线为1px 而外边框为3px，有了例一的基础做起来就不难了，只要修改border-width值就 行了。 对table 所使用的样式的代码是：border:blue solid;border-width:3 2 2 3 对td 所使用的样式的代码是：border:blue solid;border-width:0 1 10 例三：虚线框表格 做法和例一类似，border-style 从solid 改为dashed。 对table 所使用的样式的代码是 ：border:blackdashed;border-width:10 0 1 对td 所使用的样式的代码是：border:blackdashed;border-width:0 1 10 例四：点线边框表格 注意点线 （dotted）的最小象素为2。 对table 所使用的样式的代码是 ：border:green dotted ;border-width:2 0 0 2 对td 所使用的样式的代码是 ：border:green dotted;border-width:0 2 2 0 例五：双线边框表格 注意双线 （double）的最小象素为3。 对table 所使用的样式的代码是 ：border:teal4 double 对td 所使用的样式的代码是 ：border:teal 1solid 例六：outset 外框表格 对table 所使用的样式的代码是 ：border:3 outset 对td 所使用的样式的代码是 ：border: 1solid 例七：inset 外框表格 对table 所使用的样式的代码是 ：border:3 inset 对td 所使用的样式的代码是 ：border: 1solid 例八：ridge 外框表格 对table 所使用的样式的代码是 ：border:#ee0000 3 ridge 对td 所使用的样式的代码是 ：border: 1solid 例九：综合使用一 这个表格的外框采用的是脊线，内单元格边框是槽线，注意表格插入时cellspacing 设为1 了。 对table 所使用的样式的代码是 ：border:skyblue 4 ridge 对td 所使用的样式的代码是 ：border: navy 1groove 例十：综合使用二 别以为这是九个表格，其实他们是一个表格中的九个单元格，由于表格外边框为0，所以你看不到罢了。 只需对td 使用样式：border:maroon 3 double，另外别忘了把表格的cellspacing 设为1哦。 例十一：综合使用三 此表格的上下左右边框采用了不同的样式，你可以根据喜好自行更改。 对table 所使用的样式的代码是 ：border:purple 4 ;border-style:dashed double 对td 所使用的样式的代码是 ：border:1solid 例十二：综合使用四 这是一个双线边框的1px 表格，和例五比较起来要显得精巧，具体做法是这样的: 1.先做一个 1x1 的