html表格及传统布局

个人博客页面链接:http://www.shihao.online/(博客还在开发阶段,欢迎访问)

html表格

table常用标签
1、table标签:声明一个表格

2、tr标签:定义表格中的一行

3、td和th标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格

table常用属性:
1、border 定义表格的边框

2、cellpadding 定义单元格内内容与边框的距离

3、cellspacing 定义单元格与单元格之间的距离

4、align 设置单元格中内容的水平对齐方式,设置值有:left | center | right

5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

6、colspan 设置单元格水平合并

7、rowspan 设置单元格垂直合并

传统布局:
传统的布局方式就是使用table来做整体页面的布局,布局的技巧归纳为如下几点:

1、定义表格宽高,将border、cellpadding、cellspacing全部设置为0

2、单元格里面嵌套表格

3、单元格中的元素和嵌套的表格用align和valign设置对齐方式

4、通过属性或者css样式设置单元格中元素的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html表格</title>
</head>
<body>

    <!-- table>(tr>td*4)*4 -->
    <table border="1" cellpadding="10" cellspacing="10">
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
    </table>




    <h3>html表格</h3>
    <table border="1" width="500" height="300">
        <tr>
            <th>序号</th>
            <th>产品名称</th>
            <th>产品价格</th>
            <th>产品数量</th>
        </tr>
        <tr align="center">
            <td>1</td>
            <td>苹果</td>
            <td>RMB5.00</td>
            <td>1000</td>
        </tr>
        <tr align="center">
            <td>2</td>
            <td>橘子</td>
            <td>RMB10.00</td>
            <td>2000</td>
        </tr>
    </table>



    <h3>个人简历表</h3>

    <table border="1" width="600" height="300">
        <tr>
            <th colspan="5" align="left">基本情况</th>
        </tr>
        <tr>
            <td width="18%">姓名</td>
            <td width="18%"></td>
            <td width="18%">性别</td>
            <td width="18%"></td>
            <td rowspan="5"><img src="./images/person.png" alt="图片"></td>
        </tr>
        <tr>
            <td>民族</td>
            <td></td>
            <td>性别</td>
            <td></td>
        </tr>
        <tr>
            <td>政治面貌</td>
            <td></td>
            <td>性别</td>
            <td></td>
        </tr>
        <tr>
            <td>籍贯</td>
            <td></td>
            <td>性别</td>
            <td></td>
        </tr>
        <tr>
            <td>电子邮箱</td>
            <td></td>
            <td>性别</td>
            <td></td>
        </tr>
    </table>


</body>
</html>

效果图:
这里写图片描述

表格传统布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html表格传统布局</title>
    <style type="text/css">
        body{
            font-family: "微软雅黑"; 
        }

        .title1{
            color: #5f5f5f;
            font-size: 24px;
            font-weight: bold;
        }

        .title2{
            color: #5f5f5f;
            font-size: 18px;
            font-weight: bold;
        }

        td span{
            color: #5f5f5f;
            font-size: 16px;
            font-weight: bold;
        }

        table .font1{
            color: #5f5f5f;
            font-size: 16px;
        }

        .font2{
            color: #a7a6a6;
            font-size: 16px;
        }

        td{
            line-height: 30px;
        }
    </style>
</head>
<body>
    <table width="800" height="800" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="260" valign="top" bgcolor="#f2f2f2">
                <table width="260" border="0" cellpadding="0" cellspacing="0">
                    <tr height="100">
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td width="230" align="right"><img src="./images/person.png" alt="人物图片"></td>
                        <td width="30"></td>
                    </tr>
                    <tr>
                        <td align="right" class="title1">张达山</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td align="right" class="font2">18210898888</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td align="right" class="font2">zhangdasan@126.com</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td width="30"></td>
            <td width="480" valign="top">
                <table width="480" border="0" cellpadding="0" cellspacing="0">
                    <tr height="75">
                        <td></td>
                    </tr>
                    <tr>
                        <td align="right"><img src="./images/resume.png" alt="图片"></td>
                    </tr>
                </table>

                <hr />  <!--画一条线-->

                <table width="480" height="180" border="0" cellpadding="0" cellspacing="0" class="font1">
                    <tr height="30">
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="title2"><b>个人基本情况</b></td>
                    </tr>
                    <tr>
                        <td><span>姓 名:</span>张达山</td>
                        <td><span>籍 贯:</span>北京昌平</td>
                    </tr>
                    <tr>
                        <td><span>性 别:</span></td>
                        <td><span>身 高:</span>175cm</td>
                    </tr>
                    <tr>
                        <td><span>民 族:</span></td>
                        <td><span>体 重:</span>70kg</td>
                    </tr>
                    <tr>
                        <td><span>出生日期:</span>1992.03.28</td>
                        <td><span>电 话:</span>18210898888</td>
                    </tr>
                    <tr>
                        <td><span>专 业:</span>工业设计</td>
                        <td><span>现居住地:</span>昌平天通苑</td>
                    </tr>
                </table>

                <table width="480" height="180" border="0" cellpadding="0" cellspacing="0" class="font1">
                    <tr height="30">
                        <td></td>
                    </tr>
                    <tr>
                        <td class="title2">教育背景及工作经历</td>
                    </tr>
                    <tr>
                        <td><span>2008.09-2011.06 </span>北京邮电大学 工业设计专业</td>
                    </tr>
                    <tr>
                        <td><span>2011.06-2012.09</span>北京微创信息科技有限公司 任前端开发工程师</td>
                    </tr>
                    <tr height="30">
                        <td></td>
                    </tr>
                    <tr>
                        <td class="title2">所获证书</td>
                    </tr>
                    <tr>
                        <td><span>2009年:</span>荣获“高级美术设计师”证书</td>
                    </tr>
                    <tr>
                        <td><span>2009年:</span>荣获“优秀班干部”证书</td>
                    </tr>
                </table>

            </td>
            <td width="30"></td>
        </tr>
    </table>
</body>
</html>

效果图
这里写图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值