JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tab">
    <tr id="head"></tr>
</table>

CSS

table {
    border-collapse: collapse;
    border: 1px solid black;
}

table, th, td {
    border: 1px solid black;
}

.rotate {
  transform: rotate(-90deg);
  font-size:150%;
  font-weight:bold;
}

JavaScript

var maxLessons = 8,
    maxClasses = 9,
    parallelClasses = 2,
    days = 2;

function className( number )
{
    return ( 
             ( 
               Math.floor( number / parallelClasses ) + 1                
             ).toString()
             + " - "
             + String.fromCharCode( "А".charCodeAt(0) 
                                     + ( number % parallelClasses )
                                  )
           );
}

var dayOfWeek = [ "Понеділок","Вівторок" ];

var activity = [ "Математ", "Музика", "Навч.грам" ];

$( '#head' ).append( '<th></th><th></th>' );
for( var clas = 0; clas < maxClasses; ++clas )
    $( '#head' ).append( '<th>' + className( clas ) + '</th>' );

function dayActivities( day )
{
  var result = '<tr><td class = "rotate" rowspan="'
                 + (maxLessons+1) 
               + '">' 
               + dayOfWeek[ day ] 
               + '</td>';
  for( var lesson = 0; lesson < maxLessons; ++lesson )
  {
      result += '<tr><td>' + lesson + '</td>';
      for( var clas = 0; clas < maxClasses; ++clas )
        result += '<td>' 
                 + activity[ Math.floor(
                               Math.random() * activity.length
                                       )
                           ] 
                 + '</td>';
      result += '</tr>';
  }
  result += '</tr>';
  return result;
}

for( var dayNumber = 0; dayNumber < days; ++dayNumber )
  $('#tab').append( dayActivities( dayNumber ) );