[HTML] Table 만들기, 간격 없애기

HTML table 만들기입니다.

table, caption, thead, tr, th, tbody, td, scope, rowgroup 등으로 구성...

우선 결과물부터 먼저 보면 다음과 같습니다.

 

 

셀과 셀의 간격이 없이 하나의 선으로 구분되어 있는 것을 볼 수 있는데요.

CSS를 이용해 이처럼 테이블 간격을 제거하는 방법도 알아보기로 하겠습니다.

 

위 결과물에 대한 예제는 아래와 같습니다.

 

<table>

<caption>Caption </caption>

 

<thead>

<tr><th>01 </th><th>02</th><th>03</th><th>04</th> </tr>

</thead>

 

<tbody>

<tr>

<td>05 </td>

<th scope=" rowgroup">06</th>

<td>07</td>

<td>08</td>

</tr>

<tr>

<td>09</td>

<th>10</th>

<td>11</td>

<td>12</td>

</tr>

<tr>

<td>13</td>

<th>14</th>

<td>15</td>

<td>16</td>

</tr>

</tbody>

 

<tbody>

<tr>

<td>17</td>

<th scope="rowgroup">18</th>

<td>19</td>

<td>20</td>

</tr>

<tr>

<td>21</td>

<th>22</th>

<td>23</td>

<td>24</td>

</tr>

<tr>

<td>25</td>

<th>26</th>

<td>27</td>

<td>28</td>

</tr>

</tbody>

 

</table>

 

위 예제에 사용된 CSS입니다.

 

table{border:1px solid gray; border-collapse: collapse; border-spacing: 0}

table caption{background-color:#d0d0d0;margin:10px 0;border:1px solid gray}

table thead{background-color:#d0d0d0}

table td,th{border:1px solid gray;padding:3px 20px;}

 

테이블 간격을 없애는 방법은 table의 속성에 'border-collapse:collapse'과 'border-spacing:0'를 넣어주면 됩니다.

border-collapse:collapse 있을 경우 border-spacing 안 먹힘.

테이블 간격을 만들고 싶으면 'border-collapse:collapse' 항목 제거.

 

예를 들어, 간격이 가로 5px, 세로 10px인 표를 만들고자 할 경우..

border-spacing: 5px 10px;

이렇게 사용하면 됩니다.

상하좌우의 의미가 아니고 서로 간의 간격이 가로로 5px씩 벌어지고, 세로로 10px씩 벌어진다는 의미입니다.