HTML-표

yezee·2022년 9월 10일
0

HTML&CSS

목록 보기
4/10
post-thumbnail

표를 만들 때 사용하는 태그

  • 표는 table 태그로 만든다
  • 행은 tr 태그로 만든다
  • 열의 제목이 들어가는 셀은 th 태그로 만든다
  • 내용이 들어가는 셀은 td 태그로 만든다
  • 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분 지을 수도 있다
  • 가로로 이웃한 셀을 합칠 때에는 colspan 속성을 사용한다
  • 세로로 이웃한 셀을 합칠 때에는 rowspan 속성을 사용한다

병합은 <td><th> 태그에 colspan, rowspan 이라는 attribute를 추가해서 구현
rowspan 은 행 병합, colspan 은 열을 병합

    <table class="borderTable">  <!--테이블 태그로 시작-->
      <tr>  <!--행만들기-->
        <th></th>
        <th>내용</th>
        <th>장소</th>
      </tr>
      <tr>
        <th>1시</th>   <!--제목태그-->
        <td>HTML이란</td>   <!--셀태그-->
        <td>101호</td>
      </tr>
       <tr>
        <th>2시</th>
        <td rowspan="2">HTML실습</td> <!--행을 병합-->
        <td>102호</td>
      </tr>
       <tr>
        <th>3시</th>
        <td>103호</td>
      </tr>
      <tr>
        <th>4시</th>
        <td>CSS란</td>
        <td>104호</td>
      </tr>
      <tr>
        <th>5시</th>
        <td>CSS실습</td>
        <td>104호</td>
      </tr>
      <tr>
        <th>6시</th>
        <td colspan="2">수업 없습니다.</td>  <!--열을 병합-->
      </tr>
    </table>

표 제목은 caption 태그로 만든다

기본위치는 표 위 가운데이다
캡션 위치는 css의 caption-side로 정한다

profile
아 그거 뭐였지?

0개의 댓글