陈新龙
HTML 的意思为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet 资源连接为一个逻辑整体。
HTML 是我们构建网站的基石，允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。今天就和大家一起学习一下HTML 表格的基础，同时结合我们之前学习过的Python 列表知识，将两者内容相结合，制作出简单的表格页面进行展示。
首先简单介绍一下HTML 基础的语法知识点。创建一个HTML 的文件最简单的方法就是右键新建一个记事本文件。我们可以直接将HTML 代码写在记事本中，写完之后，将文件保存为.html 文件即可。一般使用Dreamweaver 软件或者vscode软件进行编写。
以简单的Demo 代码模板案例展示基础的HTML页面结构， <！DOCTYPEhtml>声明为 HTML5 文档；元素是 HTML 页面的根元素；
元素包含了文档的元（meta）数据；
定义网页编码格式为utf-8；元素描述了文檔的标题；<body>元素包含了可见的页面内容；<h1>元素定义一个大标题。我们把尖括号包围的关键词<html>、<h1>、<p>统称为HTML 标签。很多时候标签都是成对出现的，第一个标签称为开始标签，第二个标签称为结束标签，当然也会出现单标签的情况，到时候再来介绍。保存为后缀.html的文件，然后双击运行即可。我们可以直接在浏览器上看到运行结果（图1），HTML 页面结构（图2），HTML 运行结果（图3）。<p><img src="https://img.fx361.cc/images/2023/05/07/qkimagesdinbdinb202315dinb20231511-1-l.jpg"/></p></p><p>了解了一些基础的HTML 知识后，我们来介绍一下今天的主角“表格”标签属性信息，表格由行和列组成，创建时，表格、表格的行、表格的列是分开创建的。当然这三者也分别对应着三种不同的HTML 标签；<table>标签用来创建表格， <tr>标签用来创建行，<td>标签用来创建列，通过图4的代码我们可以看到如果我们想创建一个表格的话我们会先在最外层增加一个<table>表格标签，同时我们还在这个标签内容增加了一个border属性，其目的就是用来控制边框的宽度（属性值越大，表框也越粗）。在表格的第一行内容我们可以看到有姓名、年龄、性别这三个值分别通过<tr>标签进行控制，在一行中有三个单元格可以理解为三列，每一个列通过<td>标签进行控制，当然在<tr> 标签中增加了一个属性align=center，其目的主要是用来控制单元格内容的居中展示。如果我们想设置表格的宽和高我们也可以添加上width 和height 属性，只需要灵活变通即可（图4）。</p><p>学会了HTML 的基础语法后如果用Python 列表定义了一个值，那么如何将列表转化成表格的形式呢？<p><img src="https://img.fx361.cc/images/2023/05/07/qkimagesdinbdinb202315dinb20231511-2-l.jpg"/></p></p><p>首先我们可以把一些HTML 固定的内容给提取出来通过变量来保存，观察发现变化内容最大的部分还是在于<tr>和<td>这块区域， 通过变量将一些固定的值保存到html_header和html_tail 中，html_body 用来存储中间的表格部分<tr>和<td>，当然不要忘记我们自定义的参数args，这里我们通过嵌套列表来保存定义的参数（当然不必和我完全相同，可自行定义），每一行的内容都是由一对<tr>标签构成，里面单元格的值根据列表中个数的值进行控制，首先我们对外层进行循环，循环出来的列表就是相当于每一行的内容， 将<tralign=center>进行拼接， 再根据每一行的内容进行循环提取值，然后对值进行<td> 拼接。完成后我们可以通过打印输出的形式将HTML 结果进行输出，将内容复制到记事本或者vscode 保存为html 格式运行查看结果是否符合我们的预期。如果最终的效果没有达到预期，就需要检查Python 代码是否出现了问题并进行相应的调整（图5）。<p><img src="https://img.fx361.cc/images/2023/05/07/qkimagesdinbdinb202315dinb20231511-3-l.jpg"/></p></p><p>除了一些简单基础的HTML 标签外，HTML 可以嵌入如JavaScript 的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其他元素的外观与布局。</p></div></div>
<!-- <div class="m_article_pdf"><a href="https://cimg.fx361.com/kkb.apk">查看pdf文档请下载app</a></div>--><div class="article_love_part">
<h3>猜你喜欢</h3>
<div class="article_love_keyword"><span><a href="/tags/1/b/17700f3f4a7ee5f6/1.html" target="_blank">单元格</a></span><span><a href="/tags/3/1/84adf48acbd6ad24/1.html" target="_blank">列表</a></span><span><a href="/tags/b/3/104709397ba68e7e/1.html" target="_blank">表格</a></span></div>
<div class="article_love_news"><dd><a href="/news/2022/0928/18186098.html" target="_blank" title="《现代临床医学》来稿表格要求">《现代临床医学》来稿表格要求</a></dd><dd><a href="/news/2022/0212/11434854.html" target="_blank" title="《现代临床医学》来稿表格要求">《现代临床医学》来稿表格要求</a></dd><dd><a href="/news/2021/0427/11987514.html" target="_blank" title="学习运用列表法">学习运用列表法</a></dd><dd><a href="/news/2021/0421/8157768.html" target="_blank" title="流水账分类统计巧实现">流水账分类统计巧实现</a></dd><dd><a href="/news/2020/0622/6796481.html" target="_blank" title="玩转方格">玩转方格</a></dd><dd><a href="/news/2020/0619/6790627.html" target="_blank" title="玩转方格">玩转方格</a></dd><dd><a href="/news/2020/0619/6788278.html" target="_blank" title="扩列吧">扩列吧</a></dd><dd><a href="/news/2020/0101/13897446.html" target="_blank" title="统计表格的要求">统计表格的要求</a></dd><dd><a href="/news/2018/0507/17217604.html" target="_blank" title="浅谈Excel中常见统计个数函数的用法">浅谈Excel中常见统计个数函数的用法</a></dd><dd><a href="/news/2015/0910/9717560.html" target="_blank" title="列表画树状图各有所长">列表画树状图各有所长</a></dd></div>
</div><div class="phbk_part"><h3>杂志排行</h3>
<ul><li><a href="/bk/hzjjykj/202413.html" class="title">《合作经济与科技》</a><a href="/bk/hzjjykj/202413.html" class="date">2024年13期</a></li><li><a href="/bk/hyyjk/202410.html" class="title">《婚育与健康》</a><a href="/bk/hyyjk/202410.html" class="date">2024年10期</a></li><li><a href="/bk/swyzhsby/20247.html" class="title">《思维与智慧·上半月》</a><a href="/bk/swyzhsby/20247.html" class="date">2024年7期</a></li><li><a href="/bk/tckjyjs/202311.html" class="title">《陶瓷科学与艺术》</a><a href="/bk/tckjyjs/202311.html" class="date">2023年11期</a></li><li><a href="/bk/zgsr/20247.html" class="title">《中国商人》</a><a href="/bk/zgsr/20247.html" class="date">2024年7期</a></li><li><a href="/bk/jsbl/20244.html" class="title">《教师博览》</a><a href="/bk/jsbl/20244.html" class="date">2024年4期</a></li><li><a href="/bk/sdjy/20246.html" class="title">《师道·教研》</a><a href="/bk/sdjy/20246.html" class="date">2024年6期</a></li><li><a href="/bk/zgdwmy/20246.html" class="title">《中国对外贸易》</a><a href="/bk/zgdwmy/20246.html" class="date">2024年6期</a></li><li><a href="/bk/bl/20246.html" class="title">《伴侣》</a><a href="/bk/bl/20246.html" class="date">2024年6期</a></li><li><a href="/bk/jjjsxzxx/20246.html" class="title">《经济技术协作信息》</a><a href="/bk/jjjsxzxx/20246.html" class="date">2024年6期</a></li></ul>
</div><div class="bk_part">
<div class="bk_im_b"><a href="/bk/dnb/202315.html"><img src="https://img.fx361.cc/images/2023/05/06/cnqkimagesdinbdinb202315-l_mini.webp" alt=""></a></div>
<div class="dbk_title"><a href="/bk/dnb/" target="_blank">电脑报</a></div>
<div class="dbk_date"><a href="/bk/dnb/202315.html" target="_blank">2023年15期</a></div>
</div><div class="others">
<h3><a href="/bk/dnb/" target="_blank">电脑报</a>的其它文章</h3>
<ul><li><a href="/news/2023/0424/21808057.html" title="游中学，学中思">游中学，学中思</a></li><li><a href="/news/2023/0424/21808071.html" title="大厂交期超50周，IGBT国产迎来换挡加速">大厂交期超50周，IGBT国产迎来换挡加速</a></li><li><a href="/news/2023/0424/21812049.html" title="漫画专栏">漫画专栏</a></li><li><a href="/news/2023/0424/21810021.html" title="2.8K 120Hz好屏高能轻薄本">2.8K 120Hz好屏高能轻薄本</a></li><li><a href="/news/2023/0424/21810031.html" title="2K/100帧畅玩高画质光追大作">2K/100帧畅玩高画质光追大作</a></li><li><a href="/news/2023/0424/21810098.html" title="2K高帧游戏甜品+AI生产利器">2K高帧游戏甜品+AI生产利器</a></li></ul></div></div>
<div class="m_footer"></div>
<script>
if ('serviceWorker' in navigator) {
window.onload = function () {
navigator.serviceWorker.register('/sw.js');
};
}
</script>
<script type="text/javascript" src="https://s1.pstatp.com/cdn/expire-1-M/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="https://s2.pstatp.com/cdn/expire-1-M/Swiper/4.5.0/js/swiper.min.js"></script>
<script type="text/javascript" src="https://s1.pstatp.com/cdn/expire-1-M/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
<script type="text/javascript">
document.write('<script src="https://img.fx361.cc/js/m.index_cc.js"><\/script>');
</script>
</section>
</body>
</html>