[수업노트](20.10.29)D+15 table

1. table 기본

- 기본적으로 table>(thead>tr>th)+(tbody>tr>td)로구성

- <tr></tr>: 표의 가로(줄)

- <td></td>: 표의 세로(칸)

- <th></th>: 기준 정보가 되는것은 th로 감싸준다

 * 테이블에서 칸수는 반드시 맞춰준다

- HTML <table border="1">표의 테두리 선 나타내기

- CSS {boder-collapse:collapse;}는 표의 줄들을 한줄로 합쳐준다 만들어준다

---

2. table정렬 및 병합

- 표 특성 상 좌측상단 첫칸(table>thead>tr:first-child)만 너비를 지정하여도 전체 크기가 바뀐다

- 또는 thead위에 <colgroup><col width="x"></colgroup>(칼럼)마크업하면  맨 좌측 칸만 크기가 고정된다

- 표의display는 table(block), inline-table(inline-block)있다.

- 가로 2칸 병합: <td colspan="2">

- 세로 2칸 병합<td rowspan="2">

- <td height="100"> 높이를 주고 CSS vertical-align을 지정하면 표 내에서 이동가능

- 표전체 정렬 방법 CSS vertical-align 수직정렬 가능

 

<div class="table-box-1">
    <table border="1"> 테두리 선
        <colgroup>
            <col>
            <col>
            <col>
        </colgroup>
        <thead>
            <tr>줄
                <th></th>기준정보
                <th>월</th>
                <th>화</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1교시</th>
                <td>국어</td>칸
                <td>사회</td>
            </tr>
            <tr>
                <th>2교시</th>
                <td>사회</td>
                <td>영어</td>
            </tr>
            <tr>
                <th>3교시</th>
                <td>국사</td>
                <td height="100">체육</td>표 내에서 수직정렬 가능
            </tr>
        </tbody>
    </table>
</div>

.table-box-1 > table {
    border-collapse:collapse;
    margin:0 auto;
}

.table-box-1 > table td, .table-box-1 > table th {
    border:1px solid black;
    padding:20px;
}

.table-box-1 > table > tbody > tr:hover {
    background-color:#dfdfdf;
}

.table-box-1 > table > tbody > tr > td {
    vertical-align:bottom;
}