Elementary school level knockout practice

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="outer" data-bind="foreach: { data: MyArray.slice(1), as: 'outer'}">
      <div class="inner">
        <h2 data-bind="text: outer"></h2>
        <ul data-bind="foreach: { data: $parent.MyArray, as: 'inner'}">
          <li data-bind="text: outer + ' x ' + inner + ' = ' + (outer * inner)"></li>
        </ul>
      </div>
    </div>
  </body>

  <script data-require="knockout@2.3.0" data-semver="2.3.0" src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
  <script src="script.js"></script>
  
</html>

ko.applyBindings({ MyArray: [1,2,3,4,5,6,7,8,9] });

.outer {
  overflow: hidden;
}
.inner {
  position: relative;
  float: left;
  font: 9px consolas;
  background: rgba(255, 255, 245, 1);
  border: solid 1px #eee;
  padding: 0;
  margin: 10px;  
  box-shadow: 2px 2px 10px #aaa;
  border-radius: 0 10px 0 0;
}
.inner h2 {
  position: absolute;
  right: -1px;
  top: -12px;
  padding: 5px 15px;
  background: rgba(255, 100, 255, .5);
  border-radius: 0 10px 0 10px;
  font-style: italic;
}
.inner ul {
  list-style: none;
  padding: 0;
  margin: 30px 15px 10px 15px;
}