Table Study - 본 화면은 1024 x 768 이상에 최적화되어있습니다.

"Table 이것이 기본이다."

Step 1 닫기>>
신나고 재미있는 테이블의 세계에 온 것을 환영한다. 테이블(표)을 알면 html의 핵심을 모두 배웟다고 해도 과언이 아니다?(아마도) 그렇다고 어려운 것도 아니다. 최근에는 테이블은 페이지 로딩에 느리다 하여 div를 써 가는 추세지만 table은 두뇌회전에도 좋다?(아마도) 아무튼 Table을 배워보자! 테이블의 태그의 기본 구조는 다음과 같다. ========================================= <table> <tr> <td> </td> </tr> </table> ========================================= 여기서 <table>은 말 그대로 하나의 테이블(표)를 의미한다. <tr>은 행을 의미한다. <td>은 열을 의미한다. <tr>과 <td>의 조합으로 최소한의 한 칸이 만들어진다. 칸 안에 내용을 써넣기 위해서는 반드시 <td></td> 사이에 써야한다. 실제로 표를 만들어봐야 머리속에 새겨진다. 메모장 등을 통해 HTML 문서를 작성한다. 아래의 소스를 '직접 손으로' 쳐야 한다. (복사하지 말것 -_-) ========================================= <table> <tr> <td> Hello Table! </td> </tr> </table> ========================================= 작성을 다 했는가? 이상하게도 분명히 표를 만들었음에 불구하고 'Hello Table!' 글자밖에 보이지 않는다. -_-; 그렇다. 그냥 표를 만들어서는 테두리가 나타나지 않는다! 보이지는 않아도 표는 존재하고 있지만 뭔가 억울하다. <table>에 속성(attribute)을 건들여 테두리를 만들어보자! 기존의 <table> 란에 다음과 같이 추가한다. border='1' 당부컨데, <tableborder='1'> 이라던지 <table>border='1'이라고 써서는 안된다 -_-;;;;;;;;;; 친절한 선생님이 답을 알려주겠다. 잘 따라하도록! 답 : <table border='1'> 이렇게 추가 후 저장하고 새로고침 하면 아래 결과처럼 촌스러운 테두리가 하나 생긴다!(짝짝짝) 호기심이 많은 어린이라면 border값을 조절해볼 것을 권하며, Step2로 넘어가자! ^^ 아!! Step 1을 닫고 넘어가야 보기에 편하다! 닫고 넘어가세요~ >ㅅ< =========================================

Hello Table!

=========================================

Step 2 시작>>

Step 2 닫기>>
Step 2에 접어들어 '돌맹이(Level 1)' 를 탈출하여 '갓난 애기(Level 2)'이 되신 것을 환영한다. 테이블은 <table></table>로 구성되며 행은 <tr></tr> 열은 <td></td>로 구성된다는게 사실 테이블의 전부다. 이제 그것들을 이용해 자유자제로 내가 원하는 행과 열을 만들어 볼 차례! 1x1 테이블은 지난시간에 만들어봤다! 그럼 아래와 같은 2x2 테이블은 어떻게 하면 만들어질까? =========================================

1.1	1.2
2.1	2.2

========================================= 답을 보기전에 우선 자신의 생각대로 해 보자. 명심할 것은 <td></td> 사이에 내용을 넣지 않으면 기본적으로 사이즈가 0가 되어버리기 때문에 표인지 무엇인지 알아볼 수 없다 -_-) 많은 시행착오를 거쳤는가? 그러면 너는 아래의 답을 볼 자격이 있따! ========================================= <table border='1'> <tr> <td>1.1</td><td>1.2</td> </tr> <tr> <td>2.1</td><td>2.2</td> </tr> </table> ========================================= 소스설명) tr은 하나의 행을 의미하고, td는 하나의 열을 의미한다. <tr></tr>사이에 여러개의 td가 들어가면 그것은 곧 여러개의 칸(열)이 된다. 새로운 열을 추가하려면 곧 <tr></tr>을 추가해서 새로 만들면 되겟지? 얼떨떨한가? 그러면 몇개 더 해보도록 하자. =========================================
1x2

