table css border

CSS에서 경계 속성은 <table> element와 셀 주위에 경계를 추가하는 데 사용될 수 있다.
테이블에 테두리를 추가하려면 <table> element의 테두리 속성을 사용할 수 있다.

 

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

table {
    border: 1px solid black;
}

이렇게 하면 전체 테이블 주위에 1픽셀 너비의 검은색 solid 테두리가 추가된다.

또한 테두리 축소 속성을 사용하여 테이블의 셀 주위에 테두리가 표시되는 방식을 제어할 수 있다.

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

이렇게 하면 셀 사이의 경계가 접히고 전체 테이블 주위에 단일 경계가 만들어진다.

테이블의 특정 셀 또는 행에 테두리를 추가하려면 <td> 또는  element에서 테두리 속성을 사용할 수 있다.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

 

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

이렇게 하면 모든 <td> 및  element 주위에 1픽셀 너비의 검은색 solid 테두리가 추가된다.

테두리 너비 특성을 사용하여 테두리 너비를 설정할 수도 있다

td, th { border: 1px solid black; border-width: 5px; }

이렇게 하면 모든 <td> 및  element 주위에 5픽셀 너비의 검은색 solid 테두리가 추가된다.