DreamweaverMX 2004打造细线表格 (1)
如果仅仅是定义表格的边框为1(border="1")和边框颜色值(如borderColor="#000000")，表格线其实是2px的，要做细线表格，有三种方法： <BR><BR> 1.在中按Ctrl Alt T，弹出插入表格的对话框，参数设置如图(带红框项为固定值，否则无效果)： <BR> <CENTER><CENTER><CENTER><IMG src="/bbs/attachments/websoft/20081201/20081211185390677801.gif"></CENTER></CENTER></CENTER><BR> 选中表格，在属性面板中设置表格的背景颜色： <BR> <CENTER><CENTER><IMG src="/bbs/attachments/websoft/20081201/20081211185395377802.gif"></CENTER></CENTER><BR> 光标定位到第一个单元格里，按住Shift键单击最后一个单元格，全选所有单元格，然后在属性面板中设置所有单元格的颜色： <BR> <CENTER><CENTER><IMG src="/bbs/attachments/websoft/20081201/200812111854077803.gif"></CENTER><CENTER> </CENTER></CENTER> 完成后效果如图： <CENTER><CENTER><IMG src="/bbs/attachments/websoft/20081201/2008121118544677804.gif"><p></p><p> </p></CENTER></CENTER><BR><BR> 2.利用表格的暗边框(bordercolordark)和亮边框(bordercolorlight)属性做的细线表格： <BR><BR> 还是按Ctrl Alt T插入表格，在对话框中设置如图(带红框项为固定植，否则无效果) <BR> <CENTER><CENTER><IMG src="/bbs/attachments/websoft/20081201/2008121118549377805.gif"></CENTER></CENTER><BR> 选中表格后按F9，展开"Tag Inspector"面板组，在"Attributes"面板中设置如图： <BR> <CENTER><CENTER><IMG src="/bbs/attachments/websoft/20081201/20081211185414077806.gif"></CENTER></CENTER><BR> 完成后如图：<CENTER><CENTER><IMG src="/bbs/attachments/websoft/20081201/20081211185415677807.gif"><p></p><p> </p></CENTER></CENTER><CENTER> </CENTER> 3.设置表格的CSS属性border-collapse为collapse：按Ctrl Alt T插入表格，对话框的设置同法2。选中表格，在属性面板中设置表格的边框颜色： <BR> <CENTER><CENTER><IMG src="/bbs/attachments/websoft/20081201/20081211185421877808.gif"></CENTER></CENTER><BR> 按F9展开"Tag Inspector"面板，在"Attributes"面板中的"style"里填入"border-collapse:collapse;" <BR> <CENTER><CENTER><IMG src="/bbs/attachments/websoft/20081201/20081211185428177809.gif"></CENTER></CENTER><BR> 完成后如图： </p><p align='center'><b><font color='red'></font> <a href='/news/news001/dreamweaver/200510/20051016193040_2.html'></a> <a href='/news/news001/dreamweaver/200510/20051016193040_2.html'></a></b></p>如果仅仅是定义表格的边框为1(border="1")和边框颜色值(如borderColor="#000000")，表格线其实是2px的，要做细线表格，有三种方法： <BR><BR> 1.在中按Ctrl Alt T，弹出插入表格的对话框，参数设置如图(带红框项为固定值，否则无效果)： <BR> <CENTER><CENTER><CENTER><IMG src="/bbs/attachments/websoft/20081201/20081211185390677801.gif"></CENTER></CENTER></CENTER><BR> 选中表格，在属性面板中设置表格的背景颜色： <BR> <CENTER><CENTER><IMG src="/bbs/attachments/websoft/20081201/20081211185395377802.gif"></CENTER></CENTER><BR> 光标定位到第一个单元格里，按住Shift键单击最后一个单元格，全选所有单元格，然后在属性面板中设置所有单元格的颜色： <BR> <CENTER><CENTER><IMG src="/bbs/attachments/websoft/20081201/200812111854077803.gif"></CENTER><CENTER> </CENTER></CENTER> 完成后效果如图： <CENTER><CENTER><IMG src="/bbs/attachments/websoft/20081201/2008121118544677804.gif"><p></p><p> </p></CENTER></CENTER><BR><BR> 2.利用表格的暗边框(bordercolordark)和亮边框(bordercolorlight)属性做的细线表格： <BR><BR> 还是按Ctrl Alt T插入表格，在对话框中设置如图(带红框项为固定植，否则无效果) <BR> <CENTER><CENTER><IMG src="/bbs/attachments/websoft/20081201/2008121118549377805.gif"></CENTER></CENTER><BR> 选中表格后按F9，展开"Tag Inspector"面板组，在"Attributes"面板中设置如图： <BR> <CENTER><CENTER><IMG src="/bbs/attachments/websoft/20081201/20081211185414077806.gif"></CENTER></CENTER><BR> 完成后如图：<CENTER><CENTER><IMG src="/bbs/attachments/websoft/20081201/20081211185415677807.gif"><p></p><p> </p></CENTER></CENTER><CENTER> </CENTER> 3.设置表格的CSS属性border-collapse为collapse：按Ctrl Alt T插入表格，对话框的设置同法2。选中表格，在属性面板中设置表格的边框颜色： <BR> <CENTER><CENTER><IMG src="/bbs/attachments/websoft/20081201/20081211185421877808.gif"></CENTER></CENTER><BR> 按F9展开"Tag Inspector"面板，在"Attributes"面板中的"style"里填入"border-collapse:collapse;" <BR> <CENTER><CENTER><IMG src="/bbs/attachments/websoft/20081201/20081211185428177809.gif"></CENTER></CENTER><BR> 完成后如图： </p><p align='center'><b><font color='red'></font> <a href='/news/news001/dreamweaver/200510/20051016193040_2.html'></a> <a href='/news/news001/dreamweaver/200510/20051016193040_2.html'></a></b></p>
<P align=center><IMG src="/bbs/attachments/websoft/20081201/200812111854343778010.gif"></P><BR> 注意：法3所作的细线表格只适用于5 ，兼容性最好的是法1，法二并不是严格意义上的细线表格。 <BR><BR> 技巧：法1中可以用CSS定义表格单元格的背景颜色，以减少代码量： <BR><p></p></p><p align='center'><b><a href='/news/news001/dreamweaver/200510/20051016193040.html'></a><a href='/news/news001/dreamweaver/200510/20051016193040.html'></a> <font color='red'></font> </b></p>
页:
[1]