html 공부하기 - table (표 만들기) 쉽게 시각화 고민해보기..

HTML에서 <table> 태그는 표를 만드는 데 사용돼! 아주 쉽게 설명해줄게.

기본 구조

표를 만들려면 <table> 태그 안에 <tr>, <td> 같은 태그를 사용해.

• <table>: 표 전체를 감싸는 태그
• <tr>: 표의 행(row)

<td>: 표의 셀(cell), 데이터를 넣는 곳

 

 

 

응 그래.. 개념은 알겠는데 이걸 뭔가 시각적으로 예상이 안온다면 ? 💬 .. 

 

 

좀 더 구체적으로, "tr"은 행을 만들고, "td"는 셀을 만든다는 개념을 시각적으로 설명해줄게.

1. 표의 기본 구조

• 표는 **행(row)**과 **열(column)**로 구성돼.
• 행 (tr): 가로로 길게 쭉 늘어나는 줄.
• 열 (td): 세로로 데이터를 넣는 칸.

예시로 이해하기

표를 그릴 때, 상상해봐!

이름나이

철수	20
영희	22

이 표에서 **'이름'**과 **'나이'**는 첫 번째 행에 들어가고, 철수와 20, 영희와 22는 두 번째 행에 들어가.

HTML 코드로 바꾸기

<table border="1">
    <!-- 첫 번째 행 -->
    <tr>
        <td>이름</td>  <!-- 첫 번째 열 -->
        <td>나이</td>  <!-- 두 번째 열 -->
    </tr>
    <!-- 두 번째 행 -->
    <tr>
        <td>철수</td>  <!-- 첫 번째 열 -->
        <td>20</td>    <!-- 두 번째 열 -->
    </tr>
    <!-- 세 번째 행 -->
    <tr>
        <td>영희</td>  <!-- 첫 번째 열 -->
        <td>22</td>    <!-- 두 번째 열 -->
    </tr>
</table>

그냥 tr이 아래 위로 쭈욱 뻗어있으니까, 행(가로)로 쭈욱 뻗어있다고 생각하니까 조금 쉬워졌다  ❗️