使用 Pandas to_html 创建带状行

Question

我正在尝试从数据帧创建一个样式化的 HTML 表，最终使用 Win32 在电子邮件中发送。我正在使用的数据框可能看起来像这样：

data_2 = [["Article 1", "Source 1", "Link 1", "Publication Date 1", "Keyword 1"],["Article 2", "Source 2", "Link 2", "Publication Date 2"]]
df_2 = pd.DataFrame(data_2, columns = ['Article','Source', 'Link', 'Date Published','Keyword'])

使用 Pandas to_html 函数，我使用 .replace() 添加了一些样式方法

html1 = df_2.to_html(border=0, index=False).replace('<th>','<th style = "background-color: #006666; color:white; font-family:Arial; font-size:12; border:0px solid silver;">').replace('<td>','<td style = "background-color: #DBDBDB; color:black; font-family:Arial; font-size:12; border:.5px solid black; padding:1; margin:0; border-collapse: collapse; padding:3;">')

这会生成以下 HTML，其中包含此表可能包含的实际结果

<table border="0" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th style = "background-color: #006666; color:white; font-family:Arial; font-size:12; border:0px solid white;">Article</th>
      <th style = "background-color: #006666; color:white; font-family:Arial; font-size:12; border:0px solid white;">Source</th>
      <th style = "background-color: #006666; color:white; font-family:Arial; font-size:12; border:0px solid white;">Link</th>
      <th style = "background-color: #006666; color:white; font-family:Arial; font-size:12; border:0px solid white;">Date Published</th>
      <th style = "background-color: #006666; color:white; font-family:Arial; font-size:12; border:0px solid white;">Keyword</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style = "background-color: #DBDBDB; color:black; font-family:Arial; font-size:12; border:.5px solid black; padding:1; margin:0; border-collapse: collapse; padding:3;">One Gas identifies 175 Bcf of renewable natural gas resources, lines up projects</td>
      <td style = "background-color: #DBDBDB; color:black; font-family:Arial; font-size:12; border:.5px solid black; padding:1; margin:0; border-collapse: collapse; padding:3;">S&amp;P Global</td>
      <td style = "background-color: #DBDBDB; color:black; font-family:Arial; font-size:12; border:.5px solid black; padding:1; margin:0; border-collapse: collapse; padding:3;">https://www.spglobal.com/marketintelligence/en/news-insights/latest-news-headlines/one-gas-identifies-175-bcf-of-renewable-natural-gas-resources-lines-up-projects-69101316</td>
      <td style = "background-color: #DBDBDB; color:black; font-family:Arial; font-size:12; border:.5px solid black; padding:1; margin:0; border-collapse: collapse; padding:3;">2022-02-25 18:00:04</td>
      <td style = "background-color: #DBDBDB; color:black; font-family:Arial; font-size:12; border:.5px solid black; padding:1; margin:0; border-collapse: collapse; padding:3;">ONE Gas</td>
    </tr>
    <tr>
      <td style = "background-color: #DBDBDB; color:black; font-family:Arial; font-size:12; border:.5px solid black; padding:1; margin:0; border-collapse: collapse; padding:3;">Sempra Energy (SRE) Q4 Earnings Beat, Revenues Rise Y/Y</td>
      <td style = "background-color: #DBDBDB; color:black; font-family:Arial; font-size:12; border:.5px solid black; padding:1; margin:0; border-collapse: collapse; padding:3;">Nasdaq</td>
      <td style = "background-color: #DBDBDB; color:black; font-family:Arial; font-size:12; border:.5px solid black; padding:1; margin:0; border-collapse: collapse; padding:3;">https://www.nasdaq.com/articles/sempra-energy-sre-q4-earnings-beat-revenues-rise-y-y</td>
      <td style = "background-color: #DBDBDB; color:black; font-family:Arial; font-size:12; border:.5px solid black; padding:1; margin:0; border-collapse: collapse; padding:3;">2022-02-25 16:09:00</td>
      <td style = "background-color: #DBDBDB; color:black; font-family:Arial; font-size:12; border:.5px solid black; padding:1; margin:0; border-collapse: collapse; padding:3;">Dte Energy</td>
    </tr>
    <tr>
      <td style = "background-color: #DBDBDB; color:black; font-family:Arial; font-size:12; border:.5px solid black; padding:1; margin:0; border-collapse: collapse; padding:3;">Wayfair (W) Q4 Loss Wider Than Expected, Revenues Fall Y/Y</td>
      <td style = "background-color: #DBDBDB; color:black; font-family:Arial; font-size:12; border:.5px solid black; padding:1; margin:0; border-collapse: collapse; padding:3;">Nasdaq</td>
      <td style = "background-color: #DBDBDB; color:black; font-family:Arial; font-size:12; border:.5px solid black; padding:1; margin:0; border-collapse: collapse; padding:3;">https://www.nasdaq.com/articles/wayfair-w-q4-loss-wider-than-expected-revenues-fall-y-y</td>
      <td style = "background-color: #DBDBDB; color:black; font-family:Arial; font-size:12; border:.5px solid black; padding:1; margin:0; border-collapse: collapse; padding:3;">2022-02-25 15:20:00</td>
      <td style = "background-color: #DBDBDB; color:black; font-family:Arial; font-size:12; border:.5px solid black; padding:1; margin:0; border-collapse: collapse; padding:3;">Cms Energy</td>
    </tr>
    <tr>
    </tr>
  </tbody>
</table>

：如何使用 .replace() 函数向该表添加带状行？任何建议将不胜感激。先感谢您！

Answer 1

从那以后我找到了答案。无论好坏，Outlook 都不会呈现第 n 个子格式。通过我使用的 Reddit 帖子：

“您处于使用 CSS 设计电子邮件的世界是痛苦的，尤其是当涉及到 Outlook 时，假设 Outlook 无法理解您向其提供的语法太现代了。你唯一的选择是使用内联样式 - 一般来说，你会在电子邮件中使用很多内联样式，这虽然不漂亮，但很有效。”

虽然这在我的情况下可能不起作用，但我发现的答案是使用以下内容替换默认的 to_html 样式：

html_2 = """<html>
<head>
<style>
table {  border-collapse: collapse;  width: 100%;}
th, td {  text-align: left;  padding: 8px;}
tr:nth-child(even) {background-color: #EDEDED; color:black; font-family:Arial; font-size:12; border:.5px solid black; padding:1; margin:0; border-collapse: collapse; padding:3;}
tr:nth-child(odd) {background-color: #DBDBDB; color:black; font-family:Arial; font-size:12; border:.5px solid black; padding:1; margin:0; border-collapse: collapse; padding:3;}
</style>
</head>
<body>
<table border="0.5" class="dataframe">
  <thead>""" + df.to_html(index=False).replace('<th>','<th style = "background-color: #006666; color:white; font-family:Arial; font-size:12; border:.5px solid silver;">')

理想情况下，它将呈现类似这样的内容（但不在 Outlook 中）：