목차
<tr> 예제 - 테이블 행
<tr> 정의
<tr> 구문
<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 이용!)
속성
속성값
쓰임새
비고
align
left (왼쪽 정렬)
right (오른쪽 정렬) center (중앙 정렬) justify (동일 길이 펼침 정렬) char (특정 문자 기준 정렬)
수평 정렬
HTML5 제외
valign
top (상단 정렬)
middle (중단 정렬) bottom (하단 정렬) baseline (밑단 정렬) - 글씨 크기 다를 경우 효과적
수직 정렬
HTML5 제외
bgcolor
색상 코드
배경 색깔
HTML5 제외
char
특정 문자
특정 문자에 대해 정렬
HTML5 제외
charoff
숫자
char 속성에 의해 내용 정렬 시
정렬될 특정 문자 개수 지정
HTML5 제외
주소 복사
랜덤 이동