Simple Tableless Calendar

This is another little CSS experiment. This is an attempt at creating a calendar without the use of tables. Instead just an unordered list and a little CSS. You can take a look at the example

To get started, you’ve got to plugin the days and the dates in ul format. I’ll mark the days of the week with the .day class. I tried condensing the code a bit here to make it easy to cut and paste if you’d like.

<ul> <li class="day">sun</li> <li class="day">mon</li> <li class="day">tues</li> 
<li class="day">wed</li> <li class="day">thurs</li> <li class="day">fri</li> <li class="day">sat</li> 
<li> </li> <li> </li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> 
<li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> 
<li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> 
<li>20</li> <li>21</li> <li>22</li> <li>23</li> <li>24</li> <li>25</li> <li>26</li> 
<li>27</li> <li>28</li> <li>29</li> <li>30</li> <li>31</li> <li> </li> <li> </li> </ul>

Once you’ve got the list done, the rest is pretty simple. Give each list item a width, and then the entire unordered list a width equal to seven times the list item width. For example each list item could be 50px wide and the entire list could be set to 350px. This will keep 7 items on a line, and push the next 7 down. Now just change the list-style to none and float each item.

ul{width:350px;list-style:none;margin:0px;padding:0px;}
ul li{float:left;width:50px;height:50px;}

You might want to change height of the days of the week too.
ul li.day{height:30px;}

And that will pretty much get the job done. You can spend a lot more time styling it. I put up an example on the demo page of a calendar with a little more CSS involved. Go view the source, and feel free to play with it.