table태그로 테이블을 만들고 style 로 꾸며 보자.

2014. 8. 21. 15:03 html과css공부

table 태그로 table만들고 style 로 꾸미기

지난 시간에 이어 이번 시간에는 우리가 블로그나 홈페이지에 포스트를 게재 할때
자주 사용 하는 table박스 만드는 법과 박스를 좀더 이쁘게 스타일로 꾸며 보는 방법에 대해 공부 해 보기로 합니다.

우선 테이블을 꾸미는데 필요한 자료를 알아 보겠 습니다.
음식으로 치면 주 소재가 되는 <table> 시작 태그가 있어야 겠지요
그리고 닫는태그 </table> 가 필요 합니다.

그리고 테이블의 바디를 제어 하는 바디 태그 한쌍
<tbody> </tbody> 이 필요 하구요

그리고 테이블 테그에는 width 넓이를 정하는 속성 엘리먼트
height 높이를 정하는 속성 엘리먼트 가 있어야 합니다.

<tr> 태그와 <td> 태그

<tr> 태그는 테이블 바디 안에서 셀의 블록 즉 가로로 만들어진 칸 들을 tr갯수 만큼 아래로 줄을 생성 해주는 태그이며 하위 태그 인 <td> 태그의 시작 과 끝을 결정 해 주는 태그 입니다.

<tr> 열림 태그와 </tr> 닫힘 태그 한쌍 으로 이루어 집니다.

<tr> 태그는 셀의 블록 즉 가로줄의 수를 아래로 생성 해 주는 요소를 가지고 있습니다.

<td> 태그는 한줄에 td갯수만큼 가로칸을 만들어 주는 태그 입니다.

<td> 열림 태그 와 </td> 닫힘 태그 한쌍으로 이루어 집니다.

그럼 이런 테이블의 요소 와 속성 들로 가장 기본이 되는 틀을 한번 만들어 봅니다.

우선 테이블이 가지는 요소와 하위 태그들 만으로 만들어 보겠습니다.

<table>

<tbody>

<tr>

<td>테이블 만드는 방법</td>

</tr>

</tbody>

</table>

결과)

테이블 만드는 방법

속성 값을 주지 않은 가장 기본 요소와 태그 들로 구성 한 모습 인데요

형태도 없는 내용 물만 출력 된다는 걸 알수 있겠습니다.

비록 테두리 선이 없지만 테이블 인 것 은 확실 합니다.

이렇게 테두리가 없는 테이블은 주로 이미지를 배치 할때 사용 하게 됩니다.
이번엔 테이블의 속성 으로 형태를 갖추기 위해 속성값 을 줘 봤습니다.

<table style="width :200px; height:100px; border:1px solid gray;">

<tbody>

<tr>

<td>테이블 만드는 방법</td>

</tr>

</tbody>

</table>

테이블 만드는 방법

이렇게 속성 width 와 height 그리고 border 속성 태그들 로 속성 값을 주니까 기본 형태를 갖추게 되었 네요

그런데 왠지 아직도 좀 불완전해 보입니다.

그렇죠 콘텐츠가 한쪽 벽에 달라 붙어 있죠 그래서 이럴때는 스타일로 테이블을 정리 해 줘야 겠죠

여기에 쓰여지는 속성이 align 속성 입니다.

위치를 결정 하는 속성 엘리먼트align 에 center 라는 속성값을 주어 테이블을 이쁘게 꾸며 봅니다.

<table style="width :200px; height:100px; border:1px solid gray; text-align:center;">

<tbody>

<tr>

<td>테이블 만드는 방법</td>

</tr>

< /tbody>

</table >

자 이렇게 스타일을 주어 내용물의 위치를 테이블의 중앙에 배치 하니까 훨씬 깔끔 하지요

테이블 만드는 방법

위에서 본 것 처럼<table style="width :200px; height:100px; border:1px solid gray; text-align:center;">

