一連のテーブルの設計に問題があります

Question

テーブルは下の画像に添付されています。

誰もがこれを作成するためにHTMLとCSSで私を助けることができますか？私は約1時間か2時間挑戦してきました。私は各テーブルの周りに別の境界線を得ることができません。間隔だけでなく、私が問題を抱えているすべてのものは、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

あなたはボーダー間隔とボーダー崩壊とスタイリングを実現し、COLSPAN

デモの列を結合することができます：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>