일련의 테이블을 디자인하는 데 어려움이 있습니다

Question

테이블 아래에 첨부 된 이미지입니다.

누구나 html과 css를 통해 나를 만들 수 있습니까? 나는 한두 시간 정도 노력했다. 나는 각 테이블 주위에 별도의 테두리를 얻을 수 없습니다. 간격뿐만 아니라 거의 모든 문제가 생겨서 CSS는 모르지만 강사가 사용해보기로했습니다.

Tables I'm having trouble with

td { "background-color: #D3D3D3; 
 
    } 
 
table { 
 
    border:1 px; solid #D3D3D3; 
 
}

<table> 
 
<tr> 
 
<td> Short title: </td> 
 
<td> Data Driven Apps I </td> 
 
</tr> 
 
</table>

Answer 1

당신은 국경 간격과 국경 붕괴와 스타일을 달성하고 열 병합

데모에 열을 가입 할 수 있습니다 : http://codepen.io/anon/pen/ZBEZNb

CSS :

table { 
    border-spacing:0 10px; 
    border-collapse:separate; 
} 

td { 
    padding:2px 10px; 
    border-top:1px solid #ddd; 
    border-bottom:1px solid #ddd; 
} 

td.gray { 
    background:#ddd 
} 

td:last-child { 
    border-right:1px solid #ddd; 
} 

HTML :

<table> 
    <tr> 
    <td class="gray">Short Title</td> 
    <td colspan="2">Data Driven Apps 1</td> 
    <td colspan="3"></td> 
    </tr> 
    <tr> 
    <td class="gray">Full Title</td> 
    <td colspan="2">Data Driven Apps 1</td> 
    <td colspan="3"></td> 
    </tr> 
    <tr> 
    <td class="gray">Attendance</td> 
    <td>N/A</td> 
    <td></td> 
    <td class="gray">Discipline</td> 
    <td colspan="2">Databases</td> 
    </tr> 
    <tr> 
    <td class="gray">Coordinator</td> 
    <td>Gerry</td> 
    <td></td> 
    <td class="gray">Department</td> 
    <td colspan="2">Information Technology</td> 
    </tr> 
    <tr> 
    <td class="gray">Official Code</td> 
    <td>GATB</td> 
    <td class="gray">NFQ Level</td> 
    <td>08</td> 
    <td class="gray">ECTS Credit</td> 
    <td>05</td> 
    </tr> 
</table>