11 테이블 테두리 변경하기(border-collapse)

테이블 테두리 설정(border-collapse)

border-collapse은 테이블 셀들 간에 공백을 처리할지 여부를 결정하는 속성이다.

separate	기본값, 셀들을 분리해서 공백을 만든다
collapse	셀들을 합쳐서 사이의 공백을 없앤다

[예시]

table{border-collapse: collapse;}

적용해 보자 !

<style>
        table{
            border-collapse: collapse;
            border:3px solid red;
            width: 600px;
        }
        th, td {
            height: 40px;
            border:3px solid red;
        }
        
        td{
            text-align: center;
        }
        caption{
            font-weight: bold;
            line-height: 70px;
        }
</style>

<body>
    <h2>테이블 테두리</h2>
    <table>
        <caption>자주 사용하는 브라우저</caption>
        <tr>
            <th>개발사</th>
            <th>브라우저 이름</th>
        </tr>
        <tr>
            <td>구글</td>
            <td>크롬</td>
        </tr>
        <tr>
            <td>마이크로 소프트</td>
            <td>엣지</td>
        </tr>
        <tr>
            <td>애플</td>
            <td>사파리</td>
        </tr>
    </table>
</body>

열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.

수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>

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

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

13 CSS Form (0)	2021.05.03
12 CSS display (0)	2021.05.03
10 둥근 테두리 만들기(border-radius) (0)	2021.05.03
09 박스모델(BOX MODEL)과 박스 사이징 (0)	2021.05.03