09-01-unstyled-calendar-table.html 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Unstyled calendar using data table</title>
  6. </head>
  7. <body>
  8. <table class="cal">
  9. <caption><strong>January</strong> 2015</caption>
  10. <colgroup>
  11. <col class="cal-mon">
  12. <col class="cal-tue">
  13. <col class="cal-wed">
  14. <col class="cal-thu">
  15. <col class="cal-fri">
  16. <col class="cal-sat cal-weekend">
  17. <col class="cal-sun cal-weekend">
  18. </colgroup>
  19. <thead>
  20. <tr>
  21. <th abbr="Monday" scope="col">Mon</th>
  22. <th abbr="Tuesday" scope="col">Tue</th>
  23. <th abbr="Wednesday" scope="col">Wed</th>
  24. <th abbr="Thursday" scope="col">Thu</th>
  25. <th abbr="Friday" scope="col">Fri</th>
  26. <th abbr="Saturday" scope="col">Sat</th>
  27. <th abbr="Sunday" scope="col">Sun</th>
  28. </tr>
  29. </thead>
  30. <tbody>
  31. <tr>
  32. <td class="cal-inactive">29</td>
  33. <td class="cal-inactive">30</td>
  34. <td class="cal-inactive">31</td>
  35. <td><a href="#">1</a></td>
  36. <td><a href="#">2</a></td>
  37. <td><a href="#">3</a></td>
  38. <td><a href="#">4</a></td>
  39. </tr>
  40. <tr>
  41. <td><a href="#">5</a></td>
  42. <td><a href="#">6</a></td>
  43. <td><a href="#">7</a></td>
  44. <td><a href="#">8</a></td>
  45. <td><a href="#">9</a></td>
  46. <td><a href="#">10</a></td>
  47. <td><a href="#">11</a></td>
  48. </tr>
  49. <tr>
  50. <td><a href="#">12</a></td>
  51. <td><a href="#">13</a></td>
  52. <td class="cal-current"><a href="#">14</a></td>
  53. <td><a href="#">15</a></td>
  54. <td><a href="#">16</a></td>
  55. <td><a href="#">17</a></td>
  56. <td><a href="#">18</a></td>
  57. </tr>
  58. <tr>
  59. <td><a href="#">19</a></td>
  60. <td><a href="#">20</a></td>
  61. <td><a href="#">21</a></td>
  62. <td><a href="#">22</a></td>
  63. <td><a href="#">23</a></td>
  64. <td><a href="#">24</a></td>
  65. <td><a href="#">25</a></td>
  66. </tr>
  67. <tr>
  68. <td><a href="#">26</a></td>
  69. <td><a href="#">27</a></td>
  70. <td><a href="#">28</a></td>
  71. <td><a href="#">29</a></td>
  72. <td><a href="#">30</a></td>
  73. <td><a href="#">31</a></td>
  74. <td class="cal-inactive">1</td>
  75. </tr>
  76. </tbody>
  77. </table>
  78. </body>
  79. </html>