网页table单元格紧密排列的方法

table单元格紧密排列示例

有两种方法,一种是使用CSS,代码如下:

HTML代码:

<div>
    <table>
        <tr>
            <td><img id="c11" src="images/01.png"></td>
            <td><img id="c12" src="images/03.png"></td>
            <td><img id="c13" src="images/02.png"></td>
            <td><img id="c14" src="images/04.png"></td>
        </tr>
        <tr>
            <td><img id="c21" src="images/05.png"></td>
            <td><img id="c22" src="images/07.png"></td>
            <td><img id="c23" src="images/06.png"></td>
            <td><img id="c24" src="images/08.png"></td>
        </tr>
        <tr>
            <td><img id="c31" src="images/09.png"></td>
            <td><img id="c32" src="images/01.png"></td>
            <td><img id="c33" src="images/10.png"></td>
            <td><img id="c34" src="images/11.png"></td>
        </tr>
        <tr>
            <td><img id="c41" src="images/13.png"></td>
            <td><img id="c42" src="images/14.png"></td>
            <td><img id="c42" src="images/15.png"></td>
            <td><img id="c44" src="images/12.png"></td>
        </tr>
    </table>
</div>

CSS代码如下:

table {
    border-spacing: 0;
}

table td {
    padding: 0;
}

td img {
    display: block;
}

另一种是只使用HTML,只需设置table的属性:

<table cellpadding="0" cellspacing="0">

猜你喜欢

转载自blog.csdn.net/mehent/article/details/84145916