table태그

    <table id="student">
        <!-- 1)테이블 제목(웹접근성). caption태그를 안보여야하면 css로 안보이게 할것 -->
        <caption>남녀 수강생 현황</caption>
        <!-- 2)테이블의 세로열(col)을 구분
            (필수아님 - 생략가능,안적더라도 웹접근성 위배아님,
            그러나 브라우저가 세로열이 몇개인지 빠르게 인식할 수 있다. ) -->
        <colgroup>
           <col class="w150">
           <col class="w200" span="2">
           <!-- 
               똑같은 col태그가 있을때에는 span으로 몇개가 똑같은지 써줄 수 있다.
               16번을 풀어서 작성하면 아래와 같다.
               <col class="w200">
               <col class="w200"> 
           -->
        </colgroup>
        <!-- 3)테이블의 가로행(row)을 구분: thead, tbody, tfoot -->
        <thead>  <!-- thead는 제목셀의 그룹이므로 내부에 td는 들어갈 수 없다 -->
            <tr>  <!-- 한줄tr: 내부에는 제목셀th와 데이터셀td가 중첩된다. -->
                <!-- 가로행(row)의 일부분을 합친 경우 rowspan -->
                <th rowspan="2">교실</th> 
                <!-- 세로열(col)의 일부분을 합친 경우 colspan -->
                <th id="s" colspan="2" scope="col">수강생</th> 
            </tr>
            <tr>
       <!-- scope: th가 영향을 미치는 범위  -- 세로방향이면 col, 가로방향이면 row -->
                <th scope="col" id="m">남</th> 
                <th scope="col" id="w">여</th>
            </tr>
        </thead>
        <tbody>
            <tr>
       <!-- 복잡한 구조의 테이블은 scope만으로 접근성을 확보하기 어려워 
       th id="box"그것을 td headers="box"로 받아오면 된다 .-->
                <th scope="row" id="c1">1반</th> 
                <td headers="c1 s m">10</td> <!-- 1반 수강생 남 10 -->
                <td headers="c1 s w">5</td> <!-- 1반 수강생 남 5 -->
            </tr>
            <tr>
                <th scope="row" id="c2">2반</th>
                <td headers="c2 s m">5</td> <!-- 2반 수강생 남 5 -->
                <td headers="c2 s w">5</td> <!-- 2반 수강생 여 5 -->
            </tr>
            <tr>
                <th scope="row" id="c3">3반</th>
                <td headers="c3 s m">10</td> <!-- 3반 수강생 남 10 -->
                <td headers="c4 s w">5</td> <!-- 3반 수강생 여 5 -->
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>합계</th>
                <th>25</th>
                <th>15</th>
            </tr>
        </tfoot>
    </table>
    <!-- 
        테이블 접근성 
        1) 첫번째 자식 태그로 caption이라는 제목을 사용 
        2) 제목과 데이터를 연결지어 읽어줄 수 있도록
          th scope="row", th scope="col"
        3)복잡한 구조일 경우, 2번으로 만족하지 못해 
        th id="box" => td headers="box"
     -->