[HTML/CSS] 테이블 테두리 한줄만 나오도록 하기

 

기본 테이블 그리기

HTML에 아무런 스타일을 지정하지 않고, 

<table><tr><td><th> 태그만 사용해서 테이블을 그리면

테두리가 표시되지 않습니다.

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

 

 

 

 

테이블에 테두리 표시하기

테이블의 테두리를 표시하기 위해서 HTML과 CSS의 border 속성을 사용할 수 있습니다.

 HTML의 border 속성 

<table border='1'>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

 

<table> 태그에 border 속성값을 1로 지정하였습니다.

 

 

 CSS의 border 속성 

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
};

 

CSS의 border 속성을 '1px solid black'으로 정의하였습니다.

이때, table, td, th 속성에 border 속성을 정의하였습니다.

이렇게 하면 테이블의 테두리는 2줄이 생기는데,

table에도 border가 있고,

각각의 tr, th에도 border 속성이 있기 때문입니다.

 

 

테이블 테두리 한줄만 나오도록 하기

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
};

 

두 줄로 나오는 테이블의 테두리를 한 줄로 만들기 위해서

CSS에 'border-collapse' 속성 값을 'collapse'로 지정하였습니다.

'border-callpase' 속성은 테두리를 분리할지, 한줄로 합칠지를 결정합니다.

border-collapse
 - collapse : border를 한 줄로 합칩니다.
 - separate : border를 분리한채로 유지합니다.

 

---

 

HTML 테이블의 테두리를 생성하는 법, 테두리를 한줄로 바꾸는 법을 알아보았습니다.