DIV Based Table

Table Caption Text
Header 1
Header 2
Header 3
Header 4
Value 1
Value 2
Value 3
Value 4
Value 5
Value 6
Value 7
Value 8
Value 9
Value 10
Value 11
Value 12
Value 12
Value 14
Value 15
Value 16

Standard Table

Table Caption Text
Header 1 Header 2 Header 3 Header 4
Value 1 Value 2 Value 3 Value 4
Value 5 Value 6 Value 7 Value 8
Value 9 Value 10 Value 11 Value 12
Value 13 Value 14 Value 15 Value 16

Calendar using DIV based table

As can be seen in this demonstration, the DIV based calendar can be used anywhere in the grid. It fits itself to the full width of its containing element.

The calendar is also fully responsive.

« January 2015 »
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
« January 2015 »
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Note:
the calendar has empty cells, spaces, elements (call them how you will) which are directly addressed by CSS to add a solid background colour, meaning, the elements are empty for a reason.

If you delete the empty elements the display changes, meaning, the numbers will be under the wrong day. Don't delete the empty elements, they need to be in the calendar block.