테이블 태그로 블로그에 도표 만들기 응용

2020. 12. 17. 09:58 html과css공부

블로그 글을 쓸때 도표를 만들어 쓰면 간략 하고 간결 하게 전달 하고자 하는 내용을 전달 할수 있기 때문에 테이블 테그로 도표를 만드는 경우가 많습니다.

그리고 스타일 시트를 만들어 원격 주입방식으로 스타일을 주면 추후에 수정 또는 추가 하기가 용이 할뿐 아니라 문장을 간결하게 정리 할수 있습니다.

예를 들어 지난 시간에 2021년 새롭게 개정 되는 초경량 비행장치 멀티콥터 조종자 증명에 대해 포스팅을 하면서 드론의 무게에 따라 4등급으로 구분 해 조종자 증명을 취득 해야 한다는 내용과 항공 안전법규 위반 유형과 횟수별 범칙금의 금액 내용들을 전달 하면서 간단하게 표를 만들어 발행 했는데요

그냥 서술 형태로 나열 하는 것 보다 가독성과 이해력을 높혀 주지 않았나 싶네요

아래의 예제 테이블 처럼 만들기 위해 테이블 테그 코딩 하는 방법에 대해서 알아 보도록 하겠습니다.

예제1)

자격증 종류	구분
자격증 종류	중량	시험 과목	비행경력
1종 조종자증명	최대 이륙중량 25kg초과 무연료 중량150kg미만	학과시험+실기시험	20시간
2종 조종자증명	최대 이륙중량 7kg초과 25kg이하	학과시험+실기시험	10시간
3종 조종자증명	최대 이륙중량 2kg초과 7kg 이하	학과 시험	6시간
4종 조종자증명	최대 이륙중량 250g초과 2kg이하	온라인교육	없음

먼저 테이블 테그로 코딩을 해준후 스타일 시트를 만들어서 테이블을 꾸며 주면 되겠지요

<tbody>

<tr>
<td class="daad">1종 조종자증명</td>
<td class="daa">최대 이륙중량 25kg초과 무연료 중량150kg미만</td>
<td class="daa">학과시험+실기시험</td>
<td class="daa">20시간</td>
</tr>

<tr>
<td class="daa">2종 조종자증명</td>
<td class="daa">최대 이륙중량 7kg초과 25kg이하</td>
<td class="daa">학과시험+실기시험</td>
<td class="daa">10시간</td>
</tr>

<tr>
<td class="daa">3종 조종자증명</td>
<td class="daa">최대 이륙중량 2kg초과 7kg 이하</td>
<td class="daa">학과 시험</td>
<td class="daa">6시간</td>
</tr>

<tr>
<td class="daa">4종 조종자증명</td>
<td class="daa">최대 이륙중량 250g초과 2kg이하</td>
<td class="daa">온라인교육</td>
<td class="daa">없음</td>
</tr>

</tbody>

</table>

블로그를 가독성 있게 꾸미기 위해 스타일 시트는 하단에 만들 도록 합니다.

어떤 서버 에서 로그인 하는가에 따라 테이블 테두리와 셀이 한줄로 표기 되는 경우 와 테두리와 셀이 각자의 테두리를 가지는 경우로 나뉘게 됩니다.

그것은 서버에 기본으로 border-collapse:collapse; 속성의 장착 유무에 따라 달리 나타 나게 되겠지요

그래서 어디서 로그 되드라도 통일이 되도록 위의 속성을 스타일 해 주는게 좋을 듯 합니다.

이번 에는 항공법규의 위반 유형과 횟수에 따라 부과 되는 범칙금의 금액을 정한 도표 입니다.

예제2)

위반 유형	과태료 단위(만원)
위반 유형	1회	2회	3회
신고번호 미부착	10	50	100
말소 신고 미 이행	5	15	30
안전성 인증 검사 미 이행	50	250	500
조종자 증명 없이 비행	30	150	300
국토 교통부령의 장비 미부착 및 미소지	10	50	100
조종자 준수 사항 위반	20	100	200
사고 보고 누락 및 거짓 신고	5	15	30
비행 제한구역 불법 비행	20	100	200

코딩

<tbody>

<tr>
<td class="daa">국토 교통부령의 장비 미부착 및 미소지</td>
<td class="daa">10</td>
<td class="daa">50</td>
<td class="daa">100</td>
</tr>

</tbody>

</table>

아래의 테이블은 도표에 많이 쓰이는 기본적인 테이블 코딩 입니다.

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

필요에 따라 스타일 선언으로 모양을 만들어 주면 되겠습니다.

예제3)

1	1	1	1
1	1	1	1
1	1	1	1
1	1	1	1

만약 테이블의 모양을 변경 하고자 한다면 위의 코딩에서 아이디 선택자와 클래스 선택자의 네임을 아래 스타일에서 찿아서 필요한 스타일을 선언 해 주면 되겠지요

그럼 예를 하나 더 들어 최고 3단계 까지 정하고 있는 코로나 19에 대한 단계별 실행방안을 도표로 한번 만들어 보도록 하겠습니다.

