html 표만들기 td,tr,table 태그 알아보기

표만드는이미지

웹문서 표만들기

html 표만들기는 문서를 작성하는 데 있어서 필요한 태그 기능 중 하나라고 할 수 있다. 보통 오피스 프로그램의 엑셀로 비유하자면 가로는 "행" , 세로는 "열"이라 부르며 , 한 칸 한 칸을 "셀"이라고 부르기도 한다. 어찌 되었든 "셀"의 경우에는 잘 생각해보면 가로선과 새로 선이 만나 생기는 것을 알 수 있듯이 html 표만들기의 경우에도 이와 동일하게 가장 먼저 "행"과 "열"에 대해서 숙고하고 진행하는 것이 좋다. 

 

tag

html 표만들기 이전에 3개의 행과 3개의 열로 구성된 표를 작성한다고 가정해본다. 기본적인 표로써 이때에 사용되는 태그의 경우에는 td, tr, table 총 3가지를 들 수 있고 , 여기에 추가로 th까지 생각해 볼 수 있다. 그 외 여럿 언어들이 존재하지만 일단 여기에 있는 기능을 파악을 해본 뒤 알아보는 것도 늦지 않다.  

 

기본토대

html 표만들기의 기본 토대는 위의 이미지와 같다. <tabel> 태그로 시작하고 닫아준다. 여기서 참고해야 하는 점은 표를 만들 때 가장 먼저 세로 칸을 먼저 만들어주어야 하는데 그 역할이 <tr>가 해준다. 위의 이미지처럼 tr 태그를 3개를 작성하는 경우에는 세로로 3칸을 만들겠다는 뜻이며 2칸을 만들고 싶다면 <tr> 태그 하나를 지워주면 되는 것이다.

 

table

td 태그의 경우에는 가로역활을 한다. 그렇기 때문에 tr 사이에 들어간다. 이 또한 마찬가지로 각각 3개의 tr 사이에 td 태그가 들간 것을 볼 수 있다. 세로로 3칸을 만들고 각 줄마다 가로 3칸을 추가로 만들어 총 9칸을 가진 html 표만들기를 시작하겠다는 의미와 같다. 그럼 세로 가로가 각각 4칸으로 구성된 html 표만들기는 어떻게 해야 할까? 바로 tr을 먼저 4개를 구성한다. 그럼 세로가 4칸이 되었으니 각각의 tr태그 사이에 td를 4개씩 넣어주면 총 16칸의 표를 만들 수 있다.

 

결과1

html 표만들기와 관련된 마크업이 끝난 후 저장하고 FTP 프로그램을 통해 서버에 업로드하게 되면 위와 같은 결과가 나오는데, 표라고 부르기에는 경계선이 없어서 애매모호하다. 우리가 흔히 사용하는 엑셀처럼 경계선을 뚜렷하게 나누어 가독성을 높이고자 한다면 가장 위 <table> 사이에 border="1" 또는 border="2"를 넣어주면 된다. 

 

작업이 완료된 결과물

이처럼 가장 윗부분에 border을 넣어준다면 , 오른쪽의 이미지처럼 깔끔한 표가 나오는 것을 알 수 있다. 이로써 가장 기초적인 html 표만들기에 필요한 td, tr, table에 대해서 적어보았는데, 가장 윗부분에서 언급했듯이 추가로 th까지 생각해볼 수 있다. 우리가 이전 포스팅에서 문서를 작성했을 때 대제목과 소제목을 나누는 것을 h기능으로 활용한 적이 있는데, 바로 그것과 동일하다고 볼 수 있다. 표가 구성하고 있는 셀의 폰트를 제목 폰트처럼 바꿔주는 것이 th 태그이며 이 언어는 가로처럼 tr 사이에 td 대신 응용하면 된다.