Wie konstruieren Sie unregelmäßige Formen in HTML-Tabellen?

Question

Ich versuche, die folgende Tabelle in HTML zu duplizieren: Aber es gibt ein paar extra unregelmäßige geformte Zeilen, die ich frage mich, ob es eine einfache Möglichkeit gibt, sie mit Tabellen zu kodieren, besonders die Schulen schwimmen am Freitag, und die Vermietung am Abend von Montag bis Donnerstag.

Ich weiß, wie colspan und rowspan zu verwenden, aber ist es eine Art in diesen Tagen in den Tabellen Design Trick Gitter?

Wie kann man eine Tabelle mit unorthodoxen Formen für Zeilen und Spalten wie oben beschreiben?

Hier ist, was ich bisher gebaut habe, aber ich weiß nicht, wie die zusätzliche unregelmäßigen Formen zu machen:

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

Sie colspan und rowspan verwenden können, aber für bestimmte Zellen benötigen Sie benutzerdefinierte CSS für jede Zelle. Sie können die Dicke und Farbe jeder Seite der Zelle td steuern:

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

usw. oder in Kurzschrift:

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