7. 표 스타일

 

1. caption-side
2. border
3. border-spacing
4. border-collapse

 

표 제목 위치 (caption-side)

• top: 제목을 표 위에 표시. 기본값
• bottom: 제목을 표 아래에 표시

 

표 테두리 (border)

표의 바깥 테두리와 셀 테두리 각각 지정.

 

- 활용 코드

  table {
         border: 2px solid #000;     /* 표 테두리에 검음색 실선 표시 */
     }
     
     th, td {
         border: 2px dotted #000;    /* 셀 테두리에 검은색 점선 표시 */
         padding: 10px;                /* 설 테두리와 내용 사이에 여백 지정 */
         text-align: center;           /* 셀 내용을 가운데 정렬 */ 
     }

 

 

셀 사이 여백 (border-spacing)

셀의 수평 거리의 값과 수직 거리의 값을 공백으로 구별해서 나타낸다.

이때 두 값이 같으면 1개만 지정해도 된다.

border-spacing: 수평거리 수직거리

 

- 활용 코드

<style>
     table {
         border: 2px solid #000;     /* 표 테두리에 검음색 실선 표시 */
         border-spacing: 20px 10px;    /* 셀 사이 여백 지정 */
     }
     
     th, td {
         border: 2px dotted #000;    /* 셀 테두리에 검은색 점선 표시 */
         padding: 10px;                /* 설 테두리와 내용 사이에 여백 지정 */
         text-align: center;           /* 셀 내용을 가운데 정렬 */ 
     }
 </style>

 

 

테두리 합병 (border-collapse)

• collapse: 표와 셀의 테두리를 합쳐 한 줄로 표시
• separate: 기본값. 표와 셀의 테두리를 따로 표시

- 활용 코드

<style>
     table {
         border: 2px solid #000;     /* 표 테두리에 검은색 실선 표시 */
         border-spacing: 20px 10px;    /* 셀 사이 여백 지정 */
         border-collapse: collapse;    /* 표 테두리를 한 줄에 표시 */
     }
     
     th, td {
         border: 1px dotted #000;    /* 셀 테두리에 검은색 점선 표시 */
         padding: 10px;                /* 설 테두리와 내용 사이에 여백 지정 */
         text-align: center;           /* 셀 내용을 가운데 정렬 */ 
     }
 </style>