HTML rowspan half a row

Question

I am doing schedule in HTML, I already have a cell for every hour and day of the week (like a cell for monday 15:00 - 16:00, 16:00 - 17:00) but i came across a problem - what if I would want to schedule something that starts at 15:00 and ends on 16:30?

Idea I found is to mark every row with rowspan="2"(and those that takes 1.5hour will have rowspan="3") but there comes a problem that every odd cell is placed on right side of the table:

Code looks somewhat like that:

    h2 {
      font-size:1em; 
      font-weight: 300;
      text-align: center;
      display: block;
      line-height:1em;
      padding-bottom: 2em;
      color: #FB667A;
    }

    h2 a {
      font-weight: 700;
      text-transform: uppercase;
      color: #FB667A;
      text-decoration: none;
    }
    
    .taken {
        background-color:#ff0000;
    }

    .container th h1 {
      line-height:1em;
      font-weight: bold;
      font-size: 1em;
      text-align: left;
    }

    .container td {
          font-weight: normal;
          font-size: 1em;
      -webkit-box-shadow: 0 2px 2px -2px #0E1119;
           -moz-box-shadow: 0 2px 2px -2px #0E1119;
                box-shadow: 0 2px 2px -2px #0E1119;
    }

    .container {
          text-align: left;
          overflow: hidden;
          width: 80%;
          margin: 0 auto;
      display: table;
      padding: 0 0 8em 0;
    }

    .container td, .container th {
          padding-bottom: 2%;
          padding-top: 2%;
      padding-left:2%;  
    }

    /* Background-color of the odd rows */
    .container tr:nth-child(odd) {
          background-color: #818181;
    }

    /* Background-color of the even rows */
    .container tr:nth-child(even) {
          background-color: #5f5f5f;
    }

    .container th {
          background-color: #323232;
    }

    .container tr:hover {
       background-color: #669999;
    -webkit-box-shadow: 0 6px 6px -6px #0E1119;
           -moz-box-shadow: 0 6px 6px -6px #0E1119;
                box-shadow: 0 6px 6px -6px #0E1119;
    }

    .container td:hover {
      background-color: #FFF842;
      color: #403E10;
      font-weight: bold;
  
      box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
      transform: translate3d(6px, -6px, 0);
  
      transition-delay: 0s;
          transition-duration: 0.4s;
          transition-property: all;
      transition-timing-function: ease;
    }

    @media (max-width: 800px) {
    .container td:nth-child(4),
    .container th:nth-child(4) { display: none; }
    }
    body, h1, h2, h3, h4, h5, h6 {
        font-family: "Raleway", sans-serif
    }

    body, html {
        height: 100%;
        line-height: 1.8;
    }

    /* Full height image header */
    .bgimg-1 {
        background-position: center;
        background-size: cover;
        background-image: url("./photos/main2.jpg");
        min-height: 100%;
    }

    .w3-bar .w3-button {
        padding: 16px;
    }

<table class="container">
                <thead>
                    <tr>
                        <th><h1></h1></th>
                        <th><h1>Poniedziałek</h1></th>
                        <th><h1>Wtorek</h1></th>
                        <th><h1>Środa</h1></th>
                        <th><h1>Czwartek</h1></th>
                        <th><h1>Piątek</h1></th>
                        <th><h1>Sobota</h1></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th rowspan="2"><h1>15:00-16:00</h1></th>
                        <td rowspan="2">25:00-26:30</td>
                        <td rowspan="2">2242</td>
                        <td rowspan="2">9528</td>
                        <td rowspan="2">9528</td>
                        <td rowspan="2">6369</td>
                        <td rowspan="2" class="taken">25:00-26:00</td>
                    </tr>
                    <tr>
                        <th rowspan="2"><h1>16:00-17:00</h1></th>
                        <td rowspan="2">16:30-18:00</td>
                        <td rowspan="2">1714</td>
                        <td rowspan="2">01:31:50</td>
                        <td rowspan="2">9518</td>
                        <td rowspan="2">6369</td>
                        <td rowspan="2">01:31:50</td>
                    </tr>
                    <tr>
                        <th rowspan="2"><h1>17:00-18:00</h1></th>
                        <td rowspan="2">10437</td>
                        <td rowspan="2">00:51:11</td>
                        <td rowspan="2">9518</td>
                        <td rowspan="2">6369</td>
                        <td rowspan="2">01:31:50</td>
                        <td rowspan="2">01:31:50</td>
                    </tr>
                    <tr>
                        <th rowspan="2"><h1>18:00-19:00</h1></th>
                        <td rowspan="2">4161</td>
                        <td rowspan="2" class="taken">18:00-19:00</td>
                        <td rowspan="2">00:14:34</td>
                        <td rowspan="2">9518</td>
                        <td rowspan="2">6369</td>
                        <td rowspan="2">01:31:50</td>
                    </tr>
                    <tr>
                        <th rowspan="2"><h1>19:00-10:00</h1></th>
                        <td rowspan="2">3654</td>
                        <td rowspan="2">1961</td>
                        <td rowspan="2">00:11:10</td>
                        <td rowspan="2">9518</td>
                        <td rowspan="2">6369</td>
                        <td rowspan="2">01:31:50</td>
                    </tr>
                    <tr>
                        <th rowspan="2"><h1>10:00-11:00</h1></th>
                        <td rowspan="2">1001</td>
                        <td rowspan="2">4135</td>
                        <td rowspan="2">00:46:19</td>
                        <td rowspan="2">9518</td>
                        <td rowspan="2">6369</td>
                        <td rowspan="2">01:31:50</td>
                    </tr>
                </tbody>
            </table>

Answer 1

The CSS isn’t that important here, the main problem is the fact that the table structure you are creating is “faulty”.

If you put a table cell with rowspan="2" into one row, then there needs to be a “hole” in that place, in the next row - the corresponding table cell would have to be left out, otherwise, what space should that cell from the previous row “span into”?

And if all your cells from one row have rowspan="2", then you need a completely empty row next, <tr></tr>.