[코딩]표를 작성할 수 있어요! ③ - html 표 영역/캡션 태그
오늘 배울 내용의 주요 키워드를 먼저 정리해 봅니다.
#<caption>_표 제목 달기
#표 영역 나누기 #thead_표머리 #tbody_본문 #tfoot_꼬리말
#표 합치기 #<td colspan="숫자">_가로방향 합치기 #<td rowspan="숫자">_세로방향 합치기
이번 포스팅에서는
표 작성의 응용버전을 다뤄보도록 할게요!
먼저, html에서는 구조가 가장 중요하기 때문에 구조에 관한 것들을 잘 정리하고 갈게요!
간단히 표 제목 달고 가실게요!
지난번에 작성했던 시간표 html 문서를 불러와서 캡션 형태로 제목을 넣어 볼게요! <table> 바로 아래에 캡션 태그를 넣어 주시면 되어요!
- 기본형식
<caption>표제목or표설명</caption> - <table> 태그 제일 처음에 넣을 수 있음. 표 상단에 달 수 있음
다음과 같은 표는 어떻게 만들지 생각해 보아요!
합치기전 기본 틀 만들기 ==> 데이터 입력 ==> 기본 서식 적용 ==> 셀 합치기 ==> 기타 서식 및 크기 등 서식 다듬기
1) 기본 표를 만들도록 합니다
아직 셀합지기 태그는 모르기 때문에 , 3×8 표를 기본으로 틀을 만들어요.
- 기본 틀
<table>
<tr>
<td> 데이터_1행1열 </td>
...
</tr>
...
</table>
2) 각 셀에 데이터를 넣어요.
행 단위로 한 줄 옆으로 작업하시면 수월해요!
3) 실행해 보고, 구조를 파악하는데 필요한 속성 작업을 추가해요
- 표선을 넣을게요
- 표 전체 크기를 지정할게요
3) 캡션/머리/몸통/꼬리로 영역을 나눠 봅시다
이제 서식을 넣으면 되는데요, 각 셀마다 서식을 지정할 수 있지만... OTL...(너무 많아요ㅜㅜ) 영역을 지정해 놓으면 영역별로 동일한 서식을 넣을 수 있다는 사실! 표가 길어질 수록 유용하다 하시네요!
구조를 잡는 게 중요하니까, 다음의 태그를 이용해서 캡션/몸통/꼬리 영역을 지정하는 태그를 작성해 주겠습니다.
- <caption> ; <table> 태그 바로 아래 열고 닫기
- <thead>,<tbody>,<tfoot> ; 시작하는 첫행 <tr> 태그 위에서 열고 끝나는 행 </tr> 태그 아래 닫기
4) 영역별로 정렬과 배경색 속성을 넣어 줄게요!
Tip!) 영역을 지정하지 않았다면, 8줄의 <tr> 태그에 속성을 전부 넣어주었어야 해요!
- align="정렬"
- style="background-color:색이름"
5) 글자 속성을 지정하고 갈게요!
- 표의 헤드가 될 만한 곳에는 <th> 태그
- 나머지는 글자에 <b> 태그를 사용
5) 셀끼리 합칠 수 있는 속성을 넣어 볼게요!
- 1행 1열에서 가로합치기 3칸 필요
- 6행 1열에서 세로합치기 3칸 필요
합쳐지기 시작하는 첫 셀 <td> 태그 안에 속성을 넣어 줍니다. 그리고, 합쳐지는 셀 <td></td> 들을 지워 줍니다!
- colspan="합치는 개수" ; 가로로 합치기
- rowspan="합치는 개수" ; 세로로 합치기
6) 실행하여 확인합니다
<table> 태그에 주었던 높이 속성 대신에 표 머리/몸통/꼬리 영역별로 높이를 따로 지정해 주었어요!
우아~! 이제 복잡한 표들도 html로 충분히 만들 수 있게 되었어요! 어느새 저리 복잡한 태그들을 사용할 수 있게 되었어요!
구조를 먼저 잡고 들어가 살을 붙이는 방식으로 하니, 수월한 것 같네요!
여기까지,
지난했던 표태그 포스팅을 마칩니다!
감사합니다!