HTML 표에 불규칙한 모양을 만드는 방법은 무엇입니까?

Question

아래 표를 HTML로 복제하려고합니다 : 하지만 테이블을 사용하여 코드를 작성하는 쉬운 방법이 있다면 궁금합니다. 특히 금요일 학교에서 수영하는 것이 좋습니다. 월요일부터 목요일까지 저녁 시간에 대여료를 지불합니다.

나는 열 병합 및 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

당신은 열 병합과 ROWSPAN을 사용할 수 있지만 특정를 들어 셀을 만들려면 각 셀에 맞춤 CSS가 필요합니다.

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

등 또는 속기 : 이것은 모든 열 결합 및/또는 다수의 테이블을 사용하여 달성 될 수

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