CSS: 11 Table

2020-12-30 수업 내용 정리 겸 복습

 

테이블:

데이터를 2차원 표형태로 나타내는데 사용하는 요소

 

border-collapse :

테이블의 테두리를 어떻게 표현할 것인지 정의

-seperate : 셀간 공백 유지 (기본값)

-collapse : 셀간 공백 제거

<h1>테이블 속성</h1>
<table class="table1">
    <tr><th>이름</th><th>국어</th><th>영어</th><th>수학</th></tr>
    <tr><td>이선우</td><td>100</td><td>100</td><td>100</td></tr>
    <tr><td>윤혜린</td><td>99</td><td>99</td><td>99</td></tr>
    <tr><td>권도연</td><td>98</td><td>98</td><td>98</td></tr>
</table>

        .table1 { border: 1px solid black;
            border-collapse: collapse}
        td, th{ border: 1px solid black; padding: 10px;}

border-sapcing :

border-collapse속성이 seperate일때

셀간 공백의 크기를 정의하는데 사용 가능하다.

 

table-layout :

테이블의 내용에 따라 테이블의 크기를 어떻게 표현할 것인지 정의

-fixed : 고정된 너비로 테이블의 크기를 고정함.

-auto : 내용에 따라 테이블이 자동으로 늘어남 ( 내용이 길어짐에 따라 열의 크기가 증가 )

 

<table class="table2">
    <tr><td>내용</td><td>123456789012345678901234567890</td></tr>
</table>

        .table2 {border: 1px solid blue;
            width: 300px;
            table-layout: fixed;}
        .table2 td{white-space:nowrap; overflow: hidden;text-overflow:ellipsis;
            text-align: center;}

테이블 가로크기 300px로 고정후 열값에 nowrap 문장을 넘기지 않겠다고 지정 overflow 넘치는거는 숨겨서 안보게 하겠다  text-overflow ellipsis숨겨진부분을 ...으로 표시하겠다.

+vertical-align :

테이블의 내용을 위, 아래, 가운데로 정렬하고 싶을때 사용

정렬방식은 top, middle, bottom으로 지정

<table class="table3">
    <tr>
        <td>1234567890</td><td>1234567890</td>
    </tr>
    <tr>
        <td>1234567890</td><td>1234567890</td>
    </tr>

     .table3 td { padding:0; width: 200px; height: 100px;}

        .table3 tr:first-child td:first-child { vertical-align: top;}
        .table3 tr:first-child td:nth-child(2) { vertical-align: bottom;}
        .table3 tr:nth-of-type(2) td:first-child {text-align:  center}
        .table3 tr:nth-of-type(2) td:nth-of-type(2) {text-align:  right;}

테이블의 padding값 0으로 줘서 기본적으로 왼쪽에 딱붙고 first-chile, nts-child(?), nts-of-type(?) 을이용해서 행과 열을 선택해서 vertical-align 과 text-align을 이용해서 정렬할 위치 선정

 

 

display : table

일반적으로 display 속성은 인라인 요소나 블록요소로 변환해서 출력하는데 사용하지만,

display 속성에 table을 지정하면 블록요소가 테이블의 성질을 가지게 할 수 있음

table : 요소를 테이블 요소처럼 보여줌

table-row : 요소를 테이블 tr 요소처럼 보여줌

table-cell : 요소를 테이블의 td요소처럼 보여줌

<div class="table4">
    <div class="tr">
        <div class="th">이름</div>
        <div class="th">국어</div>
        <div class="th">영어</div>
    </div>
    <div class="tr">
        <div class="td">수지</div>
        <div class="td">98</div>
        <div class="td">56</div>
    </div>
</div>

        .table4 { border: 1px solid blue; display: table; border-collapse: collapse;
            width: 300px; height: 100px; }
        .table4 .tr {display: table-row;}
        .table4 .th {display: table-cell; border: 1px solid black; font-weight: bold; text-align: center;
            vertical-align: middle;}
        .table4 .td {display: table-cell;border: 1px solid black; text-align: center; vertical-align: middle;}