HTML table element

Tony·2021년 11월 16일
0

HTML

목록 보기
11/14

내가 지금까지 들었던 강의 중에선 table을 쓰는 강의가 하나도 없었지만 오래된 책이나 회사웹사이트에선 종종 보이는 것 같다.
이번 기회에 table, tr, td, th 등 table 관련 element를 정리해보자

<table border="10">
      <thead>
        <tr>
          <th>이름</th>
          <th>성별</th>
          <th>주소</th>
          <th>회비</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tony</td>
          <td></td>
          <td rowspan="2">청주</td>
          <td>1000</td>
        </tr>
        <tr>
          <td>Steve</td>
          <td></td>
          <td>500</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">합계</td>
          <td>1500</td>
        </tr>
      </tfoot>
    </table>

table

  • 하나의 테이블을 만드는 태그

thead, tbody, tfoot

  • 테이블의 상단(thead), 중단(tbody), 하단(tfoot)을 결정하는 요소

tr

  • 테이블에서 하나의 가로 줄(행)

th, td

  • th : 테이블의 맨 윗줄에 주로 사용되고 해당 열에 대한 설명(table haeder)
    • 중앙정렬, 굵은 글씨
  • td : 테이블 한 칸(table data)

border

  • 테이블의 외각 테두리의 두께를 결정하는 요소
  • default : 0

rowspan

  • 테이블에서 세로로 확장할 때 사용
  • 재밌는 점은 steve, 여, 500이 아랫줄에 있는데 윗줄의 세 번째 칸에서 세로로 확장을 하니 아래줄의 기존의 세 번째에 위치하던 500이 한 칸 밀리는 것을 알 수 있다

colspan

  • 가로로 확장(위 테이블에서 '합계'에서 사용)

그 외 - colgroup, col

  • 각 열을 묶을 때 사용

고찰

  • CSS grid랑 비슷한 것 같다
  • 거의 안쓸 것 같긴하지만 필요따라 관리자 페이지같은 곳에선 사용할 수도 있을 것 같다
    • 그런데 요즘은 데이터 시각화 라이브러리같은 것으로 표현할 것 같다
  • 그럼에도 불구하고 오래된 문서나 웹에 table이 사용된 것을 이해할 순 있어야 하기 때문에 알아둘 필요는 있을 것 같다

참고

profile
움직이는 만큼 행복해진다

0개의 댓글