如何構建HTML表格中的不規則形狀？

Question

我試圖複製下面的表格中HTML： 但也有一些額外的，形狀不規則行，我想知道如果有一個簡單的方法使用表來編寫他們，尤其是游泳學校上週五，以及星期一至星期四晚上的租金。

我知道如何使用列跨度和行跨度但有某種表格，這些天格設計的招？

什麼是代碼非正統形狀的行和列像上面的表的最佳方法？

這是我到目前爲止已經建成，但我不知道如何使多餘的不規則形狀：

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

您可以使用列跨度和行跨度，但對於某些單元格，你需要爲每個單元格定製CSS。可以控制TD細胞的每一側的厚度和顏色：

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

等，或者在速記：

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