AngularJS Simple Example

HTML

<div ng-app ng-controller="LoginController">
    
    <table>
		 <thead>
		  <tr>
			<th>Mitarbeiter</th>
			<th ng-repeat="tableMonth in tableMonths" colspan="11" class="center first">{{tableMonth}}</th>
		  </tr>
		  <tr>
			 <th>Zeit</th>
			 <th ng-repeat="tableHeader in tableTimeHeaders">
                 {{tableHeader}}
             </th>
		  </tr>
		 </thead>
		 <tbody>
             <tr ng-repeat="user in users">
                 <td>{{user.name}}</td>
                 <td ng-repeat="yearOverview in user.yearOverviews">
                     <span ng-show="yearOverview == '1'">&nbsp;</span>
                 </td>
             </tr>
		 </tbody>
	</table>
</div>

CSS

table {
    border-collapse: collapse;
    border-spacing: 0;
}

table td, th {
    border: 1px solid #999;	 
    text-align: left;
}
table tr th {
    min-width: 14px !important;
}
table td {
    padding:0; 
    margin:0;
}
table span {
    background-color: #f00;
    border: none;
    display: block;
}
table .center {
    text-align: center;
}
table .first {
    border-left: 2px solid #888;
}
.absenceTable thead tr:last-child th:nth-child(even) {
    font-size: 0.8em;
    padding-top: 0.5em;
    font-weight: normal;
}

.absenceTable thead tr:last-child th:nth-child(2n+3) {
    font-size: 0.8em;
    padding-bottom: 0.5em;
    font-weight: normal;
}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

JavaScript

function LoginController($scope) {

    $scope.tableMonths = ['Oktober', 'November'];
    
    $scope.tableTimeHeaders = ['1','2','3','4','5','6','7','8','9','10','11','1','2','3','4','5','6','7','8','9','10','11'];
    
	var userObjectOktoberAndNovember1 = ['0','0','0','0','1','0','1','0','0','1','0','0','1','0','0','0','0','0','0','1','0','0'];
    var userObject1 = {};
    userObject1.name = 'Miro';
    userObject1.yearOverviews = userObjectOktoberAndNovember1;
    
    var userObjectOktoberAndNovember2 = ['0','1','0','0','1','0','1','0','0','0','0', '1','0','0','0','1','0','0','0','0','1','0'];
    var userObject2 = {};
    userObject2.name = 'Walter';
    userObject2.yearOverviews = userObjectOktoberAndNovember2;
    
    var users = [];
    users.push(userObject1);
    users.push(userObject2);

    $scope.users = users;
 	
}