[티스토리] HTML을 이용하여 Table 다루기

HTML을 사용하여서 테이블을 등록하는 방법에 대한 정리중

특정 주식에 대한 재무정보를 테이블로 표기하려고 하다보니, 다양한 문제를 접하게 됨

간단히 내용만 정리하면서, 다양한 케이스에 대한 테스트를 해보는 것이 좋겠다

우선 간단히 html 만 사용해서 table을 직접 만들어 보자

원하는 테이블이 잘 만들어진 것처럼 보이나, 문제가 있다

모바일로 봤을 경우는 테이블이 적당한 비율로 줄어들어서 한번에 조회되지 않는다

좌우로 표 스크롤을 통해서 확인을 해야하는 번거로움이 발생한다

문제는 width

	2013.12	2014.12	2015.12	2016.12	2017.12
매출액	1234	1234	1234	5678	9012
영업이익	1,234	1,234	1,234	5,678	9,012
순이익	1234	1234	1234	5678	9012

문제는 width

<table align="center" width="600px">

테이블 속성에 width 값이 있는데, 그것이 테이블이 자동으로 줄어들지 못하게 한다

테이블 속성중에 width를 지우면, 모바일에서도 딱 그 크기에 맞도록 나올 수 있다고 함

내가 만들어야 할 테이블에서도 width 값은 넣지말도록 하자!!

< width 값 삭제 이후 >

	2013.12	2014.12	2015.12	2016.12	2017.12
매출액	1234	1234	1234	5678	9012
영업이익	1,234	1,234	1,234	5,678	9,012
순이익	1234	1234	1234	5678	9012

한줄에 대한 속성을 한번에 설정할 수 있으나, 한개의 속성을 바꾸려면, 각각 설정해줘야 한다

- align을 각 각 설정해줌

이런 식으로 각 라인별로 속성 설정이 가능함   

<tr align="center">   ,   <tr align="right">

한 라인에서도 문자는 가운데 정렬, 숫자는 우측 정렬 형태로 표현하고 싶은 경우가 있음

각 <td> 별로 right, center 값을 사용해서 align 속성을 지정해줘야 한다

- 우측 정렬을 위해서 <td align="right">

- 가운데 정렬을 위해서 <td align="center">