html 표만들기(html table tr td, colspan, rowspan) 입니다
html 에서 아직 까지 많이 사용되는 코드가 바로 표만들기 즉 테이블 인데요. 표준 코드로 인해 div 코드를 사용한다고 하지만 css를 모르면 어려운 입문입니다. 웹표준을 사용한다고 하더라도 기본인 html 표 만들기는 알아야 합니다.
이번 시간은 html 표만들기 방법을 알아보겠습니다.
html 전혀 어렵지 않습니다.
전 어려운걸 싫어 합니다. 쉽고 무식하게 설명드리겠습니다. ^^
표란 행,열 이런것이 나오죠.
그냥 줄, 칸이라고 할께요
html 에서 표 만들기 위해선 <table> 이란 코드를 이용합니다.
<table>표만들기 : 표를 만들꺼야 준비해~~!
<tr> 줄만들기 : 이제 첫번째 줄을 만들꺼야.~!
<td> : 칸만들기 : 칸에 들어갈 내용 입력
입니다.
이렇게 3 개의 코드가 한세트 입니다.
결과를 보면 표가 한줄 한칸이 생성되어 있습니다.
이제 칸하나를 더 추가해 보겠습니다.
<td>내용</td> -->이렇게 한세트인데 하나더 추가해서 2번이라고 입력해보겠습니다.
표 만들면 기본 선이 보이지 않기 때문에 border=1 을 입력해서 선을 보이도록 한겁니다.
결과를 보면 줄하나가 생성되고 2번이 추가되었습니다. 쉽지요?^^
이제 줄을 늘려보겠습니다.
<tr> 이 줄이라고 했는데요 <tr>을 하나더 만들면 줄이 추가 됩니다.
아래 블럭 지정한대로 복사해주세요
밑에 붙여넣기 합니다.
<tr>만 있으면 아무 소용이 없어요
이렇게 추가하고 내용을 3번 4번으로 변경합니다.
브라우저로 보면 2번째 줄이 추가되었습니다.
이런식으로 확장해가시면 됩니다.
표에 넓이를 지정할 수 있습니다. width : 넓이, height : 높이를 픽셀단위로 지정합니다.
브라우저로 보면 지정된 크기 만큼 늘어났습니다.
이제 칸을 하나로 합쳐 볼까요?
엑셀기능 중 셀 병합이라고 생각하시면 됩니다.
두번째 칸인 2번을 지우고
첫번째 <td>에 colspan="2" 를 추가합니다.
오~ 병합이 잘 되었습니다.
이번엔 줄을 병합해보겠습니다.
3번을 지우고 (주석처리함) 첫번째 <td>에 rowspan="2" 를 추가합니다.
1번과 3번이 합쳐졌습니다 ~
어렵지 않지요. 이런식으로 표를 늘려주고 합치면 됩니다.
이상 html 표만들기를 알아보았습니다. 도움이 되었나요?
