CSS - 표의 스타일 지정

표의 스타일은 다음 표를 참고합니다.

속 성	설 명
caption-side	표의 제목 위치를 지정. top: <table>위에 제목을 위치. 기본 값 bottom: </table>밑에 제목을 위치.
width	표의 가로 크기
height	표의 세로 크기
border
border-collapse	<table>에 border 설정을 하면 두 줄의 테두리가 생기는데, 이것을 하나로 표시할지를 결정. separate: 두 줄로 표시. 기본 값 collapse: 한 줄로 표시.
border-spacing	셀 테두리 사이의 거리를 설정. px, cm 과 같은 단위로 지정하며 음수는 허용하지 않음. <가로> <세로> | <가로, 세로> 중 하나 하나의 값이 지정되면 <가로, 세로>로, 두 개의 값이 지정되면 <가로> <세로>로 지정됨. Ex.1) border-spacing: 20px; /* 가로, 세로 값을 20px 로 함 */ Ex.2) border-spacing: 10px 20px; /* 가로 10px, 세로 20px 로 설정 */
empty-cells	테이블의 내용이 없는 빈 셀의 테두리를 표시할지 지정. show: 테두리를 보임. 기본 값 hide:: 테두리를 감춤.
table-layout	입력한 내용을 표의 셀, 행, 열의 너비에 맞게 고정시킬지를 지정. auto: 내용에 따라 셀의 너비가 변함. fixed: 셀의 너비를 고정.

border-collapse 속성

두 줄의 테두리를 하나로 합침니다.

<style> 
table {
  border-collapse: collapse;
}
</style>

<table border="1">
  <tr>
    <td>제목 1</td>
    <td>제목 2</td>
  </tr>
  <tr>
    <td>내용</td>
  </tr>
</table>

empty-cells 속성

다음 표에서 내용이 없는 빈 셀의 테두리를 감춥니다.

<style>
table {
  empty-cells: hide;
}
</style>

<table border="1">
  <tr>
    <td>제목 1</td>
    <td>제목 2</td>
  </tr>
  <tr>
    <td>내용</td>
    <td></td>
  </tr>
</table>