整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
昨天我们在《使用HTML添加表格3（间距与颜色）——零基础自学网页制作》（目录在结尾）中学习了设置单元格以及其中内容的空间间距和背景颜色。
其中添加列向单元格背景颜色只需要修改对应的<tr>标签中的style属性，而修改行向标签需要修改不同<tr></tr>标签中的<td>标签的style属性，这样操作起来就非常的麻烦，那有没有简便的修改行向单元格背景颜色的方法呢？
当然有！
开发团队给出了<colgroup><col></col></colgroup>这样的组合来解决这个问题，下面让我们详细学习。
<colgroup></colgroup>标签是一个给行向单元格打组的标签，在页面中不会显示。
<col></col>标签是来具体设置行向单元格数量和颜色的标签。
示例代码如下：
<colgroup><col span = "1" style="background-color:#ff0000;"></col></colgroup>这段代码添加到"第一个页面.html"当中就可以，具体代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1><hr>
<h2>表格元素</h2><hr>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="2">表格的头部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的脚部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格标题</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>
</html>页面效果如图：
因为第一列和最后一列只有一行所以，也都变红了。
其中span的数量代表行数。
如果把span等号后面的数改成2，因为表格只有两行，所以整个表格都红了。
表格嵌套
我们可以通过向表格中添加表格实现表格嵌套。表格嵌套可以把一个单元格分成行向或列向分割单元格。
代码示例如下：我们把"一列一行"分割成列向两个单元格。
<tr><td><table border = "1" width="100%"><tr><td>1</td><td>2</td></tr></table></td>使用
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>这段代码替换文字"一列一行"即可。
页面效果如图所示：
留个思考题，大家可以思考一下行向分割单元格怎么写。
今天的内容结束了。
全部示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1><hr>
<h2>表格元素</h2><hr>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="2">表格的头部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的脚部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格标题</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>
</html>喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
学到这里，相信大家已经有独立读懂HTML代码说明的能力了，明天我会为大家讲解16进制颜色表示方法。之后会给大家推荐html代码参考手册的链接。如果您是零基础的话，学完16进制颜色表示方法后，基本上就可以无障碍的阅读html代码参考手册了，如果阅读起来还是有困难，请继续看后面我为大家讲解一些常用元素及属性的文章，已及html中特殊符号的输入方法，全部做完后再结束这套教程。
如果您有任何疑问或不解欢迎关注并私信我。
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
本Pandas教程中，我们将详细介绍如何使用Pandas read_html方法从HTML中获取数据。首先，在最简单的示例中，我们将使用Pandas从一个字符串读取HTML。其次，我们将通过几个示例来使用Pandas read_html从Wikipedia表格中获取数据。在之前的一篇文章(关于Python中的探索性数据分析)中，我们也使用了Pandas从HTML表格中读取数据。
在开始学习Python和Pandas时，为了进行数据分析和可视化，我们通常从实践导入数据开始。在之前的文章中，我们已经了解到我们可以直接在Python中输入值(例如，从Python字典创建Pandas dataframe)。然而,通过从可用的源导入数据来获取数据当然更为常见。这通常是通过从CSV文件或Excel文件中读取数据来完成的。例如，要从一个.csv文件导入数据，我们可以使用Pandas read_csv方法。这里有一个如何使用该方法的快速的例子，但一定要查看有关该主题的博客文章以获得更多信息。
现在，上面的方法只有在我们已经有了合适格式的数据(如csv或JSON)时才有用(请参阅关于如何使用Python和Pandas解析JSON文件的文章)。
我们大多数人会使用Wikipedia来了解我们感兴趣的主题信息。此外，这些Wikipedia文章通常包含HTML表格。
要使用pandas在Python中获得这些表格，我们可以将其剪切并粘贴到一个电子表单中，然后，例如使用read_excel将它们读入Python。现在，这个任务当然可以用更少的步骤来完成:我们可以通过web抓取来对它进行自动化。一定要查看一下什么是web抓取。
当然，这个Pandas读取HTML教程将要求我们安装Pandas及其依赖项。例如，我们可以使用pip来安装Python包，比如Pandas，或者安装一个Python发行版(例如，Anaconda、ActivePython)。下面是如何使用pip安装Pandas: pip install pandas。
注意，如果出现消息说有一个更新版本的pip可用，请查看这篇有关如何升级pip的文章。注意，我们还需要安装lxml或BeautifulSoup4，当然，这些包也可以使用pip来安装: pip install lxml。
下面是如何使用Pandas read_html从HTML表格中抓取数据的最简单的语法:
现在我们已经知道了使用Pandas读取HTML表格的简单语法，接下来我们可以查看一些read_html示例。
第一个示例是关于如何使用Pandas read_html方法的，我们将从一个字符串读取HTML表格。
现在，我们得到的结果不是一个Pandas DataFrame，而是一个Python列表。也就是说，如果我们使用type函数，我们可以看到:
如果我们想得到该表格，我们可以使用列表的第一个索引(0)
在第二个Pandas read_html示例中，我们将从Wikipedia抓取数据。实际上，我们将得到蟒科蛇(也称为蟒蛇)的HTML表格。
现在，我们得到了一个包含7个表(len(df))的列表。如果我们去Wikipedia页面，我们可以看到第一个表是右边的那个。然而，在本例中，我们可能对第二个表更感兴趣。
在第三个示例中，我们将从瑞典的covid-19病例中读取HTML表。这里，我们将使用read_html方法的一些附加参数。具体来说，我们将使用match参数。在此之后，我们还需要清洗数据，最后，我们将进行一些简单的数据可视化操作。
如上图所示，该表格的标题为:“瑞典各郡新增COVID-19病例”。现在，我们可以使用match参数并将其作为一个字符串输入：
通过这种方式，我们只得到这个表，但它仍然是一个dataframes列表。现在，如上图所示，在底部，我们有三个需要删除的行。因此，我们要删除最后三行。
现在，我们将使用Pandas iloc删除最后3行。注意，我们使用-3作为第二个参数(请确保你查看了这个Panda iloc教程，以获得更多信息)。最后，我们还创建了这个dataframe的一个副本。
在下一节中，我们将学习如何将多索引列名更改为单个索引。
现在，我们要去掉多索引列。也就是说，我们将把2列索引(名称)变成唯一的列名。这里，我们将使用DataFrame.columns 和 DataFrame.columns,get_level_values:
最后，正如你在“date”列中所看到的，我们使用Pandas read_html从WikiPedia表格抓取了一些注释。接下来，我们将使用str.replace方法和一个正则表达式来删除它们:
现在，我们继续使用Pandas set_index将日期列变成索引。这样一来，我们稍后就可以很容易地创建一个时间序列图。
现在，为了能够绘制这个时间序列图，我们需要用0填充缺失的值，并将这些列的数据类型更改为numeric。这里我们也使用了apply方法。最后，我们使用cumsum方法来获得列中每个新值累加后的值:
在最后一个示例中，我们使用Pandas read_html获取我们抓取的数据，并创建了一个时间序列图。现在，我们还导入了matplotlib，这样我们就可以改变Pandas图例的标题的位置:
在这个Pandas教程中，我们学习了如何使用Pandas read_html方法从HTML中抓取数据。此外，我们使用来自一篇Wikipedia文章的数据来创建了一个时间序列图。最后，我们也可以通过参数index_col来使用Pandas read_html将' Date '列设置为索引列。
英文原文：https://www.marsja.se/how-to-use-pandas-read_html-to-scrape-data-from-html-tables
译者：一瞬
ava程序员学习HTML，表格和表单是用得比较多的，掌握好这2个标签的详细用法会对你非常有益！
一、table表格
表格由table标签表示，里面嵌套tr，表示一行，而tr里面嵌套td和th，表示一行有多少列。它们的具体属性和使用方法如下：
注意点：table、tr和td都有align属性，但含义不同。其中table的align表示整个表格居中对齐，而在tr中表示整行中所有的单元格中的内容居中对齐，在td中则表示该单元格中的内容剧中对齐。此外td和th还有跨行和跨列的功能。现在利用这个知识点实现一个具有层次结构的表格：
代码：
<html>
<head>
<TITLE>first page!!</title>
</head>
<body>
<table border="1" width="700px" align="center">
<tr>
<th>待执行项目</th>
<th> </th>
<th>正在执行项目</th>
</tr>
<tr>
<td valign="top">
<table border="1" width="100%" >
<tr>
<th>
<input type="checkbox" />
</th>
<th>项目名</th>
<th>花费</th>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
</table>
</td>
<td align="center">
<input type="button" value="移入>>" /><br/><br/>
<input type="button" value="<<移出" />
</td>
<td valign="top">
<table border="1" width="100%">
<tr>
<th>
<input type="checkbox" />
</th>
<th>项目名</th>
<th>花费</th>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
代码运行效果：
二、form表单
对于javaEE程序员，我们日常输入用户名和密码，然后提交表单，可是对表单总是懵懵懂懂，现在超详细精炼总结如下，希望可以帮到你！
希望你照着我给出的模板，每一个都去测试一下，你便会豁然开朗，从此表单提交不再困惑！
*请认真填写需求信息，我们会在24小时内与您取得联系。
