表格与表格之间的间距怎么消除

表格与表格之间的间距怎么消除

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Conten-Type" content="text/html;charset=utf-8"/>
    <style>
   li {
    list-style-type: none;
   }
        </style>
</head>
<body>
    <table cellspacing="0">
        <!--网页头部-->
        <thead>
        <tr bgcolor="#e1f2f9" height="80">
            <!--logo-->
            <td width="20%" align="center"><img src="images/logo.png"></td>
            <!--导航-->
            <td width="60%" align="center">
                学校概况&nbsp;&nbsp;&nbsp;&nbsp;机构设置&nbsp;&nbsp;&nbsp;&nbsp;师资队伍&nbsp;&nbsp;&nbsp;&nbsp;科学研究&nbsp;&nbsp;&nbsp;&nbsp;招生就业&nbsp;&nbsp;&nbsp;&nbsp;图书馆&nbsp;&nbsp;&nbsp;&nbsp;校长信箱&nbsp;&nbsp;&nbsp;&nbsp;校园导航
            </td>
            <!--语言切换-->
            <td width="20%">
                <form>
                    快速通道:
                    <select>
                        <option>中文</option>
                        <option>Engish</option>
                    </select>
                </form>
            </td>
        </tr>
        <!--banner-->
        <tr>
            <td colspan="4"><img width="100%" src="images/banner.jpg"></td>
        </tr>
    </thead>
    <tbody>
        <!--网页主体-->
        <tr><td colspan="4" height="20"></td></tr><!--空白-->
        <tr>
        <td colspan="4">
            <table align="center" width="70%" cellspacing="0" cellpadding="0" bgcolor="#eee" border="1">
                <tr align="Left">
                    <td width="35%"><b>慕课快讯</b>&nbsp;&nbsp;<b>慕课快讯</b>&nbsp;&nbsp;<b>慕课快讯</b>&nbsp;&nbsp;<b>慕课快讯</b>&nbsp;<b>>></b></td>
                    <td width="5%"></td><!--空白-->
                    <td width="35%"><b>慕课快讯</b>&nbsp;&nbsp;<b>慕课快讯</b>&nbsp;&nbsp;<b>慕课快讯</b>&nbsp;&nbsp;<b>慕课快讯</b>&nbsp;<b>>></b></td>
                    <td width="5%"></td><!--空白-->
                    <td rowspan="3" width="20%" align="right"><img src="images/weixin.png"></td>
                </tr>
                <tr></tr><!--空白-->
                <tr align="Left">
                    <td width="30%"><ul><li>>慕课平台课程扩容&nbsp;&nbsp;涵盖多个领域&nbsp;&nbsp;12-30</li>
                        <li>>慕课平台课程扩容&nbsp;&nbsp;涵盖多个领域&nbsp;&nbsp;12-30</li>
                        <li>>慕课平台课程扩容&nbsp;&nbsp;涵盖多个领域&nbsp;&nbsp;12-30</li>
                        <li>>慕课平台课程扩容&nbsp;&nbsp;涵盖多个领域&nbsp;&nbsp;12-30</li></ul></td>
                    <td width="5%"></td><!--空白-->
                    <td width="30%"><ul><li>>慕课平台课程扩容&nbsp;&nbsp;涵盖多个领域&nbsp;&nbsp;12-30</li>
                        <li>>慕课平台课程扩容&nbsp;&nbsp;涵盖多个领域&nbsp;&nbsp;12-30</li><li>>慕课平台课程扩容&nbsp;&nbsp;涵盖多个领域&nbsp;&nbsp;12-30</li><li>>慕课平台课程扩容&nbsp;&nbsp;涵盖多个领域&nbsp;&nbsp;12-30</li></ul></td>
                    <td width="5%"></td><!--空白-->
                </tr>
            </table>
        </td>
        </tr><!--新闻-->
        <tr><td colspan="4"></td></tr><!--空白-->
        <tr>
            <td colspan="4">
                <table align="center" border="1" width="70%" cellspacing="0" cellpadding="0">
                    <tr>
                        <td colspan="3" align="Left">近期专题</td>
                    </tr>
                    <tr>
                        <td><ul><li><img src="images/1.png"></li><li>教育发展基金专题</li></ul></td>
                        <td><ul><li><img src="images/2.png"></li><li>教育发展基金专题</li></ul></td>
                        <td><ul><li><img src="images/3.png"></li><li>教育发展基金专题</li></ul></td>
                    </tr>
                </table>
            </td>
        </tr><!--近期专题-->
        <tr><td colspan="4"></td></tr><!--空白-->
    </tbody>
    <tfoot>
        <!--网页尾部-->
        <tr bgcolor="e1f2f9">
            <td colspan="4">
                <table align="center" width="55%">
                <tr align="center" height="60">
                    <td>文化站点</td><td>信息服务</td><td>校友会</td><td>OA系统</td><td>教务管理系统</td><td>网络教学平台</td><td>vpn服务</td><td>acm/oj</td><td>旧版入口</td><td>站群系统</td>
                </tr>
            </table>
            </td>
        </tr>
        <tr bgcolor="#89a9bd" height="80"><td colspan="4" align="center"> Copyright&nbsp;&copy&nbsp;2017&nbsp;imooc.com&nbsp;All&nbsp;Reserved&nbsp;|&nbsp;13046642号-2</td></tr>
    </tfoot>
    </table>
</body>
</html>

http://img1.sycdn.imooc.com//climg/5acb61460001fc3e14301064.jpg如图表格与表格默认情况下是有间隙的,可以消除么,还有是用<ul>标签的时候单元格左边和上边会默认留出空隙所以无法左对齐,可以解决么

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
卡布琦诺 2018-04-10 11:46:59

1、<table cellspacing="0" cellpadding="0">可以去掉表格的间距

2、你的空格是因为你设置了<td width="5%"></td>去掉即可

http://img1.sycdn.imooc.com//climg/5acc345f0001e42605020381.jpg

希望可以帮到你~

  • 提问者 学代码的射击湿 #1
    不是那个5%的空格,是左对齐的空白,用ul标签就会出现上下左都有空白,但是换成<p>标签就没有空白了,还有表格那里我的cellspacing="0" cellpadding="0"都设了,还是如图那样有少量的缝隙。
    2018-04-10 20:11:58
  • 卡布琦诺 回复 提问者 学代码的射击湿 #2
    这个是因为标签都有默认的内间距和外边距,你可以设置*{ padding:0; margin:0; }来解决哦
    2018-04-11 11:46:04
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码