HTMLGoodies
The ultimate html resource
Earthweb.com


About the Double-Underlined Links


Become a Partner




Search Clipart.com:



internet.commerce















HTML Goodies : HTML and Graphics Tutorials : Tables Tutorial: So You Want A Calendar, Huh?

HTML GOODIES TO GO NEWSLETTER


Other Related Newsletters

So You Want A Calendar, Huh?


By Joe Burns

...use these to jump around or read it all
[The Calendar]
[What Does It]
[Please note]
[Tables Inside Tables]

     Why didn't I think of this sooner?!?! That's why I read the email from you. You give the best ideas. A new year started (1997 - this was posted in January) and a new year means you need a calendar. I should have seen this coming. But I didn't. Instead I received like 50 requests to make an HTML calendar. So I did.

The Calendar


December 2001
Another year comes to an end
Sun Mon Tue Wed Thu Fri Sat
1
2 3 4 5 6 7 8
9 1 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31

     Isn't that neat? And it's not that rough to do. It's actually just a simple table with a couple of additions. If you don't know about tables, see So You Want A Table, Huh? and So You Want Advanced Tables, Huh?. Those two tutorials will help you a great deal in understanding this one.

What Does It

     Here's the code I used to create the calendar above. It's really long winded:

<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=3>
<TR>
<TD COLSPAN="7" ALIGN=center><B>December 2001</B></TD>
</TR>

<TR>
<TD COLSPAN="7" ALIGN=center><I>Another year comes to an end</I></TD>
</TR>

<TR>
<TD ALIGN=center>Sun</TD>
<TD ALIGN=center>Mon</TD>
<TD ALIGN=center>Tue</TD>
<TD ALIGN=center>Wed</TD>
<TD ALIGN=center>Thu</TD>
<TD ALIGN=center>Fri</TD>
<TD ALIGN=center>Sat</TD>
</TR>

<TR>
<TD ALIGN=center></TD>
<TD ALIGN=center></TD>
<TD ALIGN=center></TD>
<TD ALIGN=center></TD>
<TD ALIGN=center></TD>
<TD ALIGN=center></TD>
<TD ALIGN=center>1</TD>
</TR>

<TR>
<TD ALIGN=center>2</TD>
<TD ALIGN=center>3</TD>
<TD ALIGN=center>4</TD>
<TD ALIGN=center>5</TD>
<TD ALIGN=center>6</TD>
<TD ALIGN=center>7</TD>
<TD ALIGN=center>8</TD>
</TR>

<TR>
<TD ALIGN=center>9</TD>
<TD ALIGN=center>10</TD>
<TD ALIGN=center>11</TD>
<TD ALIGN=center>12</TD>
<TD ALIGN=center>13</TD>
<TD ALIGN=center>14</TD>
<TD ALIGN=center>15</TD>
</TR>

<TR>
<TD ALIGN=center>16</TD>
<TD ALIGN=center>17</TD>
<TD ALIGN=center>18</TD>
<TD ALIGN=center>19</TD>
<TD ALIGN=center>20</TD>
<TD ALIGN=center>21</TD>
<TD ALIGN=center>22</TD>
</TR>

<TR>
<TD ALIGN=center>23</TD>
<TD ALIGN=center>24</TD>
<TD ALIGN=center>25</TD>
<TD ALIGN=center>26</TD>
<TD ALIGN=center>27</TD>
<TD ALIGN=center>28</TD>
<TD ALIGN=center>29</TD>
</TR>

<TR>
<TD ALIGN=center>30</TD>
<TD ALIGN=center>31</TD>
<TD ALIGN=center></TD>
<TD ALIGN=center></TD>
<TD ALIGN=center></TD>
<TD ALIGN=center></TD>
<TD ALIGN=center></TD>

</TR>

</TABLE>

     You can just simply copy what is above and paste it to your page and get the exact calendar as above.

Please Note

     (again, this will be a lot easier if you understand tables)

  • The two top headers were created by entering a COLSPAN command telling the top row to span across all seven rows.

  • Each cell was created by simply entering in a number for the day. The trick is making sure each day gets the correct numbers. Notice above that each little grouping is seven items representing each week.

  • You can activate each cell simply by putting an HREF command and activating the number to be clicked upon. Like so:

    <TD ALIGN=center><A HREF="http://www.page.com">22</A>

  • The raised look where there are no days is created by offing a <TD> command but giving no data. You must offer the TD to keep the format square, just don't offer any information.

Tables Inside Of Tables?

     You bet, but it's mighty complicated. Go here for a complete tutorial.

     Now go! And tell someone what day it is.

[The Calendar]
[What Does It]
[Please note]
[A Whole Year]
[Tables Inside Tables]

Tools:
Add htmlgoodies.com to your favorites
Add htmlgoodies.com to your browser search box
IE 7 | Firefox 2.0 | Firefox 1.5.x
Receive news via our XML/RSS feed

IT Management Networking & Communications Web Development Hardware & Systems Software Development Earthwebnews.com



JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers