Colspan для полустолбцов в нескольких строках

th {
  background: pink;
  margin: 3px;
}

<table>
  <tr>
    <th colspan = "2">Test</th>
    <th colspan = "2">Test</th>
    <th colspan = "2">Test</th>
    <th colspan = "2">Test</th>
  </tr>
  <tr>
    <th colspan = "5">Test</th>
    <th colspan = "3">Test</th>
  </tr>
  <tr>
    <th colspan = "3">Test</th>
    <th colspan = "5">Test</th>
  </tr>
</table>

.onepixelrow {
  height: 1px;
  overflow: hidden;
}

th {
  height: 1px;
  border: none;
}

<table>
  <tbody>
    <tr class = "onepixelrow">
      <th>&nbsp;</th>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
    </tr>
    <tr>
      <td colspan = "2">Test</td>
      <td colspan = "2">Test</td>
      <td colspan = "2">Test</td>
      <td colspan = "2">Test</td>
    </tr>
    <tr>
      <td colspan = "5">Test</td>
      <td colspan = "3">Test</td>
    </tr>
    <tr>
      <td colspan = "3">Test</td>
      <td colspan = "5">Test</td>
    </tr>
  </tbody>
</table>

*,::before,::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section {
  border: 2px solid hsl(300deg 85% 70% / 1);
  /* setting the inline-size of the element, the size of the
     element on the inline-axis (the axis upon which inline
     content is placed), using the clamp() function to
     set a minimum size of 30rem, a maximum size of 900px and
     a preferred size of 60%: */
  inline-size: clamp(30rem, 60%, 900px);
  /* setting a margin after the element, on the block axis (the
     axis perpendicular to the inline, on which blocks are laid
     out): */
  margin-block-end: 1rem;
  /* centering the element on the inline axis: */
  margin-inline: auto;
  /* setting all padding on the element: */
  padding: 0.25rem;
}

.grid {
  display: grid;
  /* defining eight columns, each of which is one
     fraction of the available space: */
  grid-template-columns: repeat(8, 1fr);
}

.flex {
  display: flex;
  /* setting both:
       flex-direction: row;
       flex-wrap: wrap;
     using the shorthand 'flex-flow' property */
  flex-flow: row wrap;
}

span {
  background-color: hsl(200deg 80% 70% / 1);
  block-size: 2rem;
  border: 1px solid #000;
  /* defining the base size of the <span> elements to be
     25% of the size of their parent: */
  flex-basis: 25%;
  /* allowing the <span> elements to grow to fill available
     space: */
  flex-grow: 1;
  /* setting all <span> elements to span two grid-columns: */
  grid-column: span 2;
  text-align: center;
}

span:nth-child(odd) {
  background-color: hsl(200deg 80% 70% / 0.5);
}

.hero {
  background-color: hsl(300deg 80% 70% / 0.5);
  /* preventing the .hero elements from expanding, forcing
     them to take their assigned size, and allowing sibling
     elements to expand to fill any space leftover (this
     is only for elements inside of a flex layout): */
  flex-grow: 0;
}

/* within the .grid parent, the .heroAdjacent elements
   will span 3 grid-columns: */
.grid .heroAdjacent {
  grid-column: span 3;
}

/* within the .grid parent the .hero elements will
   span 5 columns: */
.grid .hero {
  grid-column: span 5;
}

.flex .hero {
   /* within the .flex parent the .hero items will have a base
      size of 62.5%: */
  flex-basis: 62.5%;
}

<section class = "grid">
  <span>01</span>
  <span>02</span>
  <span>03</span>
  <span>04</span>
  <span class = "hero">05</span>
  <!-- unfortunately, I couldn't find a selector to reliably select
       the elements that are immediately before a ".hero" element,
       so I chose to use the ".heroAdjacent" class-name (though this
       is no more work than specifying colspan in the event of
       using a <table> -->
  <span class = "heroAdjacent">06</span>
  <span class = "heroAdjacent">07</span>
  <span class = "hero">08</span>
</section>

<section class = "flex">
  <span>01</span>
  <span>02</span>
  <span>03</span>
  <span>04</span>
  <span class = "hero">05</span>
  <span>06</span>
  <span>07</span>
  <span class = "hero">08</span>
</section>