[html] step08. table

step08. table

    <table border="1" id="one">
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>주소</th>
        </tr>
        <tr>
            <td>1</td>
            <td>김구라</td>
            <td>노량진</td>
        </tr>
        <tr>
            <td>2</td>
            <td>해골</td>
            <td>행신동</td>
        </tr>
    </table>

1. <th> : 보다 두껍고 가운데 정렬. head의 의미일듯.
2. <tr> : row
3. <td> : column
4. line을 잘 맞춰서 작성해야 함. <tr> 안에 <td> 를 넣도록 정의된 것이다.
5. border 속성을 넣을 수 있고, id를 부여할 수 있다. (모든 요소에는 id를 부여할 수 있다.)
6. 하지만 이것은 약식이다.

 

    <table border="1">
        <!--table의 title은 caption element 안에 표기한다.-->
        <caption>회원 목록</caption>
        <!-- column의 폭을 조절할 때 colgroup 요소를 활용한다.-->
        <colgroup>
            <col width="200">
            <col width="100">
            <col width="100">
        </colgroup>
        <thead>
            <tr>
                <th>상품명</th>
                <th>현금</th>
                <th>카드</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>합계</th>
                <td>4,300원</td>
                <td>800원</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
(...후략)

1. 약식과는 구조적인 차이가 있다. 접근성이나 검색엔진에 최적화를 위해 정석으로 구성하는 것이 좋다고 한다.
2. table의 title은 caption 안에 표기한다.
3. colgroup column의 폭을 조절할 때 사용한다.
4. <thead>와 <tbody>의 안에 <th>, <tr>, <td>를 작성한다.
5. <tfoot> : 중요한 정보를 <thead> 바로 아래 <tfoot>으로 작성한다면 <thead> 다음에 <tfoot>의 정보를 먼저 읽어준다. 사이에 <tbody>가 낀다면 순서대로 읽어준다. 어느 위치에 들어가든 시각적으로는 가장 하단에 들어간다. 용도는 어제의 <img> 요소의 alt 속성과 같다.

 

    <h1>1, 2 column 합치기</h1>
    <table border="1">
        <tr>
            <!-- colspan="합칠 column의 개수"-->
            <td colspan="2">1</td>
            <!--<td>2</td>-->
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
(...후략)

1. row와 column을 합치고 싶을 때는 rowspan과 colspan 속성을 이용한다.
2. colspan="합치고 싶은 칸 수". rowspan도 마찬가지.
3. 그리고 합칠 부분을 지워주어야 한다. 안그러면 table 옆으로 비집고 나온다.