[HTML/CSS] 테이블 테두리 색상 지정하기

 

 

border-color

table/tr/td 태그에 border-color 속성을 이용하여

테이블의 테두리 색상을 지정할 수 있습니다.

 

border

border는 테두리의 너비, 스타일, 색상을 지정할 수 있는 단축 속성입니다.

border 속성 안에 다음과 같은 속성을 한번에 지정할 수 있습니다.

• border-width
• border-style
• border-color

border 속성으로 border-color로 지정할 수 있으므로,

border 속성을 이용해도 테이블의 테두리 색상을 변경할 수 있습니다.

 

 

  border-color 속성 사용해서 테두리 생상 지정하기  

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Tina</td>
    <td>22</td>
  </tr>
</table>
  

table, td, th {
  border-width: 1px;
  border-style: solid;
  border-color: red;
  border-collapse : collapse;
};

border-width: 1px;

테두리의 두께를 지정합니다.

 

border-style: solid;

테두리가 실선으로 나오도록 합니다.

 

border-color: red;

테두리의 색상을 지정합니다.

 

border-collapse: collapse;

테이블셀의 테두리들이 합쳐져서 하나의 선으로 보이도록합니다.

자세한 설명은, 아래의 포스팅을 참조하세요.

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

 

 

 

  border 속성 사용해서 테두리 색상 지정하기  

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Tina</td>
    <td>22</td>
  </tr>
</table>
  

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

border-color를 사용한 이전의 예제와 동일한 내용입니다.

 

border: 1px solid red;

border 단축 속성을 이용하여,

border-width, border-style, border-color 속성을 한번에 정의하였습니다.