didimka,
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
th span{
cursor: pointer;
}
table{width:80%;
height:70%;}
th {width:100px;
border:1px solid red;}
td{width:100px;
height:20px;
border:1px solid red;}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
var tr = $("#timetable tr"),
first = $("td:first", tr),
th = $("#timetable th:first"),
day = new Date,
span;
date = day.getDay();
!date && (date = 7);
function set(date) {
day.setDate(day.getDate() - date);
first.each(function (indx, el) {
day.setDate(day.getDate() + 1);
$(el).html(day.toLocaleDateString()) //отформатируйте дату как вам нужно
})
}
set(date);
span = $("<span/>", {
text: "\u25c0",
click: function () {
set(14)
},
css: {
"float": "left"
}
});
th.prepend(span);
span = $("<span/>", {
text: "\u25b6",
click: function () {
set(0)
},
css: {
"float": "right"
}
});
th.append(span)
});
</script>
</head>
<body>
<table id="timetable">
<thead>
<tr>
<th>day</th>
<th>start</th>
<th>stop</th>
<th>802</th>
<th>803</th>
<th>804</th>
<th>805</th>
<th>806</th></tr>
</thead>
<tbody>
<tr><td id="day">111</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td id="day"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td id="day"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td id="day"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td id="day"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td id="day"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td id="day"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>
</body>
</html>