使用 Pandas to_html 创建带状行

Question

我正在尝试从数据帧创建样式化的 HTML table，最终使用 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 可能包含的实际结果：

<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() 函数向 table 添加带状行？任何意见，将不胜感激。提前致谢！

Answer 1

后来我找到了答案。无论好坏，Outlook 都不会呈现第 n child 格式。通过我使用的 Reddit post：

“您在使用 CSS 设置电子邮件样式时感到很痛苦，尤其是当涉及到 Outlook 时。如果有疑问，假设 Outlook 无法理解您抛给它的语法。Nth child 太现代了，行不通。你唯一的选择是使用内联样式——通常你会在电子邮件中使用很多内联样式。它不漂亮，但很管用。"

虽然这对我来说可能行不通，但我找到的答案是使用以下内容替换默认的 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 中）：

使用 Pandas to_html 创建带状行

Create Banded Rows Using Pandas to_html

python

html

python-3.x

pandas

win32com