
  <style>
    .statetable { border-collapse: collapse; }
    .statetable td { border: 1px solid black; padding: 2px 10px 2px 10px; white-space: nowrap; }
    .statetable .state-header, .statetable .event-header { font-weight: bold; background-color: #ecf0f1; border: 2px solid black; }
    .statetable .derived { font-style: italic; }
    .statetable-container { overflow-x: auto; }
  </style>
  
  <h1>State tables generated by Umple from simple.ump</h1>
  <h2>Class Student state machine status</h2>

<h3>State-event table</h3>
<div class="statetable-container">
  <table class="statetable event-statetable">
    <tr>
      <td class="event-header">&nbsp;</td>
      <td class="event-header">power</td>
    </tr>

    <tr>
      <td class="state-header" data-parent="">On</td>
      <td class="event-entry"><span>Off</span></td>
    </tr>

    <tr>
      <td class="state-header" data-parent="">Off</td>
      <td class="event-entry"><span>On</span></td>
    </tr>

  </table>
</div>

<h3>State-state table</h3>
<div class="statetable-container">
  <table class="statetable state-statetable">
    <tr>
      <td class="state-header">&nbsp;</td>
      <td class="state-header">On</td>
      <td class="state-header">Off</td>
    </tr>

    <tr>
      <td class="state-header" data-parent="">On</td>
      <td class="state-entry">&nbsp;</td>
      <td class="state-entry"><span>power</span></td>
    </tr>

    <tr>
      <td class="state-header" data-parent="">Off</td>
      <td class="state-entry"><span>power</span></td>
      <td class="state-entry">&nbsp;</td>
    </tr>

  </table>
</div>

