coriolis/app/views/page-shipyard.html

<div id="shipyard">

  <div class="scroll-x">
    <table align="center"  style="font-size:0.85em;white-space:nowrap">
      <thead>
        <tr class="main">
          <th rowspan="2" class="sortable le" ng-click="sortShips('name')" translate="ship"></th>
          <th rowspan="2" class="sortable" ng-click="sortShips('manufacturer')" translate="manufacturer"></th>
          <th rowspan="2" class="sortable" ng-click="sortShips('class')" translate="size"></th>
          <th rowspan="2" class="sortable" ng-click="sortShips('agility')" translate="agility"></th>
          <th colspan="4" translate="base"></th>
          <th colspan="4" translate="max"></th>
          <th colspan="5" class="sortable" ng-click="sortShips('hpCount')" translate="hardpoints"></th>
          <th colspan="8" class="sortable" ng-click="sortShips('intCount')" translate="internal compartments"></th>
          <th rowspan="2" class="sortable" ng-click="sortShips('hullMass')" translate="hull"></th>
          <th rowspan="2" class="sortable" ng-click="sortShips('masslock')" translate="MLF"></th>
          <th rowspan="2" class="sortable" ng-click="sortShips('retailCost')" translate="cost"></th>
        </tr>
        <tr>
          <!-- Base -->
          <th class="sortable lft" ng-click="sortShips('speed')" translate="speed"></th>
          <th class="sortable" ng-click="sortShips('boost')" translate="boost"></th>
          <th class="sortable" ng-click="sortShips('baseArmour')" translate="armour"></th>
          <th class="sortable" ng-click="sortShips('baseShieldStrength')" translate="shields"></th>
          <!-- Max -->
          <th class="sortable lft" ng-click="sortShips('topSpeed')" translate="speed"></th>
          <th class="sortable " ng-click="sortShips('topBoost')" translate="boost"></th>
          <th class="sortable " ng-click="sortShips('maxJumpRange')" translate="jump"></th>
          <th class="sortable" ng-click="sortShips('maxCargo')" translate="cargo"></th>
          <!-- Hardpoints -->
          <th class="sortable lft" ng-click="sortShips('hp[1]')" translate="S"></th>
          <th class="sortable" ng-click="sortShips('hp[2]')" translate="M"></th>
          <th class="sortable" ng-click="sortShips('hp[3]')" translate="L"></th>
          <th class="sortable" ng-click="sortShips('hp[4]')" translate="H"></th>
          <th class="sortable" ng-click="sortShips('hp[0]')" translate="U"></th>
          <!-- Internal -->
          <th class="sortable lft" ng-click="sortShips('int[0]')" translate="1"></th>
          <th class="sortable" ng-click="sortShips('int[1]')" translate="2"></th>
          <th class="sortable" ng-click="sortShips('int[2]')" translate="3"></th>
          <th class="sortable" ng-click="sortShips('int[3]')" translate="4"></th>
          <th class="sortable" ng-click="sortShips('int[4]')" translate="5"></th>
          <th class="sortable" ng-click="sortShips('int[5]')" translate="6"></th>
          <th class="sortable" ng-click="sortShips('int[6]')" translate="7"></th>
          <th class="sortable" ng-click="sortShips('int[7]')" translate="8"></th>
        </tr>
      </thead>
      <tbody>
        <tr class="highlight" ng-repeat="s in shipsOverview | orderBy:shipPredicate:shipDesc">
          <td class="le"><a ui-sref="outfit({shipId: s.id})" ng-bind="s.name"></a></td>
          <td class="le" ng-bind="s.manufacturer"></td>
          <!-- Pad Size -->
          <td class="cap" ng-bind="SZM[s.class] | translate"></td>
          <td class="ri" ng-bind="s.agility"></td>
          <!-- Base -->
          <td class="ri">{{fCrd(s.speed)}} <u translate>m/s</u></td>
          <td class="ri">{{fCrd(s.boost)}} <u translate>m/s</u></td>
          <td class="ri" ng-bind="s.baseArmour"></td>
          <td class="ri">{{fCrd(s.baseShieldStrength)}} <u translate>Mj</u></td>
          <!-- Max -->
          <td class="ri">{{fCrd(s.topSpeed)}} <u translate>m/s</u></td>
          <td class="ri">{{fCrd(s.topBoost)}} <u translate>m/s</u></td>
          <td class="ri">{{fRound(s.maxJumpRange)}} <u translate>LY</u></td>
          <td class="ri">{{fCrd(s.maxCargo)}} <u translate>T</u></td>
          <!-- Hardpoints -->
          <td ng-bind="s.hp[1]" ng-class="{disabled: !s.hp[1]}"></td>
          <td ng-bind="s.hp[2]" ng-class="{disabled: !s.hp[2]}"></td>
          <td ng-bind="s.hp[3]" ng-class="{disabled: !s.hp[3]}"></td>
          <td ng-bind="s.hp[4]" ng-class="{disabled: !s.hp[4]}"></td>
          <td ng-bind="s.hp[0]" ng-class="{disabled: !s.hp[0]}"></td>
          <!-- Internal -->
          <td ng-bind="s.int[0]" ng-class="{disabled: !s.int[0]}"></td>
          <td ng-bind="s.int[1]" ng-class="{disabled: !s.int[1]}"></td>
          <td ng-bind="s.int[2]" ng-class="{disabled: !s.int[2]}"></td>
          <td ng-bind="s.int[3]" ng-class="{disabled: !s.int[3]}"></td>
          <td ng-bind="s.int[4]" ng-class="{disabled: !s.int[4]}"></td>
          <td ng-bind="s.int[5]" ng-class="{disabled: !s.int[5]}"></td>
          <td ng-bind="s.int[6]" ng-class="{disabled: !s.int[6]}"></td>
          <td ng-bind="s.int[7]" ng-class="{disabled: !s.int[7]}"></td>
          <!-- Other Stats -->
          <td class="ri">{{fCrd(s.hullMass)}} <u translate>T</u></td>
          <td class="ri" ng-bind="s.masslock"></td>
          <td class="ri">{{fCrd(s.retailCost)}} <u translate>CR</u></td>
        </tr>
      </tbody>
    </table>
  </div>


</div>