이렇게 태그에 직접 스타일을 주어 꾸미는 직접 주입식 스타일 방식 과 간접적으로 스타일을 주는 outline스타일 방식 이 있습니다.

우선 태그에 직접 스타일을 주는 방식으로 꾸며 보고 진도를 나아 가면서 스타일 시트에서 스타일을 주는 코딩을 해 보도록 하겠습니다.

아래는 태그내에 직접 스타일을 주는 방식의 코딩 으로 아래와 같이 코딩을 했을 경우 와 결과를 보도록 합니다.

스크롤이 되도록 작성 했습니다.

실제 코딩 할때는 tr다음의 숫자는( tr1,tr2... )기입 하면 안되겠지요

제가 임의로 부여한 숫자 입니다.

위에서 보시는 바와 같이 너무 복잡 하고 많은 공간을 차지 해서 스크롤 박스 안에 정리 를 해 주었습니다.

만약 모두 펼쳤다고 생각 해 보면 매우 복잡 하게 느껴 지겠지요

아래는 결과 입니다.

1-1 1-2		1-3	1-4
2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4

위의 결과에서 4칸의 가로칸들 4줄이 아래로 주욱 생겨 난 것을 확인 할수 있습니다.

즉 tr태그가 4번 코딩 되었음을 알수가 있습니다.

그리고 tr 태그 하나에 td태그가 네개가 코딩 되었다는 것도 확인 할수가 있습니다.

그런데 첫번째 1번칸은 다른 칸 보다 두배의 크기라는 것을 알수 있습니다.

이 것을 가능케 하는 속성을 줬기 때문 이죠

바로 colspan이라는 속성 엘리먼트 입니다.

colspan을 할 경우 colspan하는 갯수 만큼 td갯수를 줄여 줘야 합니다.

<td align="center" colspan="2"....>이런식으로 코딩 해주고 colspan="2"일때는

같은 tr태그 안의 td태그 하나를 제거 해 주고 colspan="3"일 경우

td태그를 2개를 제거 해주면 됩니다.

만약 1번에 가로 칸이 아닌 세로 칸 두개를 하나로 만들고 싶을땐 rowspan 엘리먼트로

table 태그 안에 아래 처럼 코딩을 해 주면 됩니다.

<table>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

rowspan을 줄 때 역시 하위 tr 블록의 td 태그를 스판 되는 갯수에서 자신을 뺀 갯수 만큼 제거 해 줘야 합니다.

위의 경우  이렇게 주석 처리를 하거나 주석 처리된  테그들을 제거 해주면 되겠지요

아래는 결과 입니다.

1-1 2-1	1-2	1-3	1-4
1-1 2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4

만약

아래 와 같이 코딩을 한다면 어떻게 될까요?

<table>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

1-1	1-2			1-3	1-4
1-1	2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4

위의 결과는 바라는 모양이 아니 겠지요

<table>

<tbody>

<tr>

<!--<td>1-3</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

위 처럼 주석 처리를 함으로 제대로 된 모양을 만들 수가 있습니다.

아래는 결과 입니다.

1-1 2-1	1-2 1-3 1-4
1-1 2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4

table 태그로 table만들고 스타일 시트로 style 꾸미기

위의 코딩들은 테그들을 보기 쉽게 정리한 모습으로 정리를 한 것이지만 실제 코딩의 모습은 직접 주입 방식으로 스타일 선언을 한 코딩이라 위 스크롤 박스 처럼 모든 테그에 반복적으로 스타일을 주기 때문에 상당히 복잡 하고 난해 합니다.

우클릭 소스 보기를 해 보면 엄청 난해 하게 보입니다.

그러나 스타일 시트를 이용한 outline 방식으로 스타일 선언을 하게 되면 간단 하게 아래 처럼 코딩을 할수가 있습니다.

티스토리의 경우 메인 스킨에디트와 짝을 이루는 스타일 시트가 있습니다.

보통 자신의 홈스킨을 꾸미는 작업을 할때 사용 합니다.

