HTML 테이블에 행 추가하기
HTML에서 테이블에 새로운 행을 추가하려면 <tr> 태그를 사용합니다. <tr>(table row) 태그는 테이블 내부에서 하나의 행을 정의하는 역할을 하며, 행 안의 각 셀은 <td>(데이터 셀) 또는 <th>(헤더 셀) 태그로 작성합니다.
HTML <tr> 태그는 아래와 같은 추가 속성도 지원합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| align | right left center justify char | 사용 중단(Deprecated) − 텍스트의 시각적 가로 정렬을 지정합니다. |
| bgcolor | rgb(x,x,x) #hexcode 색상 이름 | 사용 중단(Deprecated) − 테이블 셀의 배경색을 지정합니다. |
| char | 문자 | 사용 중단(Deprecated) − 텍스트를 정렬할 기준 문자를 지정합니다. align="char"로 설정했을 때 사용됩니다. |
| charoff | 픽셀 또는 % | 사용 중단(Deprecated) − char 속성으로 지정한 기준 문자로부터의 정렬 오프셋(픽셀 또는 백분율)을 지정합니다. align="char"로 설정했을 때 사용됩니다. |
| valign | top middle bottom baseline | 사용 중단(Deprecated) − 셀 내용의 세로 방향 정렬을 지정합니다. |
참고: 위 속성들은 HTML5에서 공식적으로 지원이 중단되었습니다. 현재는 CSS의 text-align, vertical-align, background-color 같은 스타일 속성을 사용해 정렬과 배경색을 지정하는 것이 표준적인 방법입니다.
예제
다음 코드를 직접 실행해 보면서 HTML 테이블에 행을 추가하는 방법을 익혀볼 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML tr 태그</title> </head> <body> <table border = "1"> <tr> <th>크리켓 선수</th> <th>순위</th> </tr> <tr> <td>Virat Kohli</td> <td>1</td> </tr> <tr> <td>AB de Villiers</td> <td>2</td> </tr> </table> </body> </html>
위 예제에서 첫 번째 <tr>은 헤더 행(<th> 사용)을 정의하고, 이후의 <tr>들은 각 선수의 데이터 행(<td> 사용)을 나타냅니다. 이처럼 <tr> 태그를 반복해서 사용하면 원하는 만큼 행을 자유롭게 추가할 수 있습니다.