가로 한칸을 가진 5블록의 셀을 가진 테이블을 만들어야 하니까

아래 처럼 코딩을 해줘야 겠지요

<tr>

</tr>

<tr >

</tr>

<tr>

</tr>

<tr >

</tr>

<tr >

</tr>

</table>

예제4)

1단계(생활속 거리두기)

1.5단계(지역적 유행 개시)

2단계(지역적 유행 급속 전파,
전국적 확산 개시)

2.5단계(전국적 유행 본격화)

3단계(전국적 대유행)

기분좋은 소식 업데이터 합니다.(2020.12.17)
국제 전기통신 연합(TU)에서 매년 발표 하는 정보통신기술(ICT) 발전지수 에서 2017 년 기준 한국은 아이슬란드를 이어 2위를 기록 했다고 하는데요 이 기록은 2017년 기준 이며 그 이후 집계 파악후 더욱 분발 한 대한민국은 더 좋은 성적을 기록 하게 될거라는 예상을 해봅니다.

그리고 이달 유럽 특허청(EPO)이 발간한 특허와 4차 산업 혁명-데이터 주도 경제를 가능케 하는 글로벌 기술 트렌드 2000~2018년 전세계 4차산업 혁명 기술관련 특허 출원을 조사한 결과를 집계해 발표 했는데요

한국은 전 세계 국가중 4차 산업 혁명 혁신성 측면에서 4차 산업혁명 관련기술IPF를 인구 백만명당 654개를 출원한 핀란드에 이어 대한 민국은 526개로 2위에 올랐으며

연구기관과 대학 중에서는 한국 전자 통신연구원(ETR)이 1위 한국 과학 기술원(KASIT)은 7위에 오르는 쾌거를 달성 해 전세계에 IT강국 4차 산업혁명 주도 국가 임을 증명하고 있습니다.

그리고 전세계 4차 산업혁명 특허 출원 글로벌 상위 10개 기업에서 대한민국의 삼성이 1위 LG가 3위에 올라 대한민국을 한없이 빛내 주었습니다. 아래 도표를 만들어 보았습니다.

4차산업혁명 특허 출원 세계 상위 10개 기업

4차 산업혁명 특허 출원개수와 글로벌 상위10개 기업
1위 삼성(한국) 12091개	2위 소니(일본) 6401개	3위 LG(한국) 6290개	4위 컬컴(미국) 6223개	5위 마이크로소프트(미국)4562개
6위 화웨이(중국) 4414개	7위 인텔(미국) 4412개	8위 노키아(핀란드) 4205개	9위 애플(미국) 3964개	10위 에릭슨(스웨덴) 3857개

스타일은 아래서 확인

<style>

예제1)

#tbm{border:1px solid gray; width:100%; height:auto; border-collapse:collapse;

}

#tbm .tdap{border:1px solid gray; width:20%; height:auto; background:orange; text-align:center;

}

#tbm .tdak{border:1px solid gray; width:auto;height:auto; background:yellow; text-align:center;

}

#tbm .tdam{border:1px solid gray; width:30%;height:auto; background:lime; text-align:center; text-align:left; padding-left:5px;

}

#tbm .tdama{border:1px solid gray; width:20%; height:auto; background:none; text-align:center;

}

#tbm tr .daad{border:1px solid gray; width:20%; height:auto; background:none; text-align:center;
}

#tbm tr .daa{border:1px solid gray; width:auto; height:auto; background:none; text-align:center;
}

예제2)

#tabl{border:1px solid gray; width:100%; height:auto; text-align:center; border-collapse:collapse;

}

#tabl tr .tdap{border:1px solid gray; width:40%; height:auto; background:orange; text-align:center;
}

#tabl tr .tdak{border:1px solid gray; width:auto;height:auto; background:yellow; text-align:center;
}

#tabl tr .tdam{border:1px solid gray; width:20%;height:auto; background:lime; text-align:center;
}

#tabl tr .daax{border:1px solid gray; width:auto; height:auto; background:none; text-align:left; padding-left:5px;
}

#tabl tr .daa{border:1px solid gray; width:auto; height:auto; background:none; text-align:center;
}

예제3)

#tbm{border:1px solid gray; width:100%; height:auto; border-collapse:collapse;
}

#tbm tr .tbma{border:1px solid gray; width:25%; height:auto; background:none; text-align:center;
}

예제4)

#tbl{border-top:2px solid gray; width:100%; height:auto; border-collapse:collapse;

}

#tbl .tbmb{border:1px solid gray; width:100%; height:70px; text-align:left; padding-left:5px; background:rgb(230,230,230);

}

</style>

포스팅에 맞도록 테이블 테그를 이용해 스타일 시트에 선언 해서 블로그를 꾸미는 방법을 알아 보았습니다.

감사 합니다.

저작자표시 비영리 변경금지

T,back: Comment:

공부 하는남자

테이블 태그로 블로그에 도표 만들기 응용

티스토리툴바

2024.4
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30