이렇게 글쓰기 도중에 테이블을 만들경우엔 글쓰기 에디터를 이용 하면 됩니다.

에디터의 바디부 어디든 상관 없이 html 모드 전환 후 <style></style>태그를 사용해 스타일시트를 만들고 스타일을 주면 코딩에 바로 스타일이 적용 됩니다.

자 그럼 우선 스타일 시트를 먼저 만들고 스타일을 줘 보도록 하겠습니다.

<style>

div,p,b,br,span{font-size:14pt; font-family:'Malgun Gothic', sans sirfe; line-height:1.7; font-weight:light;

}

.tablp{width:90%; height:auto; text-align:center; cellpadding:5px;cellspacing:5px; border-collapse: collapse; border-spacing: 0px; max-width: 100%; color: rgb(0, 0, 0); font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif; font-size: 16px; line-height: 32px; border: 1px solid red;

}

.tablp .td0{width:50%; height:auto; text-align:center; cellpadding:5px;cellspacing:5px; border-collapse: collapse; border-spacing: 0px; max-width: 100%; color: rgb(0, 0, 0); font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif; font-size: 16px; line-height: 32px; border: 1px solid red;

}

.tablp .td1{width:25%; height:auto; text-align:center; cellpadding:5px;cellspacing:5px; border-collapse: collapse; border-spacing: 0px; max-width: 100%; color: rgb(0, 0, 0); font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif; font-size: 16px; line-height: 32px; border: 1px solid blue;

}

.tablp .td2{width:25%; height:auto; text-align:center; cellpadding:5px;cellspacing:5px; border-collapse: collapse; border-spacing: 0px; max-width: 100%; color: rgb(0, 0, 0); font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif; font-size: 16px; line-height: 32px; border: 1px solid rgb(230,20,10);

}

.tablp .td3{width:25%; height:auto; text-align:center; cellpadding:5px;cellspacing:5px; border-collapse: collapse; border-spacing: 0px; max-width: 100%; color: rgb(0, 0, 0); font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif; font-size: 16px; line-height: 32px; border: 1px solid orange;

}

.tablp .td4{width:25%; height:auto; text-align:center; cellpadding:5px;cellspacing:5px; border-collapse: collapse; border-spacing: 0px; max-width: 100%; color: rgb(0, 0, 0); font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif; font-size: 16px; line-height: 32px; border: 1px solid rgb(230,0,150);

}

.stals{width:auto;height:400px;border:1px solid blue; white-space:nowrap; overflow:scroll; padding:7px;

}

</style>

이제는 코딩을 해줘야 겠지요

아래 예제들은 table태그를 이용해 코딩한 소스 입니다.

이때 위 스타일 시트에서 원격으로 스타일을 주었기 때문에 코딩 하고자 하는 태그의 id명 이나 class명을 위 스타일 시트와 동일한 id와 class 선택자들을 찿아 코딩을 해야 합니다.

예제1)

<tbody>

<tr1>

</tr>

</tbody>

</table>

위에서 보신 바 와 같이 태그에 직접 스타일을 주는 것과 비교 해 보면 엄청 간단 명료 하게 정리가 된 것 을 알수 있습니다.

원격 제어 방식의 코딩은 유지보수를 용이하게 해 주게 된다는 큰 장점을 가지고 있습니다.

만약 위 처럼 이렇게 코딩을 했을땐 큰 셀 하나에 작은 셀 두개가 한줄을 형성 해 나타 나게 되겠죠

아래는 결과 입니다.

1-1 1-2

1-3

1-4

예제2)

<tbody>

<tr1>

</tr>

<tr2>

</tr>

</tbody>

</table>

만약 위 처럼 이렇게 코딩을 했을땐 큰 셀 하나에 작은 셀 두개가 형성된 한줄과 가로로 네개의 셀을 가진 한줄이 형성되어 두줄이 나타 나게 되겠죠

아래는 결과 입니다.

