html中table介绍及如何制作一张简历

最新推荐文章于 2024-05-14 20:02:25 发布

DDDDDDDDDDDDDDqd

最新推荐文章于 2024-05-14 20:02:25 发布

阅读量234

点赞数 4

文章标签： html html5

本文链接：https://blog.csdn.net/weixin_50477991/article/details/115177498

版权

表格TABLE - 展示数据

table标签：
a) 直接子元素
1.thead
2.body
3.tfoot
b) tr th td元素
包含的属性有：
colspan - 跨列合并
rowspan - 跨行合并
c) table属性中若不给予任何配置，该table会连边框都没有，只会存在孤零零的文字。
width - 可以设置表格宽度
border - 表格的边框（当设置为1时，表格就会出现双线边框，那是因为border 是每个单元格的边框，两个单元格就有两条线了，那怎么消除呢？往下看）
cellspacing - 单元格之间的距离（当你将其设置为0时，代表距离也为0，双线的表格即会变为单线【注：这只是一种解决方法】）
cellpadding - 单元格边框与内容的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <!-- width 表格宽度
    border 表格的边框
    cellspacing 单元格之间的距离
    cellpadding 单元格边框与内容的距离 -->
    <table width='500' border="1" cellspacing='0' cellpadding='15'>
        <!-- 表头 -->
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <!-- 表体
        tr 一行
        th 表头单元格
        td 表体单元格
        algin=‘center’ 文字水平居中
        colspan 列合并
        rowspan 行合并 -->
        <tbody align="center">
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>12</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

下面是测试的一道小题目：
利用html5设置一张简历表，注：仅适用于初学者。
这是部分完成图样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resume</title>
</head>
<body>
    <table width='690' border="1" cellspacing='0' align="center" cellpadding='8'>
        <tr align="center">
            <td>姓名</td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td>&nbsp;&nbsp;性别&nbsp;&nbsp;</td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td>出生年月</td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td rowspan="3" width='120' height='150'>照片</td>
        </tr>
        <tr align="center">
            <td>籍贯</td>
            <td></td>
            <td>民族</td>
            <td></td>
            <td>身高</td>
            <td></td>
        </tr>
        <tr align="center">
            <td>政治面貌</td>
            <td></td>
            <td>学历</td>
            <td></td>
            <td>职业资格</td>
            <td></td>
        </tr>
        <tr align="center">
            <td rowspan="2">家庭地址</td>
            <td rowspan="2" colspan="2"></td>
            <td colspan="2">联系电话</td>
            <td colspan="2"></td>
        </tr>
        <tr align="center">
            <td colspan="2">E-mail</td>
            <td colspan="2"></td>
        </tr>
        <tr align="center">
            <td rowspan="3">社会关系</td>
            <td>关系</td>
            <td>姓名</td>
            <td>政治面貌</td>
            <td colspan="3">工作单位</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td colspan="3"></td>
        </tr>
        <tr align="center" style="height: 125px;">
            <td>教育背景</td>
            <td colspan="6"></td>
        </tr>
        <tr align="center" style="height: 80px;">
            <td>任职情况</td>
            <td colspan="6"></td>
        </tr>
        <tr align="center" style="height: 130px;">
            <td>获奖情况</td>
            <td colspan="6"></td>
        </tr>
        <tr align="center" style="height: 35px;">
            <td>特长爱好</td>
            <td colspan="6"></td>
        </tr>
        <tr align="center" style="height: 140px;">
            <td>个人自述</td>
            <td colspan="6"></td>
        </tr>
    </table>
</body>
</html>

可能有不到位的的地方，望指出。

DDDDDDDDDDDDDDqd

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
html中table介绍及如何制作一张简历

表格TABLE - 展示数据table标签：a) 直接子元素1.thead2.body3.tfootb) tr th td元素包含的属性有：colspan - 跨列合并rowspan - 跨行合并c) table属性中若不给予任何配置，该table会连边框都没有，只会存在孤零零的文字。width - 可以设置表格宽度border - 表格的边框（当设置为1时，表格就会出现双线边框，那是因为border 是每个单元格的边框，两个单元格就有两条线了，那怎么消除呢？往下看）cellsp
复制链接

扫一扫