有时候要邮件中要用到带边框的表格,又要兼容各个邮箱及浏览器,最好的方法还是用原始的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 |
<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"> </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>
实现原理,设置整个table的背景色为#000000黑色,边框为0,单元格间距为2,再对每个单元格设置白色背景即可