生成一像素表格边框的五种方法

最新推荐文章于 2021-06-03 12:06:40 发布

超越梦想

最新推荐文章于 2021-06-03 12:06:40 发布

阅读量1.3k

点赞数

分类专栏： HTML 文章标签： border table xhtml class html css

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>生成一像素表格边框的五种方法</title>
<style>
<!--
    .tableStyle
    {
        border-collapse:collapse;
    }
    .tableStyle td
    {
        border:#ccc solid 1px;
    }
-->
</style>
<head>
<body>
方法一、利用CSS样式表控制
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tableStyle">
    <tr>
        <td>一像素表格边框</td>
        <td>一像素表格边框</td>
        <td>一像素表格边框</td>
    </tr>
    <tr>
        <td>一像素表格边框</td>
        <td>一像素表格边框</td>
        <td>一像素表格边框</td>
    </tr>
</table>

方法二、利用亮边框和暗边框
<table width="100%" height="100" border="1" bordercolorlight="red" bordercolordark="white" cellpadding="0" cellspacing="0">
    <tr>
        <td>一像素表格边框</td>
        <td>一像素表格边框</td>
    </tr>
    <tr>
        <td>一像素表格边框</td>
        <td>一像素表格边框</td>
    </tr>
</table>

方法三、利用collapse
<table width="100%" height="100" border="1" bordercolor="blue" cellspacing="0" style="border-collapse:collapse">
<tr>
<td>一像素表格边框</td>
<td>一像素表格边框</td>
</tr>
<tr>
<td>一像素表格边框</td>
<td>一像素表格边框</td>
</tr>
</table>

方法四、利用表格嵌套
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ff0000">
    <tr>
        <td>
            <table width="100%" border="0" cellspacing="1" cellpadding="0">
                <tr bgcolor="#ffffff">
                    <td>一像素表格边框</td>
                    <td>一像素表格边框</td>
                    <td>一像素表格边框</td>
                </tr>
                <tr bgcolor="#ffffff">
                    <td>一像素表格边框</td>
                    <td>一像素表格边框</td>
                    <td>一像素表格边框</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

方法五、利用单元格的间距配合背景颜色
<table width="100%" height="100" border="0" bgcolor="red" cellpadding="0" cellspacing="1">
	<tr>
		<td bgcolor="white">一像素表格边框</td>
		<td bgcolor="white">一像素表格边框</td>
	</tr>
	<tr>
		<td bgcolor="white">一像素表格边框</td>
		<td bgcolor="white">一像素表格边框</td>
	</tr>
</table>

</body>
</html>