HTML表格使用从入门到精通(2)

2005-09-22 10:34:57 ezIT/夏治 　 【大 中 小】

    
    用表格替代水平线、竖直线
    
    用表格代替水平线，插入一个表格，将高度设为1（按需要设定），当然也可以将宽度设为1，制作竖直线。　　
    
    〈table width="100" border="0" align="center" cellpadding="0" cellspacing="0"＞
    
    ＜tr＞
    
    ＜td height="1" bgcolor="#000000"＞＜/td＞
    
    ＜/tr＞
    
    ＜/table＞
    
    ＜br＞
    
    ＜table height="100" border="0" align="center" cellpadding="0" cellspacing="0"＞
    
    ＜tr＞
    
    ＜td width="1" bgcolor="#000000"＞＜/td＞
    
    ＜/tr＞
    
    ＜/table〉
    
    
    注意：在Dreamweaver里制作时，先将高设为1后，切换到代码窗口，将表格里的空格符去掉（ ），如果不将空格去除的话，将看不到想要的效果了。　　
    
    制作带有立体感的表格
    
    在页面中适当的加入带有立体感的表格元素，会给你的页面添光加彩。　　
    
    〈table width="30%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#9999CC"＞
    
    ＜tr＞
    
    ＜td＞A＜/td＞
    
    ＜td＞ ＜/td＞
    
    ＜/tr＞
    
    ＜tr＞
    
    ＜td＞ ＜/td＞
    
    ＜td＞ ＜/td＞
    
    ＜/tr＞
    
    ＜/table＞
    
    ＜br＞
    
    ＜table width="30%" border="1" align="center" cellpadding="1" cellspacing="2" bgcolor="#9999CC"＞
    
    ＜tr＞
    
    ＜td＞B＜/td＞
    
    ＜td＞ ＜/td＞
    
    ＜/tr＞
    
    ＜tr＞
    
    ＜td＞ ＜/td＞
    
    ＜td＞ ＜/td＞
    
    ＜/tr＞
    
    ＜/table＞
    
    ＜br＞
    
    ＜table width="30%" border="1" align="center" cellpadding="1" cellspacing="2" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#9999CC"＞
    
    ＜tr＞
    
    ＜td＞C＜/td＞
    
    ＜td＞ ＜/td＞
    
    ＜/tr＞
    
    ＜tr＞
    
    ＜td＞ ＜/td＞
    
    ＜td＞ ＜/td＞
    
    ＜/tr＞
    
    ＜/table〉　　
    
    小技巧：效果图中的凸凹效果，完全是由bordercoloer的颜色来控制的，它的颜色浅一些，有会有凸出的效果，它的颜色深一点，就会有凹陷的效果。
    

更多"HTML" 的相关消息

请选择您看到这篇新闻时的心情

查看结果　心情调查排行

佩服

微笑

难过

愤怒

路过

恶心