[프론트엔드 입문] 4-1 Tables

1. Tables

[1-1] table 태그

• <table> : table
• <th> : table header
• <tr> : table row
• <td> : table data

[1-2] 예시

1) 코드

<table border = "1px solid black">
  <tr>
    <th>번호</th>
    <th>상품명</th>
    <th>수량</th>
    <th>가격</th>
  </tr>
  <tr>
    <td>1</td>
    <td>콜라</td>
    <td>1개</td>
    <td>1,500원</td>
  </tr>
  <tr>
    <td>2</td>
    <td>사이다</td>
    <td>2개</td>
    <td>1,000원</td>
  </tr>
  <tr>
    <td>3</td>
    <td>탄산수</td>
    <td>3개</td>
    <td>1,000원</td>
  </tr>
</table>
  

2) 결과

[2] HTMl Tables attributes

1) 종류

• align : 테이블 전체의 위치
  • table, th, td에도 지정할 수 있다.
• border : table border
• width : whole table width
• height : whole table height
• cellspacing : 셀들 사이의 spacing (바깥 여백)
• cellpadding : 셀들 사이의 padding (안쪽 여백)
• bgcolor : table의 배경색
  • tr, th, td에도 지정할 수 있다.

[3] tr, th, td tags Attribtes

• align : 정렬
• bgcolor : 배경색
• width : 넓기
• height : 높이
• colspan : 열 합치기
• rowspan : 행 합치기

[4] caption

• <caption> : 테이블이나 사진, 삽화 등에 붙는 설명 태그

1) 예시

[5-1] thead, tbody, tfoot

: th, td 등으로 나누었던 부분을 head/body/foot 이렇게 세 가지 영역으로 나누는 HTML Tag

[5-2] 예시

1) 코드

        <table border="1">
            <caption>Cpation</caption>
            <colgroup>
                <col span="2" style="background-color: red"/>
                <col style="background: blue;"/>
            </colgroup>
            <thead  style = "background: green;">
                <tr>
                    <td>Table Header</td>
                    <td>Table Header</td>
                    <td>Table Header</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Table Data</td>
                    <td>Table Data</td>
                    <td>Table Data</td>
                </tr>
                <tr>
                    <td>Table Data</td>
                    <td>Table Data</td>
                    <td>Table Data</td>
                </tr>
                <tr>
                    <td>Table Data</td>
                    <td>Table Data</td>
                    <td>Table Data</td>
                </tr>
            </tbody>
            <tfoot style = "background: yellow;">
                <tr>
                    <td>Table Data</td>
                    <td>Table Data</td>
                    <td>Table Data</td>
                </tr>
            </tfoot>
        </table>

2) 결과

2. Tables 실습

[1] America.html

1) 코드

    <table border = "1">
        <tr>
            <th>도시</th>
            <th>일자</th>
            <th>기온</th>
            <th>고도</th>
            <th>식당</th>
            <th>등급</th>
        </tr>
        <tr>
            <td>왈라 왈라, 워싱턴주</td>
            <td>6월 15일</td>
            <td>75</td>
            <td>1,204ft</td>
            <td>29,686</td>
            <td>4/5</td>
        </tr>
        <tr>
            <td>아이다 호주</td>
            <td>7월 25일</td>
            <td>74</td>
            <td>5,312ft</td>
            <td>50</td>
            <td>3/5</td>
        </tr>
    </table>

2) 결과

[2] America2.html

1) 코드

 <table border = "1">
        <tr>
            <th>도시</th>
            <th>일자</th>
            <th>기온</th>
            <th>고도</th>
            <th>식당</th>
            <th>등급</th>
        </tr>
        <tr>
            <td>왈라 왈라, 워싱턴주</td>
            <td>6월 15일</td>
            <td>75</td>
            <td>1,204ft</td>
            <td>29,686</td>
            <td>4/5</td>
        </tr>
        <tr>
            <td>아이다 호주</td>
            <td>7월 25일</td>
            <td>74</td>
            <td>5,312ft</td>
            <td>50</td>
            <td>3/5</td>
        </tr>
        <tr>
            <td rowspan="2">진실 혹은 결과, 뉴멕시코주</td>
            <td>8월 9일</td>
            <td>93</td>
            <td rowspan="2">4,242ft</td>
            <td rowspan="2">7,289</td>
            <td>5/5</td>
        </tr>
        <tr>
            <td>8월 27일</td>
            <td>98</td>
            <td>4/5</td>
        </tr>
    </table>

2) 결과