<table>
  <thead>
    <tr>
      <th class="head">구분</th>
      <th class="head">1</th>
      <th class="head">2</th>
      <th class="head">3</th>
      <th class="head">4</th>
      <th class="head">5</th>
      <th class="head">6</th>
      <th class="head">7</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>학생</td>
      <td colspan="3">직장인</td>
      <td>자택경비원</td>
      <td>불꽃효자</td>
      <td>자체공강</td>
      <td>머리가 꽃밭이야~</td>
    </tr>
  </tbody>
</table>

<table style="border: 1px solid; width: 500px;"> 
	<caption>테이블 예시</caption> 
    <colgroup> 
    	<col style="width: 15%;"/> 
        <col style="width: 35%;"/> 
        <col style="width: 15%;"/> 
        <col style="width: 35%;"/> 
    </colgroup> 
    <tbody> 
    	<tr> 
        	<th>컬럼1</th> 
            <td>이것은 데이터1</td> 
            <th>컬럼2</th> 
            <td>이것은 데이터2</td> 
        </tr> 
        <tr> 
        	<th>컬럼3</th> 
            <td colspan="3">colspan 3</td> 
        </tr> 
        <tr> 
        	<th>컬럼4</th> 
            <td>이것은 데이터3</td> 
            <th>컬럼5</th> 
            <td>이것은 데이터4</td> 
        </tr> 
    </tbody> 
</table>

table에 담고 thead tbody 구분

• thead는 표에서 맨 머리 말 그대로 구분?? 이라고 생각하면 된다.
• thead에 맞는 데이터들이 tbody에 들어간다.

th tr td

• th: 제목이 들어간다. head의 약자
• tr: 가로줄이 들어간다. row의 약자
• td: 셀을 만드는 역할을 한다. data 약자

colspan

• 열 병합
• 위에서 직장인의 colspan이 3이면 열을 3개나 먹는거다.
• 따라서 헤드의 1~3까지 직장인이 먹고 시작한다.
• 잘 계산해서 작성해야 한다.

rowspan

• 행 병합
• colspan이 가로 병합이었으면 rowspan은 세로 병합이다.
• 잘 계산해서 작성해야 한다.

참고 사이트

• https://aboooks.tistory.com/59
• https://develop-sense.tistory.com/entry/HTML-%ED%85%8C%EC%9D%B4%EB%B8%94table%EC%9D%98-colspan%EA%B3%BC-rowspan-%EC%82%AC%EC%9A%A9%EB%B2%95%EA%B3%BC-%EC%98%88%EC%8B%9C