关于表格嵌套,内部嵌套的表格如何消除和其所在的单元格的间隙

来源:2-21 表格嵌套

小旋风_qsh

2020-02-04 16:43:35

http://img.mukewang.com/climg/5e392e8f099266e307190277.jpg

写回答

1回答

好帮手慕慕子

2020-02-04

同学你好, 消除单元格之间的间距,在table标签上添加cellpadding="0"和cellspacing="0"属性即可。

但是看同学截图的内部嵌套表格的左右侧空白是由于内嵌表格宽度小于单元格宽度造成的,可以给内部嵌套的表格设置百分百宽度适应单元格的宽度,消除间隙。老师这里写的一个小例子,同学可以测试一下

<!DOCTYPE html>

<html>



<head>

    <title>表格属性</title>

    <meta charset="utf-8">

</head>



<body>



    <table border="1" width="500" cellspacing="0" cellpadding="0" align="center">
        <caption>课程表</caption>
        <tr bgcolor="pink" align="center">
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr align="center">
            <td rowspan="2">语文</td>
            <td>数学</td>
            <td>化学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr align="center">
            <td>数学</td>
            <td>化学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr align="center">
            <td colspan="5">课间活动</td>
        </tr>
        <tr align="center">
            <td rowspan="2">
                <table border="1" cellspacing="0" width="100%">
                    <tr>
                        <td>前半节</td>
                        <td>后半节</td>
                    </tr>
                    <tr>
                        <td>诗词</td>
                        <td>古文</td>
                    </tr>
                </table>
            </td>

            <td>数学</td>

            <td>化学</td>

            <td>英语</td>

            <td>生物</td>

        </tr>

        <tr align="center">

            <td>数学</td>

            <td>化学</td>

            <td>英语</td>

            <td>生物</td>

        </tr>

    </table>

</body>

</html>

如果还有疑问,可以新建提问呢,将你写的代码粘贴过来,便于结合同学的代码,帮助同学准确的定位与解决问题。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 40143 问题

查看课程