-
HTML 테이블 (<table>)과 행 (<tr>) 및 셀 (<td>) 작성
IT창고/HTML 2023. 7. 19. 13:06반응형HTML 테이블 (
<table>
)과 행 (<tr>
) 및 셀 (<td>
) 작성HTML에서 테이블을 생성하기 위해
<table>
태그를 사용합니다. 테이블은 행과 열로 구성되며, 각 행은<tr>
태그로, 각 셀은<td>
태그로 작성됩니다. 이번 글에서는<table>
태그와 그 하위 요소인<tr>
태그와<td>
태그에 대해 자세히 알아보겠습니다.<table>
태그<table>
태그는 HTML에서 테이블을 생성하는 데 사용됩니다. 테이블은 행과 열의 집합으로 구성되며,<table>
태그는 시작 태그(<table>
)와 종료 태그(</table>
)로 이루어져 있습니다.아래는
<table>
태그의 사용 예시입니다:<table> <!-- 테이블 내용 --> </table>
위의 예시에서는
<table>
태그로 테이블을 생성하고, 테이블의 내용을 작성하기 위해 내부에 다른 요소들을 포함시킬 수 있습니다.<tr>
태그<tr>
태그는 테이블의 행을 나타내는 요소입니다. 각 행은<tr>
태그로 시작하고 종료됩니다.아래는
<tr>
태그의 사용 예시입니다:<tr> <!-- 행 내용 --> </tr>
위의 예시에서는
<tr>
태그로 테이블의 행을 생성하고, 행의 내용을 작성하기 위해 내부에 다른 요소들을 포함시킬 수 있습니다.<td>
태그<td>
태그는 테이블의 셀을 나타내는 요소입니다. 각 셀은<td>
태그로 시작하고 종료됩니다.아래는
<td>
태그의 사용 예시입니다:<td> <!-- 셀 내용 --> </td>
위의 예시에서는
<td>
태그로 테이블의 셀을 생성하고, 셀의 내용을 작성할 수 있습니다.테이블 구조
테이블은
<table>
태그 내에<tr>
태그를 사용하여 행을 작성하고, 각 행 내에<td>
태그를 사용하여 셀을 작성합니다. 테이블의 크기는 행과 열의 개수에 따라 동적으로 조절됩니다.아래는 테이블의 구조를 보여주는 예시입니다:
<table> <tr> <td>셀 1</td> <td>셀 2</td> </tr> <tr> <td>셀 3</td> <td>셀 4</td> </tr> </table>
위의 예시에서는 2개의 행과 2개의 열로 구성된 테이블을 생성하고, 각 셀에 적절한 내용을 작성했습니다.
테이블 스타일링
HTML 테이블은 CSS를 사용하여 스타일을 적용할 수 있습니다. CSS를 활용하여 테이블의 레이아웃, 배경색, 테두리 등을 변경할 수 있습니다. CSS 스타일링에 대한 자세한 내용은 다음 글에서 다루도록 하겠습니다.
마무리
HTML의
<table>
태그와 그 하위 요소인<tr>
태그와<td>
태그를 활용하여 테이블을 생성할 수 있습니다.<table>
태그는 테이블의 뼈대를 정의하고,<tr>
태그는 테이블의 행을 작성하며,<td>
태그는 테이블의 셀을 작성합니다. 테이블을 구조화하여 웹 페이지의 내용을 체계적으로 정리하고, 필요한 정보를 효과적으로 전달해보세요. 다음 글에서는 HTML의 다른 유용한 요소들에 대해 다루어보겠습니다. 기대해주세요!반응형