개발 공부 기록하기

DAY 11. 표 관련 스타일(2): border-spacing, border-collapse 본문

프밍/CSS

DAY 11. 표 관련 스타일(2): border-spacing, border-collapse

태영(泰伶) 2022. 11. 6. 00:02

1. border-spacing: 테두리 간의 간격 조절

           * space: (사물들 사이에 일정한) 간격을 두다

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

 

     표 테두리와 셀 테두리, 셀 테두리 간의 간격을 조절해주는 속성.

   

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>border-spacing</title>
         <style>
            table, td {
              border: 1px solid black;
              border-spacing: 30px 20px;
              padding: 10px;
            }
         </style>
      </head>
      <body>
         <table>
            <tbody>
              <tr>
                <td>1행 1열</td>
                <td>1행 2열</td>
              </tr>
              <tr>
                <td>2행 1열</td>
                <td>2행 2열</td>
              </tr>
            </tbody>
         </table>
      </body>
   </html>

↓

 

 

     cf 1, 참고로 셀 테두리와 셀 안의 내용 간의 간격을 조정하는 건 padding이다.

 

 

     cf 2, 테두리 간에 벌리고 싶은 수평거리와 수직거리가 같을 경우에는, 하나만 써도 된다.

 

     cf 3, border-spacing은 아래쪽의 border-collapse와 같이 사용할 수 없다.

 

 

 

 

 

 

 

 

2. border-collapse: 표 테두리와 셀 테두리 합체!

           * collapse: (경계 등이) 허물어지다

     border-collapse: seperate | collapse ;

속성값 설명
seperate 표 테두리와 셀 테두리를 따로 표시. default 값.
collapse 표 테두리와 셀 테두리를 합쳐서 하나로 표시.

 

 

예제.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>border-spacing</title>
         <style>
            table {
              caption-side: bottom;			/* 표 캡션 위치는 아래로 */
              border: 1px solid black;		/* 표 테두리는 검은색 실선으로 */
              border-collapse: collapse;	/* 표와 셀의 테두리를 한 줄로 표시 */
              padding: 10px;
            }
            td, th {
              border: 1px dotted black;		/* 셀 테두리는 검은색 점선으로 */
              padding: 10px;				/*셀 테두리와 내용 사이의 여백 지정*/
              text-align: center;			/* 셀 내용 가운데 정렬 */
            }
         </style>
      </head>
      <body>
         <h2>상품 구성</h2>
         <table>
            <caption>선물용과 가정용 상품 구성</caption>
            <thead>
                <td>용도</td>
                <td>중량</td>
                <td>개수</td>
                <td>가격</td>
            </thead>
            <tbody>
              <tr>
                <td rowspan="2">선물용</td>
                <td>3kg</td>
                <td>11~16과</td>
                <td>35,000원</td>
              </tr>
              <tr>
                <td>5kg</td>
                <td>18~26과</td>
                <td>52,000원</td>
              </tr>
              <tr>
                <td rowspan="2">가정용</td>
                <td>3kg</td>
                <td>11~16과</td>
                <td>30,000원</td>
              </tr>
              <tr>
                <td>5kg</td>
                <td>18~26과</td>
                <td>47,000원</td>
              </tr>
            </tbody>
         </table>
      </body>
   </html>

↓

 

     cf, border-collapse는 border-spacing 속성과 함께 사용할 수 없다.

             ∵ 표테두리와 셀 테두리를 합쳐(border-collapse)버려서 간격이 있을(border-spacing)레야 있을 수가 없기 때문!!

저작자표시 비영리 변경금지

'프밍 > CSS' 카테고리의 다른 글

DAY 13. 웹 문서 내용을 박스 형태로 정의하기 (with CSS) (2) - width, height, box-sizing, box-shadow  (0) 2022.11.08
DAY 12. 웹 문서 내용을 박스 형태로 정의하기 (with CSS) (1) - 블록 레벨 요소, 인라인 레벨 요소, 박스 모델  (0) 2022.11.07
DAY 11. 표 관련 스타일(1): caption-side, border  (0) 2022.11.05
DAY 11. 목록 관련 스타일(3): list-style  (0) 2022.11.05
DAY 11. 목록 관련 스타일(2): list-style-image, list-style-position  (0) 2022.11.05
'프밍/CSS' Related Articles more
Comments