1-1 1-2		1-3	1-4
2-1	2-2	2-3	2-4

예제3)

<tbody>

<tr1>

</tr>

<tr2>

</tr>

<tr3>

</tr>

</tbody>

</table>

만약 위 처럼 이렇게 코딩을 한다면 한줄에 가로로 네개의 셀을 가진 세줄의 가로 셀이 나타 나게 되겠죠

아래는 결과 입니다.

1-1	1-2	1-3	1-4
2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4

예제4)

<tbody>

<tr1>

</tr>

<tr2>

</tr>

<tr3>

</tr>

<tr4>

</tr>

</tbody>

</table>

만약 위처럼 이렇게 코딩을 한다면 4개의 가로셀을 가진 4줄의 셀들을 가진 테이블이 만들어 지겠죠

아래는 결과 입니다.

1-1	1-2	1-3	1-4
2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4

위에서 확인 한것과 같이 <tr> 태그는 <td>태그를 하위 태그로 가진 블록태그 인것을 확인 할수가 있습니다.

<tr> 태그는 border 속성을 가지지 않으며 단지 td 태그를 감싸주는 영역 속성만을 가지고 있습니다.

<td>태그는 <tr> 의 하위 태그 이며 <td> 태그는 가로셀을 생성 하는 요소 태그 로 음식으로 치면 테이블 위에 놓이는 그릇처럼 내용물을 담는 태그 입니다.

<td> 열림 태그와 </td> 닫힘 태그로 구성 되며 셀의 테두리 컬러와 높이와 폭 을 결정 하고 가로 셀을 생성 해 주는 인라인 블록 요소를 가지고 있습니다.

<td> 의 속성 엘리먼트 로 <colspan> 가로셀을 합쳐 주 는 속성과 <rowspan> 세로 셀을 합쳐 주 는 속성 엘리먼트 를 갖고 있습니다.

그리고 <table>의 위치를 결정 해주는 속성을 가진 align 엘리 먼트 와 테이블에 없어서는 안되는 요소인 border 는 테이블의 테두리선을 결정 하는 요소를 가진 요소 엘리먼트 입니다.

이런 태그 와 요소 속성 엘리 먼트 들이 테이블을 만드는데 꼭 필요한 기본 자료 들 입니다.

그럼 이런 테이블의 요소 와 속성 들로 가장 기본이 되는 틀을 한번 만들어 봅니다. 이렇게 되겠죠.

<table>

<tbody>

<tr>

<td>테이블 만드는 방법</td>

</tr>

</tbody>

</table>

그런데 이렇게 하면

테이블 만드는 방법

속성 값을 주지 않은 가장 기본 태그 들로 구성 한 모습 인데요

요런 형태도 없는 내용 물만 출력 되겠 지요 테두리 선이 없지만 테이블 인것은 확실 합니다.

이렇게 테두리가 없는 테이블은 주로 이미지를 배치 할때 사용 하게 됩니다.
이번엔 테이블의 속성 태그로 형태를 갖추기 위해 속성값 을 줘 봤습니다.

<table style="width :200px; height:100px; border:1px solid gray;">

<tbody>

<tr>

<td>테이블 만드는 방법</td>

</tr>

</tbody>

</table>

테이블 만드는 방법

자 이렇게 속성 width 와 height border 속성 태그들 로 속성 값을 주니까 기본 형태를 갖추게 되었 네요

그런데 왠지 좀 불완전해 보입니다.

그렇죠 콘텐츠가 한쪽 벽에 달라 붙어 있죠 그래서 이럴때는 스타일로 테이블을 정리 해줘야 겠죠.여기에 쓰여지는 속성이 align 속성 태그 입니다.

위치를 결정 하는 속성 엘리먼트align 에 center 라는 속성값을 주어 테이블을 이쁘게 꾸며 봅니다.

<table style="width :200px; height:100px; border:1px solid gray; text-align:center;">

<tbody>

<tr>

<td>테이블 만드는 방법</td>

</tr>

