| ① TABLE 만들기 태그
기본태그는 다들 아시죠? 다시 말하면 tr은 열을 바꿔주고, td는 행을 나눠 줍니다. 그러나 table 만들기는 이제 시작입니다. 모양도 여러가지이고 편집도 다양하기 때문에 눈을 크게 뜨고 보셔야 해요~ ② 여러가지 TABLE 아래의 예제들을 보면서.. tr과 td를 이용해 어떻게 줄과 칸을 바꿨는지를 잘 관찰하세요. 그리고 두 개의 행(가로)을 합칠 때는 colspan="2"(고급편에 응용) 세 개의 행을 합칠 때에는 colspan="3"...(고급편에 응용) 두 개의 열(세로)를 합칠 경우에는 rowspan="2"(고급편에 응용)와 같이 넣어주면 됩니다.. 설명이 다소 좀 복잡하지만.. 아래의 태그명령어와 그림을 비교하면서 연습해 보세요.
| 첫째줄 첫째칸 |
첫째줄 둘째칸 |
| 둘째줄 첫째칸 |
둘째줄 둘째칸 |
| 첫째줄 첫째칸 |
첫째줄 둘째칸 |
| 둘째줄 첫째칸 |
둘째줄 둘째칸 |
| 첫째줄과 둘째줄의 칸을 합쳤어요. |
첫째줄 둘째칸 |
| 둘째줄 둘째칸 | 위의 칸 합치기에 대해선 고급 응용편에서 다시 다르겠습니다.
| 첫째줄과 둘째줄의 칸을 합쳤어요. |
첫째줄 둘째칸 |
| 둘째줄 둘째칸 |
③ 응용 TABLE 위에서 테이블의 가로/세로나누기에 대해서 배웠습니다. 이제, 이러한 테이블에 다양한 옵션을 넣어서 응용을 해 보겠습니다. 먼저 가로로 각기 다른색의 테이블 4개를 만들어 보겠습니다.
위와 같이 칸마다 다른색을 넣을수도 있고 (1과3)(2와4)번을 같게 또는 각 칸의 가로사이즈를 조절해서 만들수도 있습니다.
★이제 세로로 나누기입니다. 세로로 각기 다른색의 테이블 4개를 만들어 보겠습니다.
세로의 크기를 각기 다르게 응용해 보겠습니다.
어때요? 재미있고 신기하죠? 테이블의 가로 세로 나누기는 위와 같이 하시면 됩니다. ★★★주의할 점★★★ 가로로 나눌경우엔 세로의 크기는 200(임의)으로 일정해야 하고 반대로 세로로 나눌경우엔 가로의 크기가 400(임의)으로 일정해야합니다. (한마디로 수치를 바꿀수 없다는 말입니다) 오늘은 테이블의 가로/세로 나누기에 대해 배웠습니다.
다음 이 시간에는 테이블안에 테이블넣기 테이블 두 칸의 합치기등등
테이블만들기 고급편을 다루겠습니다. ★노파심에서 현재까지 태그야놀자를 제대로 이해하고 배우신 분이라면.. 자신의 내문서에 태그소스라는 이름의 메모장이 있어야합니다. 그 안의 내용엔 아래와 같아야 합니다. -------------------------------------------------------------------
<>
<>
border="" : 테이블 테두리(수치)
bordercolor="" : 테이블 테두리 색상(RGB색상)
cellspacing="" : tr과 td 사이의 간격(수치)
style="border-collapse:collapse;" : 테이블의 테두리를 하나로 만듬
bgcolor="" : 테이블의 배경색(RGB색상)
background="" 테이블의 배경이미지(이미지주소)
<>
테이블 4개적용.. 삭제하거나 추가할 수 있음
| | <>
테이블 4개적용.. 삭제하거나 추가할 수 있음