Table 태그 총정리 / 테이블 만들기 합치기 배경넣기 테두리 얇게하기 :: 예술양아치의 윈도로그

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

1)  Link : Table 태그 총정리 / 테이블 만들기 합치기 배경넣기 테두리 얇게하기 :: 예술양아치의 윈도로그:

'via Blog this'

2) Link : 표/테이블 만들기


3) Link : 테이블 만들기

4) 테이블 만들기 태그/html


000000000000000000000000000000000000000000000000000000000000000000

테이블 태그(table tag)

기본적인 테이블 만드는 방식은

결과물은 이렇게 나타납니다.

<table> <tr> <td> 내용 </td> </tr> < /table>

내용

아무 효과 없이 내용 이라고 써져 있군요.

이번엔 테이블을 보기 쉽게 테두리를 만들어 보겠습니다.

결과물은 이렇게 나타납니다.

<table border=1> <tr> <td> 내용 </td> </tr> < /table>

내용

드디어 테두리가 쳐졌습니다. bordr=1 이 코드를 넣음으로 테두리가 생겼음을 볼 수 있는데요.
0 과 1 은 테두리 없음과 있음입니다.

테이블을 가로로 두칸짜리를 만들어 볼게요.

결과물은 이렇게 나타납니다.

<table border=1> <tr> <td> 내용 1 </td> <td> 내용 2 </td> </tr> < /table>

내용 1 내용 2

<td>가 테이블의 가로칸입니다. </td>로 막아주고 또한번 <td>를 넣어주면 옆으로 칸을 늘립니다.
또 같은 방법을 해주면 옆으로 세칸이 되겠습니다.

이번엔 가로세칸 세로로 두줄을 짜리를 만들어보죠

결과물은 이렇게 나타납니다.

<table border=1> <tr> <td> 내용 1 </td> <td> 내용 2 </td> <td> 내용 3 </td> </tr> <tr> <td> 내용 A </td> <td> 내용 B </td> <td> 내용 C </td> </tr> < /table>

내용 1 내용 2 내용 3 내용 A 내용 B 내용 C

<TR>이 세로줄 입니다. 세줄을 하고 싶으면 한줄을 더 넣으면 됩니다. TR 태그안에 TD 태그가 들어갑니다.
열줄 스무줄도 만들 수 있겠죠?

이번엔 테이블 내 외부 여백을 늘려보겠습니다.

결과물은 이렇게 나타납니다.

<table border=1 cellpadding=20 cellspacing=20> <tr> <td> 내용 1 </td> <td> 내용 2 </td> </tr> < /table>

내용 1 내용 2

cellpadding=20 cellspacing=20 이 각각 내 외부 여백입니다. cellpadding=내부 cellspacing=외부

이번엔 셀의 일부를 합쳐보겠습니다. 기본 4x4 테이블입니다.

결과물은 이렇게 나타납니다.

<table border=1> <tr> <td colspan=4> 내용 1 </td> </tr> <tr> <td rowspan=3> 내용 A </td> <td> 내용 B </td> <td> 내용 C </td> <td> 내용 D </td> </tr> <tr> <td> 내용 나 </td> <td> 내용 다 </td> <td> 내용 라 </td> </tr> <tr> <td> 내용 나1 </td> <td> 내용 다1 </td> <td> 내용 라1 </td> </tr> < /table>

내용 1 내용 A 내용 B 내용 C 내용 D 내용 나 내용 다 내용 라 내용 나1 내용 다1 내용 라1

기본 4x4 사이즈의 테이블을 저렇게 필요에 의해합쳐본 모습입니다.
colspan=4 는 가로 네칸을 합치라는 것이고 rowspan=3은 세로 3칸을 합치라는 것입니다.
합쳐진곳에 해당하는 셀의 갯수만큼 <td> </td>를 빼주어야 합니다. 윗줄을 참고해보세요.

이번엔 셀의 안밖에 배경색을 넣겠습니다.

결과물은 이렇게 나타납니다.

<table border=1 bgcolor=red> <tr> <td bgcolor=yellow> 내용 1 </td> <td bgcolor=#777777> 내용 2 </td> <td bgcolor=#000000> 내용 3 </td> </tr> <tr> <td> 내용 A </td> <td> 내용 B </td> <td> 내용 C </td> </tr> < /table>

내용 1 내용 2 내용 3 내용 A 내용 B 내용 C

기본 테이블의 색은 빨강색으로 했으며 윗줄 첫칸은 노랑색 두째칸은 회색 세째칸은 검정색으로 배경을 넣었습니다.
bgcolor=#777777 이런식으로 TABLE TR TD 태그에 다 넣을 수 있습니다. RGB코드 또는 색이름을 넣어서 지정할 수 있습니다.

이번엔 테이블 크기를 정하고 안의 내용을 정열해보겠습니다.

결과물은 이렇게 나타납니다.

<table border=1 width=300 height=300> <tr> <td width=100 height=100 align=right> 내용 1 </td> <td width=200 align=center> 내용 2 </td> </tr> <tr> <td width=100 height=200 valign=top> 내용 A </td> <td width=200 valign=bottom> 내용 B </td> </tr> < /table>

내용 1 내용 2 내용 A 내용 B

테이블을 300x300으로 만들고 첫줄은 100으로 두째줄은 200으로 또 첫째칸은 100으로 두째칸은 200으로 잡아주었습니다.
width=가로 사이즈 height=세로 사이즈 입니다.

테이블 내에서의 글의 위치는 align 과 valign 입니다.
align=좌우 위치이고 valign은 위 아래 입니다.
align=left(왼쪽) align=center(가운데) align=right(오른쪽) 이며
valign=top(위쪽) valign=middle(가운데이지만 안넣어도 기본임) valign=bottom(아랫쪽) 이렇게 사용합니다.

이번엔 테두리가 별로 안이쁘니 얇고 이쁘게 바꿔볼게요

결과물은 이렇게 나타납니다.

<table border=0 cellpadding=0 cellspacing=1 bgcolor=red> <tr> <td bgcolor=#ffffff> 내용 1 </td> <td bgcolor=#ffffff> 내용 2 </td> </tr> < /table>

내용 1 내용 2

바깥 여백을 1로 잡고 테이블에 색을 넣음으로써 얇은 라인의 테두리를 만들었습니다.
당연히 TD 안에도 흰색을 넣어서 테이블