2023/03/08__HTML/CSS__5

* 테이블(Table)

1. 정보 전달에 활용

테이블이란 워드나 한글에 표만들기라 생각하면 된다.

 

* 특징

1. 각 행의 셀 개수는 동일

2. 같은 행에 있는 셀들은 높이가 동일

3. 같은 열에 있는 셀들은 길이가 동일

COLUMN
ROW
	CELL

* 관련 태그

1. table : 테이블의 외곽선 표시

2. tr(Table Row): 표의 행(줄) 구분

3. td(Table Data Cell) : 셀(칸)생성

  <table>
      <tr>
        <td>A-1</td>
        <td>A-2</td>
        <td>A-3</td>
      </tr>
      <tr>
        <td>B-1</td>
        <td>B-2</td>
        <td>B-3</td>
      </tr>
      <tr>
        <td>C-1</td>
        <td>C-2</td>
        <td>C-3</td>
      </tr>
    </table>

** 결과

A-1	A-2	A-3
B-1	B-2	B-3
C-1	C-2	C-3

* 셀 병합 속성

1. colspan : 열 병합

2. rowspan : 행 병합

    <table class="display">
      <tr>
        <td>A-1</td>
        <td colspan="2">A-2</td>
      </tr>
      <tr>
        <td rowspan="2">B-1</td>
        <td>B-2</td>
        <td>B-3</td>
      </tr>
      <tr>
        <td>C-1</td>
        <td>C-2</td>
      </tr>
    </table>

** 결과

A-1	A-2
B-1	B-2	B-3
	C-1	C-2

 

 

*** 접근성 향상을 위한 요소 및 속성

1. th(Table Header) : 제목 셀 지정

2. caption : 표의 제목

3. summary(속성) : 표의 제목

4. thead / tfoot / tbody : 각 셀들의 역할 별 구분

- thead : 제목 , tfoot : 결과, tbody : 내용

- 필요하지 않은 태그들은 생략 가능

- 태그 사용 시 반드시 위 순서대로 사용

- ***** 중요 !! 작성 순서 head foot body 순서로

( 제목을 알려주고 결과를 알려주고 본문을 알려준다. 스포츠 경기를 예로 생각하면 이해가 쉬움..)

5. id(속성) : 제목 셀에 이름 부여

6. headers(속성) : 해당 셀의 제목 셀 지정

 <table summary="삼성,애플 제품별 판매가격 비교">
      <caption>
        제조사별 판매가격
      </caption>
      <thead>
        <tr>
          <th>구분</th>
          <th id="samsung">삼성</th>
          <th id="apple">애플</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th id="total">합계</th>
          <td headers="">320,000</td>
          <td headers="">350,000</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <th id="smartphone">스마트폰</th>
          <td headers="samsung smartphone">150,000</td>
          <td headers="apple smartphone">160,000</td>
        </tr>
        <tr>
          <th id="tablet">태블릿</th>
          <td headers="samsung tablet">170,000</td>
          <td headers="apple tablet">190,000</td>
        </tr>
      </tbody>
    </table>

 

제조사별 판매가격

구분	삼성	애플
합계	320,000	350,000
스마트폰	150,000	160,000
태블릿	170,000	190,000

 

 

표는 이해하기 쉽게 만들어야한다.

(하지만 개인적으로는 css grid가 더 편하다..)

일반인도 장애인도 편한 웹을 만들어야한다.