1. 当我们需要将表单在网页居中显示,我们需要加入<div>盒子标签,并给<div>标签配置css样式,如下
<div class="ct">
<table>
<tr>
<td>姓 名</td>
<td class="one">锤子简历</td>
<td>出生年月</td>
<td class="one">1996.05</td>
<td rowspan="4" class="twe">
<img src="photo.png" alt="">
</td>
</tr>
<tr>
<td>民 族</td>
<td class="one">汉</td>
<td>政治面貌</td>
<td class="one">中共党员</td>
</tr>
<tr>
<td>电 话</td>
<td class="one">13500135000</td>
<td>毕业学校</td>
<td class="one">广州科技大学</td>
</tr>
<tr>
<td>邮 箱</td>
<td class="one">5090535849@qq.com</td>
<td>学 历</td>
<td class="one">本科</td>
</tr>
<tr>
<td>住 址</td>
<td colspan="4" class="one">广东省广州市海珠区</td>
</tr>
<tr>
<td>求职意向</td>
<td colspan="4" class="one">市场专员</td>
</tr>
<tr>
<td class="three">教育背景</td>
<td colspan="4" class="one">2005.07-2009.06
广州城科技大学
市场营销(本科)<br>
主修课程:<br>
管理学、微观经济学、宏观经济学、管理信息系统、统计学、会计学、财务管理、市场营销、经济法、,消费者行为学、国际市场营销</td>
</tr>
<tr>
<td class="three">实习经历</td>
<td colspan="4" class="one">2012.04-至今
广州大鲸信息科技有限公司
市场营销(实习生)
<ul>
<li><p>负责公司线上端资源的销售工作(以开拓客户为主).公司主要资源以广点通、智汇推负责公司线上端资源的销售工作(以开拓客户为主).公司主要资源以广点通、智汇推、百度、小,米、360、沃门户等;</p></li>
<li><p>实时了解行业的变化,跟踪客户的详细数据,为客户制定更完善的投放计划(合作过珍爱网、世,纪佳缘、56视频、京负责公司线上端资源的销售工作(以开拓客户为主).公司主要资源以广点通、智汇推东等客户</p></li>
</ul>
</td>
</tr>
<tr>
<td class="three">校内实践</td>
<td colspan="4" class="one">2009.03-2011.06
广州大鲸信息科技有限公司
校园大使主席<br>
<ul>
<li><p>目标带领自己的团队,辅助五百丁公司完成在各高校的“伏龙计划”,向全球顶尖的AXA金融公,司推送实习生资源。</p></li>
<li><p>整体运营前期开展了相关的线上线下宜传活动,中期为进行咨询的人员提供讲解。后期进行了项,目的维护阶段,保证了整个项目的完整性。,普通话一级申等;</p></li>
</ul>
</td>
</tr>
<tr>
<td class="three">技能证书</td>
<td colspan="4" class="one">
<p>普通话一级申等;</p>
<p>大学英语四/六级(CET-4/6),良好的听说读写能力,快速浏览英语专业文件及书籍:,通过全国计算机二级考试,熟练运用office相关软件。</p>
</td>
</tr>
<tr>
<td class="three">自我评价</td>
<td colspan="4" class="one">深度互联网从业人员,对互联网保持高度的敏感性和关注度,熟悉产品开发流程,有很强的产品规划、,需求分析、交互设计能力,能独立承担APP和WEB项目的管控工作,善于沟通,贴近用户。</td>
</tr>
</table>
</div>

添加<div>

css样式配置

网页效果
2.在使用td标签设置全局td标签样式的同时,并设置表格列标签居中后,若想要使内容列靠左显示,则需要为内容列单独添加类选择器

未设置时,内容标签不能靠左显示

给内容列标签加入类.one,使用padding元素调整样式
在td标签中添加p标签以方便添加文字时,会发现两个p标签之间存在一段空行。这是因为<p>标签是一个块级元素。块级元素的特点是它们总会从新的一行开始,并在前后自动添加一些垂直的外边距。而且当td本身或其父元素没有特定css样式来覆盖这些默认的外边距,那么这些外边距就会被保留。

如图,技能证书右侧单元格p标签中间带有空行
解决方法只需设置p标签的margin元素:
将外边距设置为0,空行被取消
再比如,如在需要在td标签内加入ul标签时,会发现li标签加入的p标签文段带有一定缩进效果,影响了表格的观感,这也是ul标签和li标签自带默认样式所导致的

如果想要消除此缩进,则需要设置ul或li标签的样式


667

被折叠的 条评论
为什么被折叠?



