220218 - html

6. Html table (tabular data)

### table: 표 요소

// 테이블의 기본 구조
<table>
    <caption>표의 제목</caption>
    <tr>
        <td>표의 셀</td> // td의 개수는 다른  tr 의 td 개수와 항상 동일해야한다. 
        <td>표의 셀</td>
    <tr>
    <tr>
        <td>표의 셀</td>
        <td>표의 셀</td>
    <tr>
</table>

### caption: 테이블의 제목, 설명을 나타낼때 사용하는 요소. 필수요소는 아니지만 가급적 작성하는 것이 좋다.

<table>
    <caption>
        <p>2020 넷플릭스 기대작</p>
        <p>2020 넷플릭스에 업데이트 되는 콘텐츠를 제목, 작성일로 요약해보았습니다.</p>
    </caption>
    <tr>
        <td>제목</td>
        <td>작성일</td>
    <tr>
    <tr>
        <td>안녕 조제, 호랑이</td>
        <td>2020-12-31</td>
    <tr>
</table>

### thead, tbody, tfoot - 테이블 제목, 본문, 결과 영역. 순서는 상관 없으나 순서대로 작성하는 것이 좋다.

<table>
    <caption>
        <p>2020 넷플릭스 기대작</p>
        <p>2020 넷플릭스에 업데이트 되는 콘텐츠를 제목, 작성일로 요약해보았습니다.</p>
    </caption>
    <thead>
        <tr>
            <th>제목</th>
            <th>작성일</th>
        <tr>
    </thead>
    <tbody>
        <tr>
            <td>안녕 조제, 호랑이</td>
            <td>2020-12-31</td>
        <tr>
    </tbody>
    <tfoot> 
    // 테이블 전체를 정리하는 콘텐츠를 담는 영역
    </tfoot>
</table>

### colgroup, col 요소 - th, td 등에 별도의 클래스명을 지정하여 스타일을 주는 것이 아니라 colgroup, col 을 활용하여 일괄 스타일 적용이 가능하다.

<table>
    <caption>
        <p>2020 넷플릭스 기대작</p>
        <p>2020 넷플릭스에 업데이트 되는 콘텐츠를 제목, 작성일로 요약해보았습니다.</p>
    </caption>
    <colgroup> // col 은 th, td 의 개수와 동일하게 작성
        <col class=table-cell  table-title> // tr 의 첫번째 th, td 에 스타일이 적용된다. (제목 / 안녕 조제, 호랑이)
        <col class=table-cell table-date> // tr 의 두번째 th, td 에 스타일이 적용된다. (작성일, 2020-12-31)
    </colgroup>
    <thead>
        <tr>
            <th>제목</th>
            <th>작성일</th>
        <tr>
    </thead>
    <tbody>
        <tr>
            <td>안녕 조제, 호랑이</td>
            <td>2020-12-31</td>
        <tr>
    </tbody>
</table>

### tr, th, td - 테이블을 구성하는 가장 기본적이고 중요한 요소

<table>
    <tr> // table row
        <th> table header
        <th>
    </tr>
    <tr>
        <td> table data    
        <td>
    </tr>
</table>

1. rowspan, colspan : th, td 요소에서 사용할 수 있는 속성, 여러 셀을 하나로 합칠 때 사용,

- 숫자로 표현한다.

- Rowspan, colspan 의 갯수를 고려하여 셀 전체 갯수를 지정해야한다. 셀의 갯수가 어긋나면 테이블이 정상적으로 렌더링되지 않음

- rowspan : row 를 병합할 때 사용

- colspan : column 을 병합할 때 사용

2. scope 속성 : th, td 요소에서 사용할 수 있는 속성. 해당 요소를 기준으로 다음 요소를 어느 순서로 읽어야하는지 결정

### table 의 용법 : 표를 나타낼 때 사용. 게시판의 게시글 목록에도 테이블을 사용할 수 있다. 회원가입 폼에서도 사용할 수 있다. 테이블을 레이아웃 구성을 하기 위해 사용하면 안된다. 단, 이메일 마크업을 하기 위해서는 테이블을 사용한다. 단 테이블에 role=presentation 을 작성한다. (보여주기 위한 테이블임을 명시해줌)

 

 

---

초보자를 위한 HTML 강의 정리

 

https://inf.run/drB2

초보자를 위한 HTML 기초 - 인프런 | 강의