html表格及传统布局

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 设置单元格垂直合并

<!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>

html表格及传统布局

表格传统布局

传统的布局方式就是使用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>
    <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="img/timg.jpg"  width="230" alt="人物图片"></td>
                        <td width="30"></td>
                    </tr>
                    <tr>
                        <td align="right" class="title1">张一山</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td align="right" class="font2">18888888888</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td align="right" class="font2">zhangyisan@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="img/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>176cm</td>
                    </tr>
                    <tr>
                        <td><span>民 族:</span>汉</td>
                        <td><span>体 重:</span>55kg</td>
                    </tr>
                    <tr>
                        <td><span>出生日期:</span>1992.05.05</td>
                        <td><span>电 话:</span>18888888888</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>MTV超级盛典最具风格儿童演员奖</td>
                    </tr>
                    <tr>
                        <td>2011星光版《舞林大会》总冠军</td>
                    </tr><tr>
                        <td>2016中国“90后10大影响力人物”第4名</td>
                    </tr>
                </table>

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

  html表格及传统布局

 

html表格及传统布局

上一篇:使用现代CSS的响应式版面


下一篇:css实现波浪纹,水波纹动画