邮件中的带边框的表格

2014-04-21阅读(4990)评论(0)牵着狗狗看MM

苏州实时公交查询

有时候要邮件中要用到带边框的表格,又要兼容各个邮箱及浏览器,最好的方法还是用原始的table布局,下面先上效果

Month School Week School Term Date Day Lesson Remarks
January 3 Term 1 18 Saturday Lesson 1 Commencement
4 25 Saturday Lesson 2
February 5 1 Saturday Chinese New Year
6 8 Saturday Lesson 3 Entrance Test
7 15 Saturday Lesson 4
8 22 Saturday Lesson 5
March 9 1 Saturday Lesson 6
10 8 Saturday Lesson 7 PTM for all levels
11 School

Holiday

15 Saturday Lesson 8 School Holiday
12 22 Saturday Lesson 9 School Holiday
13 Term 2 29 Saturday Lesson 10
April 14 5 Saturday Lesson 11
15 12 Saturday Lesson 12
16 19 Saturday
17 26 Saturday Lesson 13
May 18 3 Saturday Lesson 14
19 10 Saturday Lesson 15
20 17 Saturday Lesson 16
21 24 Saturday Lesson 17
22 School

Holiday

31 Saturday Lesson 18 School Holiday
June 23 7 Saturday School Holiday
24 14 Saturday School Holiday
25 21 Saturday School Holiday
26 28 Saturday School Holiday
July 27 Term 3 5 Saturday Lesson 19 Youth Day on 6 July
28 12 Saturday Lesson 20
29 19 Saturday Lesson 21
30 26 Saturday
August 31 2 Saturday Lesson 22
32 9 Saturday National Day on 9 August
33 16 Saturday Lesson 23
34 23 Saturday Lesson 24
35 30 Saturday Lesson 25
September 36 School

Holiday

6 Saturday Teacher’s Day on 5 Sept. Classes only for Pri 6*
37 13 Saturday Lesson 26 School Holiday
38 Term 4 20 Saturday Lesson 27
39 27 Saturday Lesson 28
October 40 4 Saturday Lesson 29 Children’s Day on 3 October
41 11 Saturday Lesson 30
42 18 Saturday Lesson 31
43 25 Saturday Lesson 32

[html]
<table cellpadding="0" cellspacing="2" border="0" style="width:800px;text-align:center;font:12px arial;color:#000000;background:#000000;">
<thead>
<tr>
<th style="background:#CCFFCC;font-weight:bold;padding:0;width:95px">Month</th>
<th style="background:#CCFFCC;font-weight:bold;padding:0;width:85px;">School Week</th>
<th style="background:#CCFFCC;font-weight:bold;padding:0;width:85px">School Term</th>
<th style="background:#CCFFCC;font-weight:bold;padding:0;width:80px">Date</th>
<th style="background:#CCFFCC;font-weight:bold;padding:0;width:65px">Day</th>
<th style="background:#CCFFCC;font-weight:bold;padding:0;width:85px">Lesson</th>
<th style="background:#CCFFCC;font-weight:bold;padding:0;width:300px">Remarks</th>
</tr>
<tr>
<th style="background:#CCFFCC;font-weight:bold;padding:0;width:95px">&nbsp;</th>
<th style="background:#CCFFCC;font-weight:bold;padding:0;width:85px;white-space: nowrap;"></th>
<th style="background:#CCFFCC;font-weight:bold;padding:0;width:85px"></th>
<th style="background:#CCFFCC;font-weight:bold;padding:0;width:80px"></th>
<th style="background:#CCFFCC;font-weight:bold;padding:0;width:65px"></th>
<th style="background:#CCFFCC;font-weight:bold;padding:0;width:85px"></th>
<th style="background:#CCFFCC;font-weight:bold;padding:0;width:300px"></th>
</tr>
</thead>
<tbody>
<tr>
<td bgcolor="#ffffff" style="font-weight:bold" rowspan="2">January</td>
<td bgcolor="#ffffff">3</td>
<td bgcolor="#ffffff" style="font-weight:bold" rowspan="8">Term 1</td>
<td bgcolor="#ffffff">18</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 1</td>
<td bgcolor="#ffffff" style="text-align:left">Commencement</td>
</tr>
<tr>

