How to Create a Table Calendar With XHTML

Add XHTML table code and CSS style rules to create a simple calendar.

Extensible Hypertext Markup Language (XHTML) is an XML markup language very similar in form and function to HTML. As with HTML, creating a table involves writing code for a few basic components: the table itself, rows and header rows within the table, and individual table cells. Applying some simple Cascading Style Sheet (CSS) rules to this framework allows webpage authors to create a table design that closely mimics the appearance of traditional calendars.

Instructions

1. Open your webpage. If you use a text-editing program such as Notepad or Wordpad, open your webpage and find the location in the code where your table should go. If you use a visual editing program like Adobe Dreamweaver or Microsoft Expression Web, open your webpage and click on the specific area where you want your table placed. Then change your page view to Code View to see the HTML that controls that portion of the page.

2. Create a blank line for the XHTML code of your calendar.

3. Add a calendar heading. This example creates a calendar for the month of February 2010. Copy and paste the following code onto the blank line you created in the previous step:

   <h2>February 2010</h2>

4. Create the containing table. Insert a blank line below your heading tag. Copy and paste the following XHTML code:

   <table>
   </table>

5. Add a header row to the table. Calendars generally display the days of the week along their top rows. Mimic this format by inserting a blank line below the opening "<table>" tag, and then copying and pasting the following code onto the blank line:

   <tr><th>SUN</th><th>MON</th><th>TUE</th><th>WED</th><th>THU</th><th>FRI</th><th>SAT</th></tr>

6. Add a row for each week of the month. February 2010 has days spread over five weeks, so five table rows with seven cells each must be created. Insert a blank line below the header row you added in the previous step, and then copy and paste the following code onto the line:

   <tr><td> </td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
   <tr><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td></tr>
   <tr><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td></tr>
   <tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td></tr>
   <tr><td>28</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>

   The non-breaking space character "( )" appears in cells that have no number value.

7. Add CSS style rules. If you view the table in your browser, you'll see it has a very plain design. A few simple CSS rules can increase the table width, bold and shade the header row, and provide borders for each day of the week. Taken together, these styles help your table more closely resemble a calendar. Locate the "</head>" tag near the top of your code and insert a blank line directly above it. Copy and paste the following code onto the blank line:

   <style type="text/css">
   table { width: 75% }
   th { background-color: #eee; border: 1px solid #ccc; padding: 5px; text-align: left }
   td { border: 1px solid #ccc; padding: 5px; width: 14.29% }
   </style>

8. Save your page and open it in your browser. Your page now contains an XHTML table formatted to look like a calendar month.

References

• XHTML Reference: Tables
• Web Programming Quick Start: XHTML tables