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

传统布局：

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

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

2、单元格里面嵌套表格

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

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

传统布局目前应用：

1、快速制作用于演示的html页面

2、商业推广EDM制作(广告邮件)

表格常用样式属性

border-collapse:collapse 设置边框合并，制作一像素宽的边线的表格

######表格#######
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
</head>
<body>
<h2>产品列表</h2>

<table border="1" width="300" height="120">
    <tr>
        <th valign="top">序号</th>
        <th>产品名称</th>
        <th>产品价格</th>
        <th>产品数量</th>
    </tr>

    <tr>
        <td align="center">1</td>
        <td align="center">苹果</td>
        <td align="center">10.00</td>
        <td align="center">100</td>
    </tr>

    <tr>
        <td>2</td>
        <td>香蕉</td>
        <td>5.00</td>
        <td>50</td>
    </tr>
</table>

<h2>个人简历</h2>

<!-- 有序列表快捷键：table>(tr>td*5)*6 +TAB键-->
<table border="1" width="500" height="300" cellpadding="10" cellspacing="10">
    <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" width="28%"><img src=".." 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">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>传统表格</title>
</head>
<body>
<table border="1" width="800" height="800" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td width="260" valign="top" bgcolor="#f2f2f2">

            <table border="0" width="260" cellpadding="0" cellspacing="0">
                <tr height="75">
                    <td></td>
                    <td></td>
                </tr>
                <tr height="100">
                    <td width="230" align="right"><img src=".." alt="照片"></td>
                    <td width="30"></td>
                </tr>
                <tr>
                    <td align="right">张达山</td>
                    <td></td>
                </tr>
                <tr>
                    <td align="right">13336600122</td>
                    <td></td>
                </tr>
                <tr>
                    <td align="right">273474747@qq.com</td>
                    <td></td>
                </tr>
            </table>
        </td>
        <td width="30"></td>
        <td width="480" valign="top">

            <table border="0" width="480" cellspacing="0" cellpadding="0">
                <tr>
                    <td height="75"></td>
                </tr>
                <tr>
                    <td align="right"><img src=".." alt="照片"></td>
                </tr>
            </table>
            
            <hr>

            <table border="0" width="480" cellpadding="0" cellspacing="0">
                <tr>
                    <td height="30"></td>
                    <td></td>
                </tr>
                <tr>
                    <th colspan="2" align="left">个人基本情况</th>
                </tr>
                <tr>
                    <td width="50%">姓名</td>
                    <td width="50%">籍贯</td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>身高</td>
                </tr>
                <tr>
                    <td>民族</td>
                    <td>体重</td>
                </tr>
                <tr>
                    <td>出生日期</td>
                    <td>电话</td>
                </tr>
                <tr>
                    <td>专业</td>
                    <td>现居地址</td>
                </tr>
            </table>
        </td>
        <td width="30"></td>
    </tr>
</table>

</body>
</html>

 

posted on 2019-10-29 22:00  cherry_ning  阅读(704)  评论(0)    收藏  举报

导航