html/css Table 코딩할때 힘들게 하지말고 간편하고 쉽게 하는방법!!

안녕하세요! 핫뷰입니다.

 

오늘은 html/css "table" 을 "Tables Generator" 사이트를 이용해

쉽게 만드는 방법을 알려드릴려고합니다!

 

 

시작에 앞서 간단하게 <table> 태그에 쓰이는 [ th , tr , td] 의미를 요약해드리자면,

 

<th>##</th> : Table Head 의 약자로, 표의 제목을 역할 (굵은 글씨, 중앙 정렬)

<tr>##</tr> : Table Row 의 약자로, 가로줄을 만드는 역할 (보통 글씨, 왼쪽 정렬)

<td>##</td> : Table Data 의 약자로, 셀을 만드는 역할 (보통 글씨, 왼쪽 정렬)

 

이제 table 코딩을 시작하러 가볼까요?! 

먼저 "Tables Generator" 으로 이동해주세요!

↓↓↓↓↓↓

http://www.tablesgenerator.com/html_tables

HTML Table generator - TablesGenerator.com

 

"Tables Generator"로 이동을하면 HTML Tables Generator 라는 제목이 보일겁니다.

여기서 저희가 알아야할 부분은 <Table, Column, Cell> 3가지만 알고있으면됩니다.

 

Table 메뉴에서는 HTML Table 사이즈를 설정할수있습니다. 

원하시는 사이즈대로 마우스로 늘리거나 줄이시면 됩니다.

 

 

Column 메뉴에서는 Text align 기능이 있는데요,

글자를 왼쪽, 중앙, 오른쪽 원하시는 방향으로 정렬을 할 수 있습니다.

 

 

Cell 메뉴에는 Table 셀들을 합치는 것과 분리하는 기능을 사용 할 수 있습니다.

 

 

저는 성적표를 예시로 만들어 보았는데요,

영어,한글도 지원하고 있으니 걱정 안하셔도 됩니다.

다 채우셨으면 "Generate" 버튼을 눌러줍니다.

 

그러면 아래 "Result" 창에 처음에는 비어있던 내용들이 제가 위에서 작성햇던 값 그대로 변환한 코드를 보여줍니다.

코딩이 제대로 됐는지 확인을 위해 "Preview"를 누르면 table을 볼수 있구요,

확인이 끝났으면 우측 상단에 있는 "Copy to Clipboard"를 눌러주신다음

진행하시던 코딩에 "Ctrl+v"를 눌러 붙여넣기를 해줍니다.

 

 

 

아래 코드는 "Copy to clipboard" 눌러 붙여넣기를 한 결과인데요!

원래대로라면 하나하나 <table> 태그안에다가 <th>,<td>,<tr>을 쓰면서 머리를 지끈거릴텐데

table을 이렇게 쉽게 만들 수 있는걸 여러분에게 알려드리고자 소개시켜드렸습니다.

                                                            

No	수학	국어	역사
1	98점	70점	99점
2	80점	60점	75.5점

 

 

다음에는 누구나 쉽게 홈페이지를 만들 수 있는 소스를 가져오겠습니다.