[CSS] 테이블 관련 스타일

 

 

ㅁ 에밋 

 

    table.table1

 

 

    <table class="table1"></table>

 

 

 

 

    (tr>td*3)*3

 

            <tr>

                <td></td>

                <td></td>

                <td></td>

            </tr>

            <tr>

                <td></td>

                <td></td>

                <td></td>

            </tr>

            <tr>

                <td></td>

                <td></td>

                <td></td>

            </tr>

 

 

 

ㅁ 테이블 만들 때 border를 지금도 많이 쓰는데 사실 안쓰는게 좋다. 안쓰는것이 권장되고 있다.

 

    <table class="table1" border="1">

 

 

- 전체 감싸는 테두리 하나랑, 각 셀들마다 테두리가 있다. 그때 기본적으로 셀 간격이 있다.

 

 

 

ㅁ 

 

    <table class="table1">

        <thead>

            <tr>

                <td>회원번호</td>

                <td>회원명</td>

                <td>포인트</td>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>고길동</td>

                <td>100</td>

            </tr>

            <tr>

                <td>2</td>

                <td>고사리</td>

                <td>200</td>

            </tr>

            <tr>

                <td>3</td>

                <td>고라니</td>

                <td>300</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td colspan="2">포인트 합계</td>

                <td>600</td>

            </tr>

        </tfoot>

    </table>

 

 

 

 

 

  <style>

        .table1 {

            border: 1px solid black;  /* 전체 테두리 */

            border-spacing: 10px; /* 셀 간격 (상하좌우)*/

            border-spacing: 10px 5px; /* 셀 간격 (좌우, 상하) */

        }

        .table1 td {

            border: 1px solid gray;  /* 각 셀들 테두리 */

        }

    </style>

 

 

 

 

    <style>

        .table1 {

            border: 1px solid black;  /* 전체 테두리 */

            border-spacing: 10px; /* 셀 간격 (상하좌우)*/

            border-spacing: 10px 5px; /* 셀 간격 (좌우, 상하) */

            border-collapse: collapse; /* 셀 간격 분리 여부 (기본값 seperate, collapse)*/

        }

        .table1 td {

            border: 1px solid gray;  /* 각 셀들 테두리 */

            text-align: center;

        }

    </style>

 

 

 

 

        .table1 td:first-of-type { /* 각 행들마다 첫번째 셀을 선택 */

            width: 100px;

        }

        .table1 td:nth-of-type(2) { /* 각 행들마다 두번째 셀을 선택 */

            width: 200px;

        }

        .table1 td:last-of-type { /* 각 행들마다 세번째 셀을 선택 */

            width: 300px;

        }

 

 

 

 

 

        .table1 > thead td, .table1 > tfoot td {

            padding: 10px;

            font-weight: 900;

        }

 

 

 

 

 

      .table1 > tbody td {

            height: 50px;

            vertical-align: top; /* 수직 기준 정렬 (middle, top, bottom). 스타일 많으면 안먹히는 경우가 많다.*/

        }

 

 

 

 

 

       .table1 > tbody > tr:hover {

            background-color: pink;

            cursor: pointer;

        }