[Html] Table

 

<table>
  <thead>
     <tr>
        <th>이름</th>
        <th>나이</th>
        <th>전화번호</th>
     </tr>
  </thead>

  <tbody>
    <tr>
        <td>김철수</td>
        <td>12</td>
        <td>01012345678</td>
    </tr>
    <tr>
        <td>박지희</td>
        <td>16</td>
        <td>01012345678</td>
    </tr>
  </tbody>
</table>

thead : table header

tbody : table body

tr : table row

th : table header

td : table data

 

** th과 td의 개수는 무조건 똑같아야 함

---

표를 합칠 땐?

rowspan="숫자"

colspan="숫자"

제목1	제목2	제목3
rowspan="2"	colspan="2"

** span을 사용하면 다음줄에서 skip 해도 된다!

 

   <table>
       <thead>
           <tr>
               <th></th>
               <th scope="col">월</th>
               <th scope="col">화</th>
               <th scope="col">수</th>
               <th scope="col">목</th>
               <th scope="col">금</th>
           </tr>
       </thead>

       <tbody>
           <tr>
               <th scope="row">1교시</th>
               <td rowspan="2">왕초보 HTML &amp; CSS</td>
               <td>모각코</td>
               <td rowspan="2">왕초보 HTML &amp; CSS</td>
               <td>모각코</td>
               <td rowspan="2">왕초보 HTML &amp; CSS</td>
           </tr>

           <tr>
            <th scope="row">2교시</th>
            <td rowspan="2">JavaScript 스킬업</td>
            <td rowspan="2">JavaScript 스킬업</td>
           </tr>

           <tr>
            <th scope="row">3교시</th>
            <td>JavaScript 시작반</td>
            <td>JavaScript 시작반</td>
            <td>JavaScript 시작반</td>
           </tr>

           <tr>
            <th colspan="6" scope="row">점심시간</th>
           </tr>
       </tbody>
   </table>

scope="row | col" 을 사용하여 좀 더 명확하게 header를 구분지어줄 수 있음 (td에서만 사용 가능)