table布局：

table来做整体页面的布局，布局技巧归纳如下：

（1）按照设计图的尺寸设置表格的宽高以及单元格的宽高

（2）将表格的border、cellpadding、cellspacing全部设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的作用。

表格的Cellpadding：设置表格中的单元格内容（如：文字等）离单元格边线的距离

表格的cellspacing：设置表格中单元格之间的间距

（3）针对局部复杂的布局，可以在单元格里面再嵌套表格，嵌套表格划分局部的空间。

（4）单元格中的元素或者嵌套的表格用align和valign设置对齐方式

（5）通过属性或者CSS样式设置单元格中元素的样式

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>个人简历</title>

</head>

<body topmargin="0">

<!-- topmargin 设置页面上边缘的距离 -->

    <!-- 从整体到局部，从大到小，从左到右 -->

    <table  border="0" width="800" height="800" align="center" cellpadding="0" cellspacing="0">

        <tr>

            <td width="260" valign="top" bgcolor="#f2f2f2">

                <table width="200" border="0" cellpadding="0" cellspacing="0" align="center">

                    <tr>

                        <td height="100"></td>

                    </tr>

                    <tr>

                        <td align="right"><img src="data:images/照片1.png" alt="照片" /></td>

                    </tr>

                    <tr>

                        <td align="right">张三</td>

                    </tr>

                    <tr>

                        <td align="right">13111111111</td>

                    </tr>

                    <tr>

                        <td align="right">zhangshan@qq.com</td>

                    </tr>

                </table>

            </td>

            <td width="30"></td>

            <td width="480" valign="top">

                <table  width="480" border="0" cellpadding="0" cellspacing="0">

                    <tr>

                        <td height="50"></td>

                    </tr>

                    <tr>

                        <td align="right"><img src="data:images/简历logo3.png" alt="简历logo" /></td>

                    </tr>

                </table>

                <br />

                <hr />

                <br />

                <table width="480" height="200" border="0" cellpadding="0" cellspacing="0">

                    <tr>

                        <td colspan="2"><b>个人基本信息</b></td>

                    </tr>

                    <tr>

                        <td><b>姓名：</b>张三</td>

                        <td><b>籍贯：</b>北京海淀</td>

                    </tr>

                    <tr>

                        <td><b>性别：</b>男</td>

                        <td><b>身高：</b>180</td>

                    </tr>

                    <tr>

                        <td><b>民族：</b>汉</td>

                        <td><b>体重：</b>75kg</td>

                    </tr>

                    <tr>

                        <td><b>出生日期：</b>1999.09.09</td>

                        <td><b>电话：</b>13111111111</td>

                    </tr>

                    <tr>

                        <td><b>专业：</b>软件开发</td>

                        <td><b>居住地：</b>北京海淀</td>

                    </tr>

                </table>

                <br />

                <table width="480" height="100" border="0" cellpadding="0" cellspacing="0">

                    <tr>

                        <td><b>教育背景及工作经历</b></td>

                    </tr>

                    <tr>

                        <td><b>2015.09-2019.06</b>  北京大学  软件开发</td>

                    </tr>

                    <tr>

                        <td><b>2018.09-2019.06</b>  北京xx科技有限公司  xx工程师</td>

                    </tr>

                </table>

                <br />

                <table width="480" height="100" border="0" cellpadding="0" cellspacing="0">

                    <tr>

                        <td><b>所获证书</b></td>

                    </tr>

                    <tr>

                        <td><b>2018年</b>  xx证书</td>

                    </tr>

                    <tr>

                        <td><b>2019年</b>  “xxxx”证书</td>

                    </tr>

                </table>

                <br />

                <table width="480" height="70" border="0" cellpadding="0" cellspacing="0">

                    <tr>

                        <td><b>自我评价</b></td>

                    </tr>

                    <tr>

                        <td>

                            <br />

                            本人性格开朗、稳重、有活力，待人热情、真诚；<br />

                            工作认真负责，积极主动，能吃苦耐劳，用于承受压力，勇于创新；<br />

                            有很强的组织能力和团队协作精神，具有较强的适应能力； <br />

                        </td>

                    </tr>

                </table>

            </td>

            <td width="30"></td>

        </tr>

    </table>

</body>

</html>

页面显示效果：