<td bgcolor="#ffffff">4</td>

<td bgcolor="#ffffff">25</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 2</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>
<td bgcolor="#ffffff" style="font-weight:bold" rowspan="4">February</td>
<td bgcolor="#ffffff">5</td>

<td style="background:#FFC000">1</td>
<td bgcolor="#ffffff">Saturday</td>
<td style="background:#A6A6A6">-</td>
<td bgcolor="#ffffff" style="text-align:left">Chinese New Year</td>
</tr>
<tr>

<td bgcolor="#ffffff">6</td>

<td bgcolor="#ffffff">8</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 3</td>
<td bgcolor="#ffffff" style="text-align:left">Entrance Test</td>
</tr>
<tr>

<td bgcolor="#ffffff">7</td>

<td bgcolor="#ffffff">15</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 4</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>

<td bgcolor="#ffffff">8</td>

<td bgcolor="#ffffff">22</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 5</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>
<td bgcolor="#ffffff" style="font-weight:bold" rowspan="5">March</td>
<td bgcolor="#ffffff">9</td>

<td bgcolor="#ffffff">1</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 6</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>

<td bgcolor="#ffffff">10</td>

<td bgcolor="#ffffff">8</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 7</td>
<td bgcolor="#ffffff" style="text-align:left">PTM for all levels</td>
</tr>
<tr>

<td bgcolor="#ffffff">11</td>
<td bgcolor="#ffffff" style="font-weight:bold" rowspan="2">School
<br>Holiday</td>
<td bgcolor="#ffffff" style="background:#FFFF00">15</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 8</td>
<td bgcolor="#ffffff" style="text-align:left">School Holiday</td>
</tr>
<tr>

<td bgcolor="#ffffff">12</td>

<td style="background:#FFFF00">22</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 9</td>
<td bgcolor="#ffffff" style="text-align:left">School Holiday</td>
</tr>
<tr>

<td bgcolor="#ffffff">13</td>
<td bgcolor="#ffffff" style="font-weight:bold" rowspan="9">Term 2</td>
<td bgcolor="#ffffff">29</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 10</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>
<td bgcolor="#ffffff" style="font-weight:bold" rowspan="4">April</td>
<td bgcolor="#ffffff">14</td>

<td bgcolor="#ffffff">5</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 11</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>

<td bgcolor="#ffffff">15</td>

<td bgcolor="#ffffff">12</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 12</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>

<td bgcolor="#ffffff">16</td>

<td bgcolor="#ffffff">19</td>
<td bgcolor="#ffffff">Saturday</td>
<td style="background:#A6A6A6">-</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>

<td bgcolor="#ffffff">17</td>

<td bgcolor="#ffffff">26</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 13</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>
<td bgcolor="#ffffff" style="font-weight:bold" rowspan="5">May</td>
<td bgcolor="#ffffff">18</td>

<td bgcolor="#ffffff">3</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 14</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>

<td bgcolor="#ffffff">19</td>

<td bgcolor="#ffffff">10</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 15</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>

<td bgcolor="#ffffff">20</td>

<td bgcolor="#ffffff">17</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 16</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>

<td bgcolor="#ffffff">21</td>

<td bgcolor="#ffffff">24</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 17</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>

<td bgcolor="#ffffff">22</td>
<td bgcolor="#ffffff" style="font-weight:bold" rowspan="5">School
<br>Holiday</td>
<td bgcolor="#ffffff">31</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 18</td>
<td bgcolor="#ffffff" style="text-align:left">School Holiday</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="font-weight:bold" rowspan="4">June</td>
<td bgcolor="#ffffff">23</td>

<td bgcolor="#ffffff">7</td>
<td bgcolor="#ffffff">Saturday</td>
<td style="background:#A6A6A6">-</td>
<td bgcolor="#ffffff" style="text-align:left">School Holiday</td>
</tr>
<tr>

<td bgcolor="#ffffff">24</td>

<td bgcolor="#ffffff">14</td>
<td bgcolor="#ffffff">Saturday</td>
<td style="background:#A6A6A6">-</td>
<td bgcolor="#ffffff" style="text-align:left">School Holiday</td>
</tr>
<tr>

<td bgcolor="#ffffff">25</td>