< /tbody>

</table >

자 이렇게 스타일을 주어 내용물의 위치를 테이블의 중앙에 배치 하니까 훨씬 깔끔 하지요

테이블 만드는 방법

td 태그로 여러개의 셀을 만들고 style 로 꾸미기

이번엔 가로 로 여러칸을 가진 테이블을 만들어 봅니다.

칸을 합칠 때 사용 하는 속성 엘리먼트 인 colspan과 rowspan에 값을 주어 셀을 합치고 정렬 해 주면 더 멋진 layout을 꾸밀수가 있겠 지요

여기서 colspan과 rowspan 의 합쳐 주는 속성은 실질적으로 셀을 합쳐 주는것이 아니고 합치고자 하는 셀 크기 만큼 키워 주는 것이 됩니다.

그래서 셀을 스판으로 합친 후에는 셀 들을 지워 줘야 원하는 표를 만들수가 있는 것이죠 테이블 에서 셀을 만드는 요소를 가진 태그는 바로<td > 태그 인데요 <td> 태그 가 가진 셀에 대해 합쳐 주고 정렬 하는 역할을 할수가 있는 것이 span 입니다.

말 그대로 span 스판은 스펀지처럼 달라 붙는 성질을 가지고 있지요 이렇게 <td> 태그 가 테이블을 분할 하는 것 처럼 보이지만 실제 로 분할 하는 것은 아니며 테이블 내에 그릇 처럼 셀을 생성 배치 한 것이죠

그럼 우선 합쳐야 할 대상인 그릇들이 있어야 겠지요 그래서 먼저 테이블과 그릇들을 만들어 줍니다.

1-1	1-2	1-3	1-4
2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4

이렇게 가로줄 4칸과 세로줄 4칸 총 16셀의 테이블을 만들 었네요 이제 가로셀1-1과1-2를 colspan 해 보도록 합니다.

실질적으로 병합 하는것이 아니고 하나의 셀만큼의 면적이 커지는 효과만 있는 것이죠

그래서 스판 하게 되면 스판 당한 만큼 셀이 늘어 나는데요 그렇기 때문에 스판후에는<td> 태그 하나를 제거 해 줘야 하는 것이죠

자 그럼 가로 셀의 합침 속성을 가진 colspan ="2"을 사용 해 스판 해 봅니다.

이런 모습이 되겠죠

1-1		1-2	1-3	1-4
2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4

잠깐 여기서 현재 티스토리의 에디터에서 만든 테이블은 브라우져에서 외곽 라인은 보이지 않습니다.

그것을 염두해두고 테이블을 만들어야 겠지요

이런 모습을 원 한게 아니죠 그래서 늘어난 셀에 해당 하는 <td> 태그 하나를 제거 해 줘야 겠죠 아래는 정상적인 테이블의 모습입니다.

1		1-3	1-4
2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4

이번에는 rowspan="3"을 코딩 해 세로줄 2-1부터4-1까지 병합 해봅니다.

1		1-3	1-4
2-1	2-2	2-3	2-4
	3-1	3-2	3-3	3-4
	4-1	4-2	4-3	4-4

이런 모습이 됩니다 역시 원하는 모습이 아니죠

이번에도 역시 스판한 개수 만큼 의 셀을 제거 해 줍니다.

이때 자신의 가로줄 에 있는 td갯수는 그대로 두고 아래의 각 tr 내의 td갯수를 하나씩 제거 해 주면 되겠죠

즉 이런식의 코딩이 되겠지요

<tbody>

<tr1>

</tr>

<tr2>

</tr>

<tr3>

</tr>

<tr4>

</tr>

</tbody>

</table>

이제 정상적인 모습이 되었 네요

1번		1-3	1-4
2번	2-2	2-3	2-4
	3-2	3-3	3-4
	4-2	4-3	4-4

이렇게 <td>태그에 스타일을 주어 셀 테두리 컬러와 셀을 가로 와 세로 로 합쳐 보았 습니다.

