[table] HTML - <tr> 태그 ★ - 테이블행 (= 테이블가로줄 = tr태그 = 티알태그) (HTML5수정)</tr>

1. <tr> 예제 - 테이블 행
2. <tr> 정의
3. <tr> 구문
4. <tr> 속성 (HTML5에서 지원 중단된 속성은 CSS 이용!)

<tr> 예제 - 테이블 행

 

<style>
table * {border:1px solid silver;}
</style>

 

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

 

결과보기

<tr> 정의

 
테이블 (= 표)의 행 지정.

 

---

 

1. 
<tr> 태그는 하나 이상의 <th>나 <td>태그를 반드시 포함해야 함.

 

※ 관련 태그.

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

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

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

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

               

 

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

 

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

4.
종료태그 (= 닫는태그)는 선택사항이라, 안 적어도 유효하지만,
XHTML 경우 유효하지 않으니, 되도록이면 적어주는 게 좋음.

<table>

  <tr>

    <th>이 사이트 이름은?

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

</table>

 

결과 보기

---

[주의]

<tr> 요소에 border 속성 적용하려면,<table> 요소에 border-collapse:collapse; 속성 적용해야 함.

<style>

table {

  border:1px solid red; 

  border-collapse:collapse;

}

tr {

  background:yellow; 

  border:5px solid blue;

}

td {

  margin:50px;

  padding:50px; 

  width:200px; 

  height:200px; 

  text-align:center;

}
</style>

<table>

  <tr><td>홈짱닷컴</td><td>홈짱닷컴</td></tr>

  <tr><td>Homzzang.com</td><td>Homzzang.com</td></tr>

</table>

 

결과보기

<tr> 구문

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

 

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