将表格单元格与ul li一起组合在html中？

如何解决将表格单元格与ul li一起组合在html中？

我想做这样的事情，但是没有html的tr th属性，因为我的表仅使用ul和li属性

+-----------------------+
|   one joint column    |
+-----------------------+
|  5  |  6  |   joint   | 
+-----------------------+
|  9  |  10 |  11 | 12  |
+-----------------------+ 

预先感谢

更新

这是我的代码段：

<li class="cell"> 1min
    <div ng-repeat="load1min in cpu.data1mnList | orderBy:'idEquipment'">
        <span class="bolded_span">
            {{(load1min.value).toFixed(3)}}
        </span>

    </div>
</li>
<li class="cell"> 5min
    <div ng-repeat="load5min in cpu.data5mnList  | orderBy:'idEquipment'">
        <span class="bolded_span">
            {{(load5min.value).toFixed(3)}}
        </span>
    </div>

</li>
<li class="cell"> 15min
    <div ng-repeat="load15min in cpu.data15mnList  | orderBy:'idEquipment'">
        <span class="bolded_span">
            {{(load15min.value).toFixed(3)}}
        </span>
    </div>
</li> 

我想对这3个单元格进行分组，并在其上方放置一个标题

解决方法

使用CSS flex

.flex {
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
}

.flex > * { flex-basis: 100%; }
.span-1 { flex-basis: 25%; }
.span-2 { flex-basis: 50%; }

li { background: gold; }

<ul class="flex">
  <li>one joint column</li>
  <li class="span-1">5</li>
  <li class="span-1">6</li>
  <li class="span-2">joint</li>
  <li class="span-1">9</li>
  <li class="span-1">10</li>
  <li class="span-1">11</li>
  <li class="span-1">12</li>
</ul>

另一种方式：

.flex {
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
}

.flex > * { flex-basis: 25%; }
.span-2 { flex-basis: 50%; }
.span-4 { flex-basis: 100%; }

.flex li { background: gold;}

<ul class="flex">
  <li class="span-4">one joint column</li>
  <li>5</li>
  <li>6</li>
  <li class="span-2">joint</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>