If you're interested in creating a basic HTML calendar with Inline CSS you've come to the right place! While inline styling is not the most practical way to code it's good to learn and has it's uses. You'll find the code below that you can either copy and paste as is or use as a template to create your own calendar. Enjoy!
If you'd like to learn how to create a basic calendar, read through my step by step guide tutorial: How To Create A Simple Calendar Using HTML!
Calendar With Borders Demo:
| December 2013 | ||||||
|---|---|---|---|---|---|---|
| Su | Mo | Tu | We | Th | Fr | Sa |
HTML:
<center><table style="background-color:#00ccff; border:3px solid #008fb2; color:003d4c; box-shadow: 4px 4px 2px #cccccc; font-family:times new roman,serif;width:400px; height:400px;">
<tr style="background:#80e6ff;font-size:170%;font-family:Comic Sans MS,cursive, sans-serif;">
<th colspan="7">December 2013</th>
</tr>
<tr style="background:#008fb2; color:#ffffff;font-size:120%;text-decoration:underline;">
<th>Su</th>
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
</tr>
<tr style="background:#ccf5ff;">
<td><center>1</center></td>
<td><center>2</center></td>
<td><center>3</center></td>
<td><center>4</center></td>
<td><center>5</center></td>
<td><center>6</center></td>
<td><center>7</center></td>
</tr>
<tr style="background:#ccf5ff;">
<td><center>8</center></td>
<td><center>9</center></td>
<td><center>10</center></td>
<td><center>11</center></td>
<td><center>12</center></td>
<td><center>13</center></td>
<td><center>14</center></td>
</tr>
<tr style="background:#ccf5ff;">
<td><center>15</center></td>
<td><center>16</center></td>
<td><center>17</center></td>
<td><center>18</center></td>
<td><center>19</center></td>
<td><center>20</center></td>
<td><center>21</center></td>
</tr>
<tr style="background:#ccf5ff;">
<td><center>22</center></td>
<td><center>23</center></td>
<td><center>24</center></td>
<td><center>25</center></td>
<td><center>26</center></td>
<td><center>27</center></td>
<td><center>28</center></td>
</tr>
<tr style="background:#ccf5ff;">
<td><center>29</center></td>
<td><center>30</center></td>
<td><center>31</center></td>
<td style="background:#80e6ff;"></td>
<td style="background:#80e6ff;"></td>
<td style="background:#80e6ff;"></td>
<td style="background:#80e6ff;"></td>
</tr>
</table></center>
Calendar Without Borders Demo:
| December 2013 | ||||||
|---|---|---|---|---|---|---|
| Su | Mo | Tu | We | Th | Fr | Sa |
HTML:
<center><table style="background-color:#00ccff;border:3px solid #008fb2;color:003d4c;box-shadow:4px 4px 2px #cccccc; font-family:times new roman,serif;width:400px;height:400px;border-collapse:collapse;">
<tr style="background:#80e6ff;font-size:170%;font-family:Comic Sans MS,cursive, sans-serif;">
<th colspan="7">December 2013</th>
</tr>
<tr style="background:#008fb2; color:#ffffff;font-size:120%;text-decoration:underline;">
<th>Su</th>
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
</tr>
<tr style="background:#ccf5ff;">
<td><center>1</center></td>
<td><center>2</center></td>
<td><center>3</center></td>
<td><center>4</center></td>
<td><center>5</center></td>
<td><center>6</center></td>
<td><center>7</center></td>
</tr>
<tr style="background:#ccf5ff;">
<td><center>8</center></td>
<td><center>9</center></td>
<td><center>10</center></td>
<td><center>11</center></td>
<td><center>12</center></td>
<td><center>13</center></td>
<td><center>14</center></td>
</tr>
<tr style="background:#ccf5ff;">
<td><center>15</center></td>
<td><center>16</center></td>
<td><center>17</center></td>
<td><center>18</center></td>
<td><center>19</center></td>
<td><center>20</center></td>
<td><center>21</center></td>
</tr>
<tr style="background:#ccf5ff;">
<td><center>22</center></td>
<td><center>23</center></td>
<td><center>24</center></td>
<td><center>25</center></td>
<td><center>26</center></td>
<td><center>27</center></td>
<td><center>28</center></td>
</tr>
<tr style="background:#ccf5ff;">
<td><center>29</center></td>
<td><center>30</center></td>
<td><center>31</center></td>
<td style="background:#80e6ff;"></td>
<td style="background:#80e6ff;"></td>
<td style="background:#80e6ff;"></td>
<td style="background:#80e6ff;"></td>
</tr>
</table></center>
No comments:
Post a Comment