8-html表格 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>html表格</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <!-- table标签:声明一个表格
        tr标签：定义表格中的一行
        td与th标签：定义一行中的一个单元格，td代表普通单元格，th代表表头单元格 -->
    <h3>产品列表</h3>
    <!--  border：边框，width:宽度，height：高度-->
    <table border="1" width="300" height='150'>
        <tr>
            <th>序号</th>
            <th>产品名称</th>
            <th>产品价格</th>
            <th>产品数量</th>
        </tr>
        <tr>
            <!-- align:
                    center：设置水平居中
                    left：向左对齐
                    right：向右对齐
                    middle：设置垂直居中（默认就是这样） -->
            <td align="center">1</td>
            <td>苹果</td>
            <td>￥5.00</td>
            <td>1000</td>
        </tr>
        <tr>
            <td align="center">2</td>
            <td>橘子</td>
            <td>￥4.00</td>
            <td>2000</td>
        </tr>
    </table>
    <h3>个人简历表</h3>
    <table border="1" width="600" height="300">
        <tr>
            <!-- colspan:合并n列为一列 -->
            <td colspan="5" align="left">基本情况</td>
        </tr>
        <tr>
            <!-- rowspan：合并n行为一行 -->
            <td width="18%">姓名</td>
            <td width="18%"></td>
            <td width="18%">性别</td>
            <td width="18%"></td>
            <td rowspan="5" width="28%" align="center" ><img src="../../飞机大战/image/hero.jpg" 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>

 

posted @ 2019-08-25 18:55  wan了个蛋  阅读(152)  评论(0)  编辑  收藏  举报