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

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

<!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 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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