HTML表格标记教程(48):CSS修饰表格
发布时间：2020-03-21 05:35:25 所属栏目：编程 来源：站长网
导读：此刻我们来看看奈何奇妙运用css语法美化表格。 注：除非非凡声明，本文所举各例插入的表格的cellspacing、cellpadding、border值均为0。例一：1px表格 许多人热衷于建造1px表格，于是发现了各式百般的要领，用css做起来可就机动的多。假如要建造一个1x1的1
|
此刻我们来看看奈何奇妙运用css语法美化表格。 注：除非非凡声明，本文所举各例插入的表格的cellspacing、cellpadding、border值均为0。 例一：1px表格 许多人热衷于建造1px表格，于是发现了各式百般的要领，用css做起来可就机动的多。假如要建造一个1x1的1px表格只要简朴界说一下边框值就可以了。我们起首用Dreamweaver插入一个1x1表格，宽度为50，然后在该表格table可能td中界说border:1 solid teal ，所做的表格的结果如下： 可是要建造一个非1x1的表格(如2x2)就轻微贫困些，由于假如直接界说td样式border:1 solid teal，则表现的结果如下： 你会发明表分外框为1px，而内里则酿成了2px了，这是因为叠加的缘故起因。为了办理这么题目我们可以这样做： 起首为td界说样式：border:#cc0000 solid;border-width:0 1 1 0，这样表格示意为 然后再为table界说样式：:border:#cc0000 solid;border-width:1 0 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 1 0 例三：虚线框表格 做法和例一相同，border-style从solid改为dashed。对table所行使的样式的代码是：border:black dashed;border-width:1 0 0 1，对td所行使的样式的代码是：border:black dashed;border-width:0 1 1 0 例四：点线边框表格 留意点线(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:teal 4 dou，对td所行使的样式的代码是：border:teal 1 solid 例六：outset外框表格 对table所行使的样式的代码是：border: 3 outset，对td所行使的样式的代码是： border: 1 solid 例七：inset外框表格 对table所行使的样式的代码是：border: 3 inset，对td所行使的样式的代码是：border: 1 solid 例八：ridge外框表格 对table所行使的样式的代码是：border:#ee0000 3 ridge对td所行使的样式的代码是：border: 1 solid 1 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
