如何统一居中HTML表格单元格、修复邮件样式失效及调整标题字号？

问题1：邮件中表格单元格左对齐 #

邮件客户端基本不支持外部样式表（你代码里的stylesheet.css），本地打开时浏览器能加载该文件，所以居中对齐生效；发送邮件后外部样式无法加载，单元格回到默认左对齐。解决方法是将样式内联到HTML元素，这是邮件排版的标准做法：

• 给所有<td>和<th>标签添加内联样式style="text-align: center;"
• 如果要批量处理，也可以在<head>里添加内部样式（部分邮件客户端支持）：

<style type="text/css">
  #table td, #table th {
    text-align: center !important;
  }
</style>

内联样式的兼容性最好，推荐直接写在元素上。

问题2：增大表格标题字号 #

直接在<caption>标签添加内联样式调整字号，比如：

<caption style="font-size: 1.5em; font-weight: bold;">Punjabi University, Patiala</caption>

可以根据需求调整font-size的值（比如20px、1.2rem都可以），加上font-weight: bold能让标题更突出。

修改后的完整代码示例 #

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
  <head>
    <title>Punjabi University, Patiala</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- 添加内部样式增强邮件兼容性 -->
    <style type="text/css">
      #table td, #table th {
        text-align: center !important;
      }
      #table caption {
        font-size: 1.5em !important;
        font-weight: bold !important;
        margin-bottom: 10px;
      }
    </style>
  </head>

  <body id="top">
    <table id="table" border="1">
      <caption style="font-size: 1.5em; font-weight: bold;">Punjabi University, Patiala</caption>
      <thead>
        <tr><td rowspan="2" style="text-align: center;"></td><th colspan="3" style="text-align: center;">Monday</th></tr>
        <tr>
          <th class="xAxis" style="text-align: center;">08:00</th>
          <th class="xAxis" style="text-align: center;">09:00</th>
          <th class="xAxis" style="text-align: center;">10:00</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="yAxis" style="text-align: center;">BS I</th>
          <td style="text-align: center;">Chemistry<br />T13<br /></td>
          <td style="text-align: center;">Mathematics<br />T01<br /></td>
          <td style="text-align: center;">Physics<br />T21<br /></td>
        </tr>
        <tr>
          <th class="yAxis" style="text-align: center;">BS II</th>
          <td style="text-align: center;">Physics<br />T22<br /></td>
          <td style="text-align: center;">Mathematics<br />T02<br /></td>
          <td style="text-align: center;">Chemistry<br />T12<br /></td>
        </tr>
        <tr>
          <th class="yAxis" style="text-align: center;">BS III</th>
          <td style="text-align: center;">Chemistry<br />T11<br /></td>
          <td style="text-align: center;">Physics<br />T23<br /></td>
          <td style="text-align: center;">Mathematics<br />T03<br /></td>
        </tr>
        <tr class="foot"><td style="text-align: center;"></td><td colspan="3" style="text-align: center;">Timetable generated with FET 6.9.2 on 8/1/23 7:19 AM</td></tr>
      </tbody>
    </table>

    <p class="back"><a href="#top">back to the top</a></p>

  </body>
</html>

内容的提问来源于stack exchange，提问作者IgotiT