1.1

1.2

=========================================

=========================================
2x1

1.1

2.1

========================================= 위 둘의 차이는 뭘까? 1x2는 하나의 <tr></tr>에 두개의 <td></td>가 들어간다. 2x1은 두개의 <tr></tr>에 하나의 <td></td>가 각각 들어간다. 표의 사이즈를 자유자제로 만드는 것은 table에 있어서 가장 중요한 것이다. 연습을 통해 반드시!! 마스터 하고 Step 3으로 넘어 가도록 하자 -_-!! 가기전에 Step 2 닫고 가야하는 것 잊지말자 >ㅅ<

Step 3 시작>>

Step 3 닫기>>
Step 2를 잘 넘겼다면 너는 이제 '갓난 애기(Level 2)'에서 '오스트랄로 피테쿠스(Level 3)' 로 성장했다는 것을 의미한다. 그렇다 아직 미개인 수준이다. Step 2에서 사이즈를 가지고 놀다보면 문득 이런 생각이 들 수 있다. '한글에서는 셀 합치기라는게 있던데.. 과연 table에도 칸을 합칠 수 있을까?' 그렇다. 사실 전혀 이런생각 안드는게 보통이다. -_-) table을 연습하는 과정에 tr과 td를 만지다보면 간혹 이상한 칸이 만들어질 수 있다. 예를들어? =========================================

1.1	1.2
2.1

========================================= 이런 표 말이다. 의도는 분명 아래쪽 행의 칸들을 합치고 싶었던것 같다. 그러나 아쉽게도 2.2의 칸이 공란이 되어있을 뿐이다. 합쳐지지는 않았다. 위의 표 소스는 이렇다. ========================================= <table border='1'> <tr> <td>1.1</td><td>1.2</td> </tr> <tr> <td>2.1</td> </tr> </table> ========================================= table에서는 모든 열에 대해 td의 개수가 동일하여야 올바른 표가 만들어 진다. 만약 그러하지 않다면 위와 같이 공란이 생기게 된다. 그렇다면 셀합치기는 영영 불가능 한 것인가? ㅠㅠ 그것은 tr과 td의 속성값을 통해 가능하다! 바로 colspan, rowspan이다. colspan은 칸(열)을 합친다(늘인다) rowspan은 줄(행)을 합친다(늘인다) 위에 잘못된 표를 올바르게 만든 것은 아래와 같다. =========================================

1.1	1.2
2.1

========================================= 아래는 이에 대한 답이다. ========================================= <table border='1'> <tr> <td>1.1</td><td>1.2</td> </tr> <tr> <td colspan='2'>2.1</td> </tr> </table> ========================================= colspan이나 rowspan은 해당하는 칸이나 열의 개수를 정확히 알고 있어야 정확한 표를 만들 수 있다. 예를 들어 윗 줄에서는 td가 3개 였는데, 아래 줄에서 colspan으로 2개만 합친다면 여전히 한칸이 공란이 되어있을 것이다. rowspan에 대해서는 별도의 설명을 하지 않겠다. 사용방법은 colspan과 동일하다. 늘 칸의 개수가 몇개인지 잘 생각해야 한다. Step 3의 수료를 마치려면 아래의 문제들을 풀어보도록 하자 -ㅅ-+ 늘 하는 말이지만 소스는 매번 처음<html>부터 </html>까지 손수!! 다 써보도록 하자. 문제가 3개면 문서도 3개가 나와야 한다!. 처음하는 사람일수록 늘 반복하는 습관을 기르자. =========================================
1번문제

1.1	1.2	1.3
2

=========================================
=========================================
2번문제

1.1	1.2
	2.2

=========================================
=========================================
3번문제

1.1	1.2	1.3
2.1	1.2	2.3

=========================================
=========================================
아주 조금 골때리는 문제

1,2.1	1.2	1.3	1,2.4
	2

=========================================

Step 4 시작>>

