table(표) 태그란?

카테고리 없음

table(표) 태그란?

깡출깡충 2024. 6. 18. 17:26

Table(표) 태그

표에서 제목을 나타내는 태그

칸의 제목을 쓸때에는 th를 이용합니다.
표 전체에 제목을 나타낼때에는 <caption>이나 <figcaption> 이라는 태그를 사용할 수 있습니다.
<caption> 태그는 <table>열린 태그의 바로 아래에 씁니다.
<figcaption>태그는 <table>열린 태그의 위나 닫힌태그의 아래에 쓰입니다.

html <tr>행과 <td>열 작성 예시

 <!-- 2행 3열 -->
    <table>
      <!-- 1행 -->
      <tr>
        <td>1행 1열</td>
        <td>1행 2열</td>
        <td>1행 3열</td>
      </tr>
      <!-- 2행 -->
      <tr>
        <td>2행 1열</td>
        <td>2행 2열</td>
        <td>2행 3열</td>
      </tr>
    </table>

    <!-- 제목이 있는 표(3행 2열표) -->
    <table>
      <tr>
        <th>제목</th>
        <th>제목</th>
      </tr>
      <tr>
        <td>내용1</td>
        <td>내용2</td>
      </tr>

      <tr>
        <td>내용1</td>
        <td>내용2</td>
      </tr>
    </table>

html <caption>, <figcaption> 작성 예시

<table>
      <caption>
        표의 제목1
      </caption>
      <tr>
        <td>내용1</td>
        <td>내용2</td>
      </tr>
      <tr>
        <td>내용1</td>
        <td>내용2</td>
      </tr>
    </table>

    <figcaption>표의 제목-위</figcaption>
    <table>
      <tr>
        <td>내용1</td>
        <td>내용2</td>
      </tr>
      <tr>
        <td>내용1</td>
        <td>내용2</td>
      </tr>
    </table>
    <figcaption>표의 제목-아래</figcaption>

css 입력 예시

<!-- css -->
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      table {
        margin-bottom: 20px;
      }
      table,
      td,
      th {
        border: 3px solid plum;
      }
    </style>

html, css 행과 열 만들어보기

<caption>이나 <figcaption> 적용해보기

표의 칸을 합치는 속성

colspan속성 colspan은 가로 칸끼리 합쳐주는 속성으로 td나 th태그에 직접 적용합니다.
colspan을 적용한 해당 칸부터 쓰여진 숫자만큼 가로로 칸을 합쳐줍니다.

rowspan 속성 세로로 칸을 합치는 속성,
rowspan이 쓰여진 해당 태그 칸부터 쓰여진 숫자만큼 아래로 칸이 합쳐집니다.

border-collapse 표의 줄을 하나로 합치는 속성(css에 적용하기)

html 작성 예시

<!-- 3행 4열 -->
    <table>
      <tr>
        <td colspan="3">1행1열</td>
        <td>1행4열</td>
      </tr>
      <tr>
        <td>2행1열</td>
        <td>2행2열</td>
        <td>2행3열</td>
        <td>2행4열</td>
      </tr>
      <tr>
        <td>3행1열</td>
        <td>3행2열</td>
        <td colspan="2">3행3열</td>
      </tr>
    </table>

    <!-- 3행 4열 -->
    <table>
      <tr>
        <td rowspan="3">1열</td>
        <td>2열</td>
        <td>3열</td>
        <td>4열</td>
      </tr>
      <tr>
        <td>2열</td>
        <td rowspan="2">3열</td>
        <td>4열</td>
      </tr>
      <tr>
        <td>2열</td>
        <td>4열</td>
      </tr>
    </table>

css 입력 예시

<style>
      table {
        border-collapse: collapse;
      }

      table,
      td,
      th {
        border: 3px solid palegreen;
      }
    </style>

colspan 적용해보기

rowspan 적용해보기

아래에 보이는 표는 인터넷에 검색해서 아무거나 예시로 삼아 연습해 본 표입니다.

<!-- 표 예제 -->
    <figcaption>[표1] LTE 통신사-단말기 브랜드별 통화품질 문제점수*</figcaption>
    <table>
      <tr>
        <th rowspan="2"></th>
        <th rowspan="2">total<br />산업평균</th>
        <th colspan="3">통신사</th>

        <th colspan="4">단말기 브랜드</th>
        <!-- colspan="숫자" 적은 숫자만큼에 칸을 차지하겠다라는 의미입니다. -->
      </tr>
      <tr>
        <th>skt</th>
        <th>kt</th>
        <th>LG U+</th>
        <th>삼성</th>
        <th>엘지</th>
        <th>팬택</th>
        <th>애플</th>
      </tr>
      <tr>
        <th>통화품질 문제점수</th>
        <td>5.53</td>
        <td>5.65</td>
        <td>5.55</td>
        <td>5.31</td>
        <td>5.75</td>
        <td>5.10</td>
        <td>5.10</td>
        <td>5.98</td>
      </tr>
      <tr>
        <td>음성 송/수신상태</td>
        <td>5.53</td>
        <td>5.65</td>
        <td>5.55</td>
        <td>5.31</td>
        <td>5.75</td>
        <td>5.10</td>
        <td>5.10</td>
        <td>5.98</td>
      </tr>
      <tr>
        <td>음성 통화 성능</td>
        <td>5.53</td>
        <td>5.65</td>
        <td>5.55</td>
        <td>5.31</td>
        <td>5.75</td>
        <td>5.10</td>
        <td>5.10</td>
        <td>5.98</td>
      </tr>
      <tr>
        <td>문자 송/수신</td>
        <td>5.53</td>
        <td>5.65</td>
        <td>5.55</td>
        <td>5.31</td>
        <td>5.75</td>
        <td>5.10</td>
        <td>5.10</td>
        <td>5.98</td>
      </tr>
      <tr>
        <td>무선 인터넷</td>
        <td>5.53</td>
        <td>5.65</td>
        <td>5.55</td>
        <td>5.31</td>
        <td>5.75</td>
        <td>5.10</td>
        <td>5.10</td>
        <td>5.98</td>
      </tr>
      <tr>
        <td>사례수</td>
        <td>사례수</td>
        <td>사례수</td>
        <td>사례수</td>
        <td>사례수</td>
        <td>사례수</td>
        <td>사례수</td>
        <td>사례수</td>
        <td>사례수</td>
      </tr>
    </table>