[table] HTML - <td> 태그 ★ - 테이블 데이터 셀 (= 테이블셀 = td태그 = 티디태그) (HTML5수정)</td>

1. <td> 예제 - 테이블셀 내용
2. <td> 정의
3. <td> 구문
4. <td> 속성 (HTML5에서 지원 중단된 속성은 CSS 이용)
5. <td> 예제 - 가로 셀병합 (colspan)
6. <td> 예제 - 세로 셀병합 (rowspan)
7. <td> 예제 - 웹접근성 (scope 속성 이용해 스크린리더가 읽는 방향 설정)

<td> 예제 - 테이블셀 내용 

 

<table border=1>
  <tr>
    <th>HTML - 홈짱닷컴 (homzzang.com)</th>
    <th>CSS - 홈짱닷컴 (homzzang.com) </th>
  </tr>
  <tr>
    <td>무료</td>
    <td>무료</td>
  </tr>
</table>

 

결과보기

<td> 정의

 
테이블 (표)의 각 열 (=표준 셀 Standard cells) 지정.

 

---

 

1. 
HTML <table> 태그엔 2종류의 셀 (Cell : 테이블 내의 각각의 칸) 존재.

※ 관련 태그

<th> 태그
① (테이블 헤더 셀 Table Header cells)의 약자

② 각 열이나 행의 머리 제목   (예) 위 테이블 예제에서 "html"이나 "css"가 이에 해당
③ 기본적으로, 굵은 글씨로 나타나며 중앙 정렬됨.

<td> 태그
① (테이블 표준 셀 Table Standard cells = Table Data cells)의 약자

② 각 열의 내용   (예) 위 테이블 예제에서 "무료"가 이에 해당
③ 기본적으로, 일반 글씨로 나타나며 왼쪽 정렬됨.

               

 

2. 
셀을 병합할 때는 아래 속성을 이용.

① 가로 병합:   colspan="병합할 가로 셀 개수" 
② 세로 병합:   rowspan="병합할 세로 셀 개수"

 

3. 
HTML5에서 모든 레이아웃 (=정렬) 관련한 속성이 더 이상 지원 안 됨.

 

4. 
시작태그와 종료태그로 구성

5.
종료 태그 (= 닫는 태그)는 선택사항.
안 적어도 HTML 태그 상 유효한 코드임.
다만, XHTML에선 유효하지 않은 코드임.
따라서, 되도록이면 적어주는 게 좋음.

<table>

  <tr>

    <th>이 사이트 이름은?

    <td>홈짱닷컴 (Homzzang.com)

</table>

결과 보기 

<td> 구문

 
<table 속성="속성값">
     <tr>
         <th>머리 제목</th>
         <th>머리 제목</th>
     </tr>
     <tr>
         <td>내용</td>
         <td>내용</td>
     </tr>
</table>

 

<td> 속성 (HTML5에서 지원 중단된 속성은 CSS 이용)

<td> 예제 - 가로 셀병합 (colspan)

 

<table border=1>
  <tr>
    <th colspan=2>HTML, CSS - 홈짱닷컴 (homzzang.com)</th>
  </tr>
  <tr>
    <td>무료</td>
    <td>무료</td>
  </tr>
</table>

 

결과보기

<td> 예제 - 세로 셀병합 (rowspan)

 

<table border=1>

  <tr>

    <th rowspan=2>HTML, CSS - 홈짱닷컴 (homzzang.com)/th><td>HTML</td>

  </tr>

  <tr>

    <td>CSS</td>

  </tr>

</table>

 

결과보기

<td> 예제 - 웹접근성 (scope 속성 이용해 스크린리더가 읽는 방향 설정)

 

<style>

table,th,td {

  border:1px solid silver;

  border-collapse:collapse;

  padding:30px;  

}

th {

  background:gray;

  color:white;

}

</style>

 

<table>

<thead> 

  <tr> 

    <th scope="col">코딩언어</th> 

    <th scope="col">열람등급</th> 

    <th scope="col">수강회비</th> 

  </tr> 

</thead>

<tbody> 

  <tr>

    <td scope="row">HTML</td> 

    <td>1레벨</td> 

    <td>무료</td> </tr> 

  <tr> 

    <td scope="row">CSS</td> 

    <td>1레벨</td> 

    <td>무료</td> 

  </tr>

</tbody>   

</table>

 

결과보기