span은 확장하다는 의미이다.
rowspan
rowspan은 행(row)을 확장하는 것으로, 시각적으로 세로 방향으로 셀을 합친다.
rowspan="3" | table data1 |
table data2 | |
table data3 |
<코드>
<body>
<table>
<tr>
<th rowspan="3">소재</th>
<td> 블록코딩</td>
<tr>
<td> 텍스트코딩</td>
</tr>
<tr>
<td> 프로그램 개발</td>
</tr>
</tr>
</table>
<실제 화면>
colspan
colspan은 열(column)을 확장하는 것으로, 시각적으로 가로 방향으로 셀을 합친다.
colspan="2" | |
th | th |
td | td |
td | td |
<코드>
<table>
<thead>
<tr>
<th colspan="2">우리반</th>
</tr>
<tr>
<th>남학생</th>
<th>여학생</th>
</tr>
</thead>
<tbody>
<tr>
<td>예(50%)</td>
<td>아니오(50%)</td>
</tr>
<tr>
<td>예(40%)</td>
<td>아니오(60%)</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">합계(100%)</td>
</tr>
</tfoot>
</table>
<실제화면>
cellspacing
셀 앞에 여백 공간을 둔다.
<코드>
<table cellspacing="20">
<thead>
<tr>
<th colspan="2">우리반</th>
</tr>
<tr>
<th>남학생</th>
<th>여학생</th>
</tr>
</thead>
<tbody>
<tr>
<td>예(50%)</td>
<td>아니오(50%)</td>
</tr>
<tr>
<td>예(40%)</td>
<td>아니오(60%)</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">합계(100%)</td>
</tr>
</tfoot>
</table>
<실제 화면>