【无标题】

最新推荐文章于 2024-07-21 17:58:14 发布

掉牙的老小孩

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量34

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_63658213/article/details/131686441

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、列表
二、表格
三、个人简介范例
总结

前言

提示：这里可以添加本文要记录的大概内容：

本章主要讲解列表和表格的属性以及其使用，并会在后面附上个人简介的示例图

提示：以下是本篇文章正文内容，下面案例可供参考

一、列表

1.有序列表（ol）

<ol type="1" reversed start="10">
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

2.无序列表（ul）

<ul type="circle">
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

3.自定义列表（dl）

<dl>
        <dt>列表标题</dt>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
    </dl>

二、表格

代码如下（示例）：

<table border="1" align="center" width="600">
        <tr>
            <th bgcolor="pink" height="30">表格标题</th>
            <th bgcolor="pink" height="30">表格标题</th>
            <th>表格标题</th>
        </tr>
        <tr align="center">
            <td rowspan="3">第一行第一列</td>
            <td colspan="2">第一行第二列</td>
        </tr>
        <tr align="center">
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr align="center">
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
    </table>

三、个人简介范例

以下为全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简介</title>
</head>
<body>
    <h1 align="center">个人简历</h1>
    <table border="1" align="center" width="1050">
        <tr height="60" align="center">
            <th>姓名</th>
            <td width="150"></td>
            <td>性别</td>
            <td width="100"></td>
            <td>出生年月</td>
            <td width="100"></td>
            <td width="100" rowspan="3"></td>
        </tr>
        <tr  height="60" align="center">
            <th>身份证号</th>
            <td></td>
            <td>民族</td>
            <td></td>
            <td>政治面貌</td>
            <td></td>
        </tr>
        <tr height="60" align="center">
            <th>婚姻状况</th>
            <td></td>
            <td>健康状况</td>
            <td></td>
            <td>身高</td>
            <td></td>
        </tr>
        <tr height="60" align="center">
            <th>最后毕业院校</th>
            <td></td>
            <td>毕业时间</td>
            <td></td>
            <td>技术职称</td>
            <td colspan="2"></td>
        </tr>
        <tr height="60" align="center">
            <th>现工作单位</th>
            <td></td>
            <td>参加工作时间</td>
            <td></td>
            <td>现从事单位</td>
            <td colspan="2"></td>
        </tr>
        <tr height="60" align="center">
            <th rowspan="6">主要简历</th>
            <td colspan="2">起止年月</td>
            <td colspan="2">在何单位</td>
            <td colspan="2">任何职务</td>
        </tr>
        <tr height="60" align="center">
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>
        </tr>     
        <tr height="60" align="center">
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>
        </tr>
        <tr height="60" align="center">
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>
        </tr>
        <tr height="60" align="center">
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>
        </tr>
        <tr height="60" align="center">
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <th rowspan="3" height="100">业务专长及工作成果</th>
            <td colspan="6" rowspan="3"></td>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr height="60" align="center">
            <th>通讯地址</th>
            <td colspan="2"></td>
            <td>邮政编码</td>
            <td colspan="3"></td>
        </tr>
        <tr height="60" align="center">
            <th>联系电话</th>
            <td colspan="2"></td>
            <td>Email地址</td>
            <td colspan="3"></td>
        </tr>
    </table>
</body>
</html>

总结

以上就是今天要讲的内容，本文仅仅简单介绍了列表和表格的使用，若有遗漏还请各位补充

掉牙的老小孩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【无标题】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、列表二、表格三、个人简介范例总结前言提示：这里可以添加本文要记录的大概内容：本章主要讲解列表和表格的属性以及其使用，并会在后面附上个人简介的示例图提示：以下是本篇文章正文内容，下面案例可供参考一、列表1.有序列表（ol）<ol type="1" reversed start="10"> <li>有序列表</li> <li>有序
复制链接

扫一扫