如何在HTML表格中构造不规则形状？

Question

我正在尝试在HTML中复制下表： 但是有一些不规则形状的行，我想知道是否有一种简单的方法可以使用表格对它们进行编码，特别是周五学校游泳，以及周一至周四晚上的租赁。

我知道如何使用 colspan 和 rowspan ，但这些天在表格中是否存在某种网格设计技巧？

对于像上面这样的行和列，使用非正统形状对表进行编码的最佳方法是什么？

这是我到目前为止所建造的，但我不知道如何制作额外的不规则形状：

table,
th,
td,
tr {
  border: 2px solid #263333;
  border-collapse: collapse;
}
.schedule td {
  width: 16.6666666%;
  vertical-align: middle;
  text-align: center;
  padding: 0;
}
.schedule tr {
  height: 3em
}
.schedule tr {
  height: 3em
}
.schedule thead tr {
  height: 1em;
  color: #f2f5f7;
  background: #263333
}
.noborder {
  border: 0;
}

<table class="schedule">
  <thead>
    <tr>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
  </thead>
  <tbody>
    <tr>
      <td colspan=4 rowspan=2>
        <p>Early Bird Swim</p>
        <p>6:00am-8:30am</p>
        <td>Early Bird Swim
          <br>6:00am-7:30am</td>
        <td rowspan=2>Early Bird Swim
          <br>6:00am-8:30am</td>
    </tr>
    <tr>
      <td>Staff Meeting 7:30am-8:30am</td>
    </tr>
    <tr>
      <td colspan=4 rowspan=2>Cardston Schools 8:30am-3:00pm</td>
      <td>Cardston Schools 8:30am-12:00pm</td>
      <td>Rentals 10:00am-12:00pm</td>
    </tr>
    <tr>
      <td colspan=2>Lane Swim / Parent & Tot 12:00-1:00pm</td>
    </tr>
    <tr>
      <td colspan=4>Swim Club 3:15-5:00pm</td>
      <td colspan=2>Public Swim 1:00-5:00pm</td>
    </tr>
    <tr>
      <td colspan=6>Lane Swim 5:00-6:00pm</td>
    </tr>
    <tr>
      <td>Family 6-8:00pm</td>
      <td colspan=5>Public Swim 6:00pm-8:00pm</td>
    </tr>
    <tr>
      <td>Aqua Fit 8-9</td>
      <td></td>
      <td>Aqua Fit 8-9</td>
      <td></td>
      <td colspan=2>Rentals 8:00-10:00pm</td>
    </tr>
    <tr>
      <td colspan=4>Rentals Until 10:00pm</td>
      <td colspan=2>Rentals 9:00-10:00pm</td>
    </tr>
  </tbody>
</table>

Answer 1

您可以使用colspan和rowspan，但对于某些单元格，您需要为每个单元格定制CSS。您可以控制td单元每侧的厚度和颜色：

.some-class {
border-left: 1px solid #000000;
border-right: 0px solid #000000;
}

等，或简写：

border: 1px 1px 0px 1px solid #000;