制作html表格

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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                    广州城科技大学 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                    市场营销(本科)<br>

                    主修课程:<br>

                    管理学、微观经济学、宏观经济学、管理信息系统、统计学、会计学、财务管理、市场营销、经济法、,消费者行为学、国际市场营销</td>

            </tr>

            <tr>

                <td class="three">实习经历</td>

                <td colspan="4" class="one">2012.04-至今 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                    广州大鲸信息科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                    市场营销(实习生)

                    <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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                    广州大鲸信息科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                    校园大使主席<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标签的样式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值