html页面布局之table布局：的更多相关文章

  1. HTML学习笔记 div布局及table布局案例 第三节 （原创）参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 浅谈ul布局以及table布局

    我个人对于某些言论说要注重html语义化在布局中的应用,我反而不怎么感冒,试试兼容IE7&&项目期相对较赶的情况下,我还是推荐快速开发为主,兼容性强为主. 如果布局中需要用户边框,推荐 ...

  3. 新建ASPX页面，并练习div布局和table布局

    1,Div水平居中: <div style="margin:0px auto;width:100px;height:100px;background:#FF0000;"> ...

  4. 3.div+css 的布局较 table 布局有什么优点

    改版的时候更方便,只需改css文件. 页面加载速度更快.结构化清晰.页面显示简介. 表现与结构相分离. 已于优化搜索引擎更友好,排名更容易靠前.

  5. 16，div+css的布局较table布局有什么优点？

    改版的时候更加方便,只要改css文件 页面加载速度更快,结构化清晰,页面显示简洁 表现与结构相分离 易于搜索引擎优化,排名更靠前

  6. 关于table布局的推荐使用原因

    一.关于table布局的性能 1.table标签比其他html标签占用更多字节,导致下载时间延迟,占用服务器更多的流量资源: 2.table会阻碍浏览器渲染引擎的渲染顺序,导致页面生成的延迟,造成不良 ...

  7. PS切图导出代码后出现的图片布局散乱的解决方法——table布局

    前言: 一般来说,大部分美工PS切图后导出的都是使用PS默认的table布局的页面,出现最多的异常是上传代码,替换图片后,发现图片布局散乱,完全不是想要的效果.轻微的是浏览器不兼容,只有部分浏览器可以 ...

  8. div,css&table布局有哪些区别

    DIV+CSS布局与TABLE布局相比,有哪些优点? 1.代码少,页面文件小,下载快 Div+css的布局现在属于国际W3C标准,table不是. 都知道用div的布局代码肯定少,所有的样式都在CSS ...

  9. display:table布局总结

    1. table布局方式 2. table布局实际应用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. MyBatis - 4.动态SQL

    动态 SQL是MyBatis强大特性之一.极大的简化我们拼装SQL的操作. 动态 SQL 元素和使用 JSTL 或其他类似基于 XML 的文本处理器相似. MyBatis 采用功能强大的基于 OGNL ...

  2. Linux使用退格键时出现^H ^?解决方法

    Linux使用退格键时出现^H ^?解决方法 在linux下执行脚本不注意输错内容需要删除时总是出现^H ^H不是H键的意思,是backspace.主要是当你的终端backspace有问题的时候才需要 ...

  3. MYSQL数据仓库infobright【备忘】

    Infobright是一个基于MySQL开发的开源数据仓库(Data Warehouse)软件,可作为MySQL的一个存储引擎来使用,SELECT查询与普通MySQL无区别. 优点:查询性能高:百万. ...

  4. CDOJ 1962 天才钱vs学霸周2【最大流】

    以s=0,t=n+m+1分别为超级源点和超级汇点.网络流中的流量以0为开始,题目要求从1到20,我们先把每个点都减去1,即ai - m,bi - n.然后源点s与n个顶点连容量为ai的路,汇点t与m个 ...

  5. 【UOJ 209】【UER #6】票数统计

    题解: jls的题目还是比较好的 首先比较显然我们可以分析出 当x<y时,显然只能满足前缀条件 针对这一档部分分,是个简单的组合数 考虑一下后缀限制,发现真的不好搞.. 看了题解发现,枚举总共的 ...

  6. 【bzoj4817】[Sdoi2017]树点涂色&&bzoj3779-重组病毒

    题解: 两道几乎差不多的题(所以说当年sdoi考了道原题) 都是将树上一段改为新颜色询问颜色数目 可以把改成新颜色这个操作看成access操作 然后通过线段树+dfs序来维护 另外换根了为什么还可以用 ...

  7. jQuery选择器总结 jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法

    新年第一编文章 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法   $("#myELement")    选择id值等于myElement的元素,id值 ...

  8. Java中String直接赋字符串和new String的区别(面试常考)

    摘取自:https://www.cnblogs.com/guozhenqiang/p/5633269.html 解析Java中的String对象的数据类型 1. String是一个对象.  因为对象的 ...

  9. js實現彈窗

    strSucc += "<br/><font color=\"red\">提醒您!在預設狀態下,Google Chrome 會阻止彈出式視窗自動在 ...

  10. gradle上传本地文件到远程maven库（nexus服务器）

    自定义aar-upload.gradle文件 artifacts { archives file('./build/outputs/aar/Lib_ads-baidu-debug.aar') } up ...