목차
- <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 제외 |