如何让邮件中展示的table表格更顺眼?


=Start=

缘由:

端口扫描的结果需要用邮件的形式通知运营人员进行处理,默认的样式有点丑,需要改的更好看一点。

正文:

参考解答:

HTML中控制表格的样式一般是通过<style>…</style>标签来进行设置的,比如(具体的颜色可以自己调整):

<style>
table {
    border-collapse: collapse;
}
th {
    background-color: #007fff;
    color: white;
}
table, th, td {
    border: 1px solid black;
    padding: 5px;
    text-align: left;
}
tr:hover {background-color: #92c2f3;}
tr:nth-child(even) {background-color: #88bfff;}
</style>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
<tr>
<td>ixyzero</td>
<td>com</td>
</tr>
</table>
参考链接:

=END=

,

《 “如何让邮件中展示的table表格更顺眼?” 》 有 5 条评论

  1. 用 PhantomJS 让邮件报表图文并茂(一)
    http://blog.krimeshu.com/2018/04/08/colorful-chart-mail-report-with-phantomjs/
    `
    传统报表邮件中,只能以简单的 table 表格来展示数据,一但数据维度增加、业务日渐复杂,报表邮件将变得越来越冗杂、难以理解。

    通常 Web 端可以采用 ECharts 等方案来实现丰富的图表效果,但报表邮件由于各种邮件客户端环境的关系,虽然是使用 HTML 编写邮件内容,可用的样式、布局都有会诸多限制,甚至不允许执行 JavaScript 脚本。
    虽然邮件不支持脚本生成的 canvas 图表,但却是支持图片展示的。

    将图表转换为图片
    phantomJS 脚本实现自动化
    `

  2. Html中table居中和表格内容居中的问题
    https://blog.csdn.net/itzhongzi/article/details/52593213
    `
    在表格td中,有两个属性控制居中显示:

    align——表示左右居中——left,center,right
    valign——控制上下居中——left,center,right

    这两个属性综合使用,就可以让单元格的内容上下左右都居中显示。

    但是有的时候吧,会失效,那么在td中设置text-align为center也可。

    td {
    text-align: center;
    }

    关于表格居中:

    有时候在Div中加上 里面的Table是不会居中的我们可以在Table中加上 margin:auto 比如:

    aaaaaaaa
    bbb

    `

    html 元素水平居中方式
    https://www.cnblogs.com/darcrand-blog/p/5721733.html
    HTML几种设置水平居中和垂直居中的方式
    https://blog.csdn.net/qq_14962891/article/details/51783136

  3. Email Charts – Bar, Area and Pie Charts
    https://stackoverflow.com/questions/10862767/email-charts-bar-area-and-pie-charts
    `
    发送HTML电子邮件本身是一项棘手的工作。各种邮件客户端的各种标准和限制以及加载的安全限制使创建跨浏览器/客户端HTML电子邮件交付变得困难。作为一个经验法则,我认为您使用的技术越旧,它在邮件客户端之间的一致性越好。所谓的“老”技术,我指的是table驱动的HTML、具有非常基本的CSS属性的内联CSS、不使用脚本等等。
    `
    Echarts官方推荐的Python语言插件
    https://github.com/apache/incubator-echarts#python

  4. 利用 Python + Selenium 实现对页面的指定元素截图(可截长图元素)
    https://paper.tuisec.win/detail/2626fa1cb08d012
    https://www.jianshu.com/p/7ed519854be7
    `
    对WebElement截图
    WebDriver.Chrome自带的方法只能对当前窗口截屏,且不能指定特定元素。若是需要截取特定元素或是窗口超过了一屏,就只能另辟蹊径了。
    WebDriver.PhantomJS自带的方法支持对整个网页截屏。
    下面提供几种思路。

    方式一:针对WebDriver.Chrome

    通过WebDriver的js脚本注入功能,曲线救国。

    1、注入第三方html转canvas的js库(见下方推荐)
    2、获取元素html源码
    3、将html转换为canvas
    4、下载canvas

    优点: 截取长图容易实现
    缺点: 加载第三方库耗费时间。

    方式二:针对WebDriver.Chrome

    截取全图,自行裁剪、拼接

    1、获取元素位置、大小
    2、获取窗口大小
    3、截取包含元素的窗口
    4、进行相应的裁剪和拼接。

    具体算法思路很清晰,但需要注意的细节较多。这里就不在赘述。示例代码请移步:
    https://github.com/auv1107/PythonSpiderLibs

    优点: 不需太多js工作,python+少量js代码即可完成
    缺点: 拼接等工作会被WebDriver的实现差异、图片加载速度等因素影响,需多加注意。 在保证截图质量的情况下,速度较慢。

    方式三:针对WebDriver.PhantomJS

    由于接口实现的差异,PhantomJS相比于Chrome,可以截取到整个网页。所以获取指定元素的截图也就简单很多

    1、截取网页全图
    2、裁剪指定元素
    `

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注