이번 에는 marquee태그로 테이블 셀 안에서 글 자가 움직이는 모습을 만들어 봤 습니다.

오른쪽	글이 오른쪽으로 움직 입니다.
왼쪽	글이 왼쪽으로 움직 입니다.

위의 테이블에 스타일을 주어 좀 더 조화 로운 모습으로 꾸며 봅니다.

<table width="auto" height="70px" cellpadding="5" cellspacing="15" border="1" align="center" style="border:1px red solid;">
<tbody >
<tr>
<td style="border:1px blue solid;">
오른쪽
</td>
<td style="border:1px gray solid;">
<marquee onmouseover="stop();" onmouseout="start();" scrollamount="2" direction="right" border="0">
<valigin:middle;>
<font face="서울꿈" size="4" color="blue">
글이 오른쪽으로 움직 입니다.
</font>
</valigin:middle;>
</marquee>
</td>
</tr>
<tr>
<td style="border:1px gray solid;">
왼쪽
</td>
<td style="border:1px gray solid;">
<marquee onmouseover="stop();" onmouseout="start();" scrollamount="2" direction="lift" border="0">
<valigin:middle;>
<font face="서울꿈" size="4" color="red">
글이 왼쪽으로 움직 입니다.
</font>
</valigin:middle;>
</marquee>
</td>
</tr>
</tbody>
</table>

위 처럼 테이블 태그 와 속성 인자 들을 이용 해 테이블 을 꾸미고 테이블을 각각 상 하 두칸씩 4칸의 가로 와 세로 셀을 만들고 marquee 엘리먼트를 이용해 움직이는 글자 를 각 셀 안에 위치 시켰 읍니다.위의 그림 에서 보면<table>태그와 <td>태그 에 파란색 및줄 과 같은 내용으로 스타일을 이용해 꾸며 주고 있는 것을 볼수 있습니다. 이렇게 직접 태그에 스타일을 적용 하는 방식이 inline style 방식 이죠
팁: 위의 태그 들은 제대로 열림 과 닫힘이 잘 이루어져 있음에도 문서 상에는 텍스트 형식으로 나열이 되어 있습니다.
이것은 에스케이프 라는 부호로 꾸몃기 때문 입니다.

위의 테이블을 실현 해 보면 이런 모습이 되겠죠 중간의 왔다리 갔다리는 넣지 못 했 네요...

↓

오른쪽	글이 오른쪽으로 움직 입니다.
왕복	왔 다리 갔다리.
왼쪽	글이 왼쪽으로 움직 입니다.

네이버 에서 구현된 모습

티스토리에서 구현된 모습

여기서 재미 있는 결과를 발견 했는데요 제가 티스토리에서 로그인해서 만든 테이블과 네이버로 들어가서 만든 테이블이 레이 아웃과 폰트와 색상 들에 있어 많이 차이가 난다는 것입니다.

위의 스크랩 이미지를 보시면 알겠지만 위의 그림은 네이버 로 열었을 때의 모습 으로 제가 구현 하고자 했든 것을 제대로 다 구현 해준 반면 아래 그림 은 티스토리 홈 으로 들어 가 제 에디터에 만든 테이블 인데요 테이블 넓이와 폭이 td 엘리먼트에 collapse:collapse 되어 테이블 레이 아웃이 사라지고 없 네요

이것으로 각 포털이 어떤 형의 문서 편집기를 사용 하느냐에 따라 클라이 언터의 브라우져 에도 영향을 미치는 것을 알수가 있습니다.

오늘은 테이블을 만드는 방법에 대해 알아 보았 습니다.

다음 시간에는 가상으로 스타일 시트를 만들고 시트에서 스타일을 줘 서 테이블을 꾸며 보는 시간을 갖도록 합니다.

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

T,back: Comment:

일	월	화	수	목	금	토
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	31

공부 하는남자

table태그로 테이블을 만들고 style 로 꾸며 보자.

티스토리툴바