title: HTML: How to create a calendar view?
body: <p>I am HTML/CSS beginner attempting to create calendar view very similar to Microsoft Outlook's design as shown below:</p>
  
  <p><a href="https://i.stack.imgur.com/9AJP5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9AJP5.jpg" alt="enter image description here"></a></p>
  
  <p>So far, I gotten the basic outline of the calendar with the following HTML/CSS:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;August, 2016&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;center&gt;&lt;h1&gt;August, 2016&lt;/h1&gt;&lt;/center&gt;
      &lt;style&gt;
          table{
              table-layout: fixed;
          }
      &lt;/style&gt;
      &lt;table border="1" width="1250" height="800"&gt;
          &lt;tr&gt;
              &lt;th&gt;Sun&lt;/th&gt;
              &lt;th&gt;Mon&lt;/th&gt;
              &lt;th&gt;Tue&lt;/th&gt;
              &lt;th&gt;Wed&lt;/th&gt;
              &lt;th&gt;Thur&lt;/th&gt;
              &lt;th&gt;Fri&lt;/th&gt;
              &lt;th&gt;Sat&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;td&gt;1&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;
                                  &lt;a href=""&gt;Claim Benefits&lt;/a&gt;&lt;br&gt;
                                  &lt;a href=""&gt;Pick up groceries&lt;/a&gt;&lt;br&gt;
                                  &lt;a href=""&gt;Iron the shirts&lt;/a&gt;&lt;br&gt;
                                  &lt;a href=""&gt;+5 more...&lt;/a&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/td&gt;
              &lt;td&gt;2&lt;/td&gt;
          &lt;/tr&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;4&lt;/td&gt;
              &lt;td&gt;5&lt;/td&gt;
              &lt;td&gt;6&lt;/td&gt;
              &lt;td&gt;7&lt;/td&gt;
              &lt;td&gt;8&lt;/td&gt;
              &lt;td&gt;9&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tr&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;4&lt;/td&gt;
              &lt;td&gt;
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;td&gt;5&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;
                                  &lt;a href=""&gt;Claim Benefits&lt;/a&gt;&lt;br&gt;
                                  &lt;a href=""&gt;Pick up groceries&lt;/a&gt;&lt;br&gt;
                                  &lt;a href=""&gt;Iron the shirts&lt;/a&gt;&lt;br&gt;
                                  &lt;a href=""&gt;+5 more...&lt;/a&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
  
              &lt;/td&gt;
              &lt;td&gt;6&lt;/td&gt;
              &lt;td&gt;7&lt;/td&gt;
              &lt;td&gt;8&lt;/td&gt;
              &lt;td&gt;9&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tr&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;4&lt;/td&gt;
              &lt;td&gt;5&lt;/td&gt;
              &lt;td&gt;6&lt;/td&gt;
              &lt;td&gt;7&lt;/td&gt;
              &lt;td&gt;8&lt;/td&gt;
              &lt;td&gt;9&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tr&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;4&lt;/td&gt;
              &lt;td&gt;5&lt;/td&gt;
              &lt;td&gt;6&lt;/td&gt;
              &lt;td&gt;7&lt;/td&gt;
              &lt;td&gt;8&lt;/td&gt;
              &lt;td&gt;9&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tr&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;4&lt;/td&gt;
              &lt;td&gt;5&lt;/td&gt;
              &lt;td&gt;6&lt;/td&gt;
              &lt;td&gt;7&lt;/td&gt;
              &lt;td&gt;8&lt;/td&gt;
              &lt;td&gt;9&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Which produces:</p>
  
  <p><a href="https://i.stack.imgur.com/m5okM.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m5okM.jpg" alt="enter image description here"></a>
  I want to accomplish some of the same things Outlook does:</p>
  
  <ol>
  <li><p>The day of the month number should be on the top left corner of the cell. I attempted to create this with a table inside the cell but it doesn't quite feel or look right. I am directly attempting to recreate Outlook's view and the way they setup the day number and reminders below it.</p></li>
  <li><p>Each of the cells should maintain the same size while containing up to 4 hyperlinks. In the above code, the cells of the row containing hyperlinks become bigger than the cells of the other rows. I want to fix the cell size such that all cells are the same size whether they contain up to 4 hyperlinks or not. </p></li>
  </ol>
  
  <p>Thanks for any helpful code or suggestions.</p>