display 를 이용하여 작성을 합니다.
<style>
#tables {display: table; width: 100%;} 디스플레이 테이블을 적용시켜준다
.row {display: table-row;} 디스플레이 row(세로)를 적용시켜준다
.cell {display: table-cell;} 디스플레이 cell(가로)를 적용시켜준다
</style>
<div id="tables" style="text-align:center;">
<div id="tables" style="text-align:center;">
<div class="row">
<span class="cell" style="width:5%;">
Q
</span>
<span class="cell" style="width:5%;">
1
</span>
<span class="cell" style="width:10%;">
2
</span>
<span class="cell" style="width:auto;">
3
</span>
<span class="cell" style="width:5%;">
4
</span>
</div>
<div class="row">
<span class="cell" style="width:5%;">
W
</span>
<span class="cell" style="width:5%;">
1
</span>
<span class="cell" style="width:10%;">
2
</span>
<span class="cell" style="width:auto;">
3
</span>
<span class="cell" style="width:5%;">
4
</span>
</div>
</div>
</div>
를 작성해보자.
그럼 표가 생성될텐데
이 것을 응용해서 적으면 표를 완성시킬수 있다.