table 태그

<표> 를 만들어주는 HTML 태그, <table></table>

- <thead></thead>, <tbody></tbody> 태그를 써서 명시적으로 헤더, 바디를 나누는 경우도 있고,

굳이 나누지 않고, <th></th> 와 <tr></tr> <td></td> 만으로 테이블을 구성하기도 한다

        <table> <!-- 테이블 -->
          <thead> <!-- 테이블 헤더 -->
            <tr> <!-- 테이블 행(row) -->
              <th>아이디</th> <!-- 테이블 열(column) :헤더 -->
              <th>이름</th>
            </tr>
          </thead>
          <tbody> <!-- 테이블 바디 -->
            <tr> <!-- 테이블 행(row) -->
              <td>아이디 아이디 아이디 아이디</td> <!-- 테이블 열(column) :바디 -->
              <td>이름 이름 이름 이름 이름</td>
            </tr>
          </tbody>
        </table>

<table> <!-- 테이블 -->
  <th>아이디</th> <!-- 테이블 열(column) :헤더 -->
  <th>이름</th>
  <tr>
    <td>idididididid</td>
    <td>name name name name name</td>
  </tr>
  <tr> <!-- 테이블 행(row) -->
    <td>아이디 아이디 아이디 아이디</td> <!-- 테이블 열(column) :바디 -->
    <td>이름 이름 이름 이름 이름 이름</td>
  </tr>
</table>

- colspan, rowspan property 를 사용하면 테이블 행 or 열을 간단하게 합병시킬 수 있다

<table border="1" bordercolor="blue" align="center">
    <tr bgcolor="blue">
      <td colspan="3" span>오늘의 표</td>
    </tr>
    <tr>
      <td>아이디</td>
      <td>이름</td>
      <td>권한</td>
    </tr>
    <tr>
      <td>아이디 아이디 아이디</td>
      <td>이름 이름 이름</td>
      <td>권한 권한 권한</td>
    </tr>
    <tr>
      <td rowspan="3">총합</td>
      <td>나이</td>
      <td>주소</td>
    </tr>
    <tr>
      <td>나이 나이 나이 나이</td>
      <td>주소 주소 주소</td>
    </tr>
    <tr>
      <td>나이 나이 나이 나이</td>
      <td>주소 주소 주소</td>
    </tr>
</table>

- colgroup 은 사용되는 테이블의 컬럼(<td></td>)에 적용할 width, style 을 미리 적용한다. 보기 편하다

<table>
    <colgroup>
      <col width="10%">
      <col width="20%">
      <col width="50%">
      <col width="20%">
    </colgroup>
    <thead>
      <tr>
        <td>아이디</td>
        <td>이름</td>
        <td>권한</td>
        <td>나이</td>
      </tr>
    </thead>
</table>

*colgroup 은 html5 에서 공식적으로 지원하지는 않는다

 

참고

https://coding-factory.tistory.com/184

https://webisfree.com/2015-10-31/%ED%85%8C%EC%9D%B4%EB%B8%94-%ED%83%9C%EA%B7%B8-colgroup-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

.