[문돌이의IT] <table>, <tr>, <td>태그 활용해서 HTML 표만들기

 <table>, <tr>, <td> 태그로 표를 만들 수 있다. 한글이나 워드에서는 그냥 마우스 클릭 몇 번이면 짠하고 표를 만들 수 있지만 HTML 상에서는 하나씩 다 입력을 해줘야 한다. 한글, 워드도 사실 로직으로 표를 쉽게 만들 수 있도록 지정이 되어 있는 거라고 생각하면 쉽다.

 

순서는 큰 틀의 역할을 하는 <table>을 만들고 그 안에 층 역할의 <tr>, 호 역할의 <td>이다. 하위 개념이란 표현 보다는 건물로 표현하면 이해가 쉽다.

 

<table border="1px solid black">

          <tr>

                       <td>201호</td>

                       <td>202호</td>

                       <td>203호</td>

          </tr>

 

          <tr>

                       <td>주인집</td>

                       <td>주인집</td>

                       <td>주인집</td>

          </tr>

</table>

 

 건물 모양을 보여주기 위해 테두리를 입력했다. 테두리에 대한 부분은 추후 설명할 예정이니 우선 표 만들기에 집중하자. 3개 호수를 가진 2층 건물이 완성됐다. 한 개의 <table> 안에 두 개의 <tr>, 그리고 세 개의 <td>가 있는 걸 나타낸다.

 

이제 만들어진 건물에 여러 효과를 넣어보자.

다음글보기 

[문돌이의IT] 자주 사용하는 CSS속성으로 HTML 표꾸미기