<td bgcolor="#ffffff">21</td>
<td bgcolor="#ffffff">Saturday</td>
<td style="background:#A6A6A6">-</td>
<td bgcolor="#ffffff" style="text-align:left">School Holiday</td>
</tr>
<tr>

<td bgcolor="#ffffff">26</td>

<td bgcolor="#ffffff">28</td>
<td bgcolor="#ffffff">Saturday</td>
<td style="background:#A6A6A6">-</td>
<td bgcolor="#ffffff" style="text-align:left">School Holiday</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="font-weight:bold" rowspan="4">July</td>
<td bgcolor="#ffffff">27</td>
<td bgcolor="#ffffff" style="font-weight:bold" rowspan="9">Term 3</td>
<td bgcolor="#ffffff">5</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff" d>Lesson 19</td>
<td bgcolor="#ffffff" style="text-align:left">Youth Day on 6 July</td>
</tr>
<tr>

<td bgcolor="#ffffff">28</td>

<td bgcolor="#ffffff">12</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 20</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>

<td bgcolor="#ffffff">29</td>

<td bgcolor="#ffffff">19</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 21</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>

<td bgcolor="#ffffff">30</td>

<td bgcolor="#ffffff">26</td>
<td bgcolor="#ffffff">Saturday</td>
<td style="background:#A6A6A6">-</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>
<td bgcolor="#ffffff" style="font-weight:bold" rowspan="5">August</td>
<td bgcolor="#ffffff">31</td>

<td bgcolor="#ffffff">2</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 22</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>

<td bgcolor="#ffffff">32</td>

<td style="background:#FFC000">9</td>
<td bgcolor="#ffffff">Saturday</td>
<td style="background:#A6A6A6">-</td>
<td bgcolor="#ffffff" style="text-align:left">National Day on 9 August</td>
</tr>
<tr>

<td bgcolor="#ffffff">33</td>

<td bgcolor="#ffffff">16</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 23</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>

<td bgcolor="#ffffff">34</td>

<td bgcolor="#ffffff">23</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 24</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>

<td bgcolor="#ffffff">35</td>

<td bgcolor="#ffffff">30</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 25</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>
<td bgcolor="#ffffff" style="font-weight:bold" rowspan="4">September</td>
<td bgcolor="#ffffff">36</td>
<td bgcolor="#ffffff" style="font-weight:bold" rowspan="2">School
<br>Holiday</td>
<td style="background:#FFFF00">6</td>
<td bgcolor="#ffffff">Saturday</td>
<td style="background:#A6A6A6">-</td>
<td bgcolor="#ffffff" style="text-align:left">Teacher’s Day on 5 Sept. Classes only for Pri 6*</td>
</tr>
<tr>

<td bgcolor="#ffffff">37</td>

<td style="background:#FFFF00">13</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 26</td>
<td bgcolor="#ffffff" style="text-align:left">School Holiday</td>
</tr>
<tr>

<td bgcolor="#ffffff">38</td>
<td bgcolor="#ffffff" style="font-weight:bold" rowspan="6">Term 4</td>
<td bgcolor="#ffffff">20</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 27</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>

<td bgcolor="#ffffff">39</td>

<td bgcolor="#ffffff">27</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 28</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>
<td bgcolor="#ffffff" style="font-weight:bold" rowspan="4">October</td>
<td bgcolor="#ffffff">40</td>

<td style="background:#FFFF00">4</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 29</td>
<td bgcolor="#ffffff" style="text-align:left">Children’s Day on 3 October</td>
</tr>
<tr>

<td bgcolor="#ffffff">41</td>

<td style="background:#FFFF00">11</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 30</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>

<td bgcolor="#ffffff">42</td>

<td style="background:#FFFF00">18</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 31</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
<tr>

<td bgcolor="#ffffff">43</td>

<td style="background:#FFFF00">25</td>
<td bgcolor="#ffffff">Saturday</td>
<td bgcolor="#ffffff">Lesson 32</td>
<td bgcolor="#ffffff" style="text-align:left"></td>
</tr>
</tbody>
</table>
[/html]

实现原理,设置整个table的背景色为#000000黑色,边框为0,单元格间距为2,再对每个单元格设置白色背景即可

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 邮件中的带边框的表格
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