简明现代魔法 -> HTML超文本标记语言 -> 制作细线表格

制作细线表格

2009-09-08

在网页制作中,我们常常会使用到表格,表格使得需要表达的信息更清楚,明了。

<table border="1" cellspacing="0" bordercolor="#000000" width = "80%">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
    </tr>
</table>
1.1 1.2
2.1 2.2

这段代码定义了border = 1pix的表格,但实际上表格的实际边框宽度为2pix, 这是因为表格边框由:表格外边框和单元格边框两部分构成。 那么如何定义一个细线表格(实际边宽为1pix) 呢?

使用 cellspacing和背景色技术

<table border="0" cellspacing="1" bgcolor="#000000" width = "80%">
    <tr bgcolor="#ffffff">
        <td>1.1</td>
        <td>1.2</td>
    </tr>
    <tr bgcolor="#ffffff">
        <td>2.1</td>
        <td>2.2</td>
    </tr>
</table>
    
1.1 1.2
2.1 2.2

使用border-collapse属性

<table border="1" cellspacing="0" bordercolor="#000000" width = "80%" style="border-collapse:collapse;">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
    </tr>
</table>
1.1 1.2
2.1 2.2

提醒: 对于通过方法1制作出来的细线表格,在打印时可能会出现表格边框打印不出来的问题。 而方法2就没有这个问题,推荐使用。

 

本站使用的表格样式

标题一 标题二 标题三
内容一 内容二 内容三
内容一 内容二 内容三
<table width="600" border="1" cellspacing="0" bordercolor="#999999" align="center" style="line-height:150%">
	<tr>
    	<td bgcolor="#99FF99">标题一</td>
        <td bgcolor="#99FF99">标题二</td>
        <td bgcolor="#99FF99">标题三</td>
    </tr>
</table>   

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们