How can I control the CSS and HTML of calendar control?

Hi.

I added a calendar control to my page and when I view the source of the page I found this ugly markup:

  <table id="Calendar1" class="aspNetDisabled" cellspacing="0" cellpadding="2" title="Calendar" style="color:#CC0099;background-color:#DDDDFF;border-color:#000099;border-width:2px;border-style:Dashed;border-collapse:collapse;">
	<tr><td colspan="7" style="background-color:Silver;"><table cellspacing="0" style="color:#CC0099;width:100%;border-collapse:collapse;">
		<tr><td align="center" style="width:70%;">June 2011</td></tr>
	</table></td></tr><tr><th align="center" abbr="Saturday" scope="col">Sat</th><th align="center" abbr="Sunday" scope="col">Sun</th><th align="center" abbr="Monday" scope="col">Mon</th><th align="center" abbr="Tuesday" scope="col">Tue</th><th align="center" abbr="Wednesday" scope="col">Wed</th><th align="center" abbr="Thursday" scope="col">Thu</th><th align="center" abbr="Friday" scope="col">Fri</th></tr><tr><td align="center" style="width:14%;">28</td><td align="center" style="width:14%;">29</td><td align="center" style="width:14%;">30</td><td align="center" style="width:14%;">31</td><td align="center" style="width:14%;">1</td><td align="center" style="width:14%;">2</td><td align="center" style="width:14%;">3</td></tr><tr><td align="center" style="width:14%;">4</td><td align="center" style="width:14%;">5</td><td align="center" style="width:14%;">6</td><td align="center" style="width:14%;">7</td><td align="center" style="width:14%;">8</td><td align="center" style="width:14%;">9</td><td align="center" style="width:14%;">10</td></tr><tr><td align="center" style="width:14%;">11</td><td align="center" style="width:14%;">12</td><td align="center" style="width:14%;">13</td><td align="center" style="width:14%;">14</td><td align="center" style="width:14%;">15</td><td align="center" style="width:14%;">16</td><td align="center" style="width:14%;">17</td></tr><tr><td align="center" style="width:14%;">18</td><td align="center" style="width:14%;">19</td><td align="center" style="width:14%;">20</td><td align="center" style="width:14%;">21</td><td align="center" style="width:14%;">22</td><td align="center" style="width:14%;">23</td><td align="center" style="width:14%;">24</td></tr><tr><td align="center" style="width:14%;">25</td><td align="center" style="width:14%;">26</td><td align="center" style="width:14%;">27</td><td align="center" style="width:14%;">28</td><td align="center" style="width:14%;">29</td><td align="center" style="width:14%;">30</td><td align="center" style="width:14%;">1</td></tr><tr><td align="center" style="width:14%;">2</td><td align="center" style="width:14%;">3</td><td align="center" style="width:14%;">4</td><td align="center" style="width:14%;">5</td><td align="center" style="width:14%;">6</td><td align="center" style="width:14%;">7</td><td align="center" style="width:14%;">8</td></tr>
</table>



Now my question is how to change this ugly markup or at least organise the CSS and put them in an external file?

Regards.

Someone else had the same problem - BaseCalendar - Home