Step 4 닫기>>
축하한다. 너는 이제 '오스트랄로 피테쿠스(Level 3)'을 벗어나 '굴어 들어온 돌이 박힌돌 뽑아낸다:중수(Level 4)'에 진입하고 있음을 알린다. ^^ 무언가 삘(feel)이 오는가? 그렇다. 만약 step 3을 잘~ 수행했다면 사실 table의 거의 모든 것을 안 것이나 다름 없다. 이제부터 배울 것은 기교다. 이제까지는 Table을 만들기는 했지만, 무언가 마음에 차지 않았을 것이다. 그저 글자의 크기에 맞게 칸의 크기가 고정되는 수준이었다. 자~ 그럼 크기가 조금 큰 표를 만들어 보자!! 만들어 볼 표는 아래와 같다. =========================================

1,2.1	1.2	1.3	1,2.4
	2

=========================================
에구 표를 조금 크게 했더니 === 을 삐져나가버렸다. -_ㅠ; 어디서 많이 본 표다? 그렇다. step 3에서 너를 괴롭혔단 바로 그 표다.==ㅅ==;;;; 이러한 크기는 다음과 같은 속성에 값을 지정해줌으로서 변경이 가능하다. width (너비) height(높이) 참고로 위 두 속성은 많은 태그에 공통적으로 가지고 있다. 잘 기억해두자. 위 두 속성은 table, tr, td 모두 줄수 있다. table에 주면 전체적인 크기에 영향을 주고 td에 주면 그 해당 칸에 영향을 주겟지? (위 표는 <table width=500 height=300>의 값을 준 것이다. ) width와 height는 픽셀 값이나 퍼센테이지로 줄 수 있다. 예를들어 width='100'으로 준다면 그 단위는 px(Pixel)이다. 또 다르게 width='50%'으로 준다면 그 단위는 익스플로러 크기의 %로 나타난다(가변적) 퍼센테이지 값을 주는 것은 직접해보기 바란다. 예를 들지 않겠다. 또한 <table><tr><td>에 각각 따로 적용시켜 어떤 차이점이 있는지 직접 확인해보기 바란다. 차이점을 보다 명확히 알려면 최소한 2x2 이상의 테이블 사이즈로 확인하자~>ㅅ< 이렇게 Step 4를 마치자...니 너무한게 없다. 조금 더 배워보자. 내맘대로 Step 4.5!! 표에 배경색을 넣어보자!! 표에 배경색을 넣는다면 어떻게 될까? 아래와 같다 -ㅅ-(갈수록 심플해지는 군...) =========================================

1,2.1	1.2	1.3	1,2.4
	2

=========================================
표가 이쁜 병아리 마냥 물들었다..! >ㅅ< table에 아래와 같은 속성값을 추가한 것이다. bgcolor='yellow' bgcolor(BackGround color)기본 값은 투명이다. 따라서 tr, td에 색을 넣음으로서 좀더 유연한 색조정이 가능하다! 또한 속성값의 지정방법은 두가지가 있다. 하나는 위와 같이 정해진 색상의 명을 넣어주는 것. 색상명이 없다면 기본값으로 맞춰진다. black, white, silver, green, yellow, pink, red, orange...등 많다. 더 세부적인 색상을 줄 수 있는 또하나의 방법이 있는데 그건 RGB코드를 직접 쓰는 것이다. #000000 부터 #FFFFFF으로 되어있다. #은 별 의미없고 숫자는 두개씩 떼어서 R, G, B를 의미한다. 16진수로 구성되어있따. 000000은 아무색도 안주는 거니까 검은색, FFFFFF는 강렬히 모든색을 쬐어주기때메 흰색이다. 아래와 같은 표를 만들어보자! 답은 여러개일 수 있다. 따라서 조건을 달아주겟다. =_=+ bgcolor라는 속성(키워드)을 4번만 쓸 것. 참 간단하죠? >ㅅ< 글자색까진 따라하지 않아도 좋습니다. =========================================

1,1	1.2	1.3
2.1	2.2	2.3
3.1	3.2	3.3

=========================================
여기까지 배웟다면... 더이상 내가가르칠게 없..진 않지만 제법 많은 것을 배운것 이다... 금방 배우는 것은 금방 잊는 법. 반복 학습만이 살길이다. Step 5는 다음에 짬이 나는대로 만들도록 하지. 그럼 이만.