홈페이지를
제작하는데 있어서 표를 빼놓고는 홈페이지를
만든 다는 생각을 할 수 없을 정도로 table 태그는
아주 중요합니다. 또한 table 태그만 잘만 사용해도 웹
디자인은 따로 할 필요가 없을 정도로 유용한
태그입니다.
표를 잘 이용하면 홈페이지를 아주 간결하고
산뜻하게 꾸밀 수 있답니다. 이러한 table 태그를
잘 하기 위해선 몇가지 속성만 잘 이해하시면
됩니다.......그게 어떤 속성인지는 앞으로 차차
설명하면서 이야기 하기로 하고 기초부터
하나하나 배워보도록 하겠습니다.
일단 아래 표에 있는 기본명령어와 속성을
한번 쭉~ 읽어보세요. 한번에 외우면 좋겠지만
어디 처음부터 그게 쉽게 되나요?^^ 하나하나
예제와 설명을 들어가며 보신다면 굳이 안
외워도 강좌가 끝날 때쯤이면 머리속에 다 들어 있을
것입니다.
| 기본명령어 |
속성 |
| <table></table> |
테이블 태그에 맨처음과 맨
끝에 들어갑니다. |
| <tr></tr> |
한 행을 만들어 줍니다. |
| <caption></caption> |
표에 제목을 나타냄 |
| <td></td> |
한 셀을 만들어 줍니다. |
| <th><th> |
셀 제목을 나타냅니다. |
| 부가적
속성 |
기능 |
| CELLSPACING=수치 |
셀과 셀사이의 간격 조정 |
| CELLPADDING=수치 |
셀 내부에 간격 조정 |
| WIDTH=수치 |
가로 넓이를 지정한다. |
| HEIGHT=수치 |
세로 높이를 지정한다 |
| border=수치 |
표에 테두리 두께 조정 |
| <TD COLSPAN=가로셀수
ROWSPAN=세로셀수> |
셀을 가로,세로로
합치고 싶을때 사용 |
|
자~ 한번 씩
읽어보셨는지요?^^ 한번에 이해가 다 되신다면 제가
더 이상 설명할 필요가 없겠지만 그렇지 않으신
분들이 우리 주위에는 많기(?) 때문에 하나씩
집어가며 설명드리겠습니다. 그전에 먼저 table
태그에 기본 뼈대를 알려드리지요. 이건 꼭
외우시기 바랍니다. 위에 건 못 외워도 아래 table
태그의 기본 뼈대는 반드시 외우셔야 합니다.
^^.......뭐라고요? 군대에서도 외우는 게 없는데 왜
외워야 하냐구요? 흠......그럼 반드시 숙지하시기
바랍니다.^^ 이걸 다 숙지 해놔야 만히 나중에
편합니다.....
| 기본뼈대 |
설명 |
|
<table>
<tr>
<td>
</td>
</tr>
</table> |
<--표를 시작한다는
의미
<--표의 한 행의 시작을 의미
<--표의 한 셀(칸)을 시작한다는 의미
<--표의 한 셀(칸)을 종료한다는 의미
<--표의 한 행을 종료한다는 의미
<--표를 종료한다는 의미 |
|
먼저 <table></table> 명령어부터
이야기 하지요^^ 여러분 태그를 이용해서
웹페이지를 제작할 때 웹페이지 제일 앞에
적어주는 게 뭐였죠? 뭐 였더라????????? 하핫^^ 잘
생각해보세요. 그렇죠! 바로 <html> 을 가장 먼저
적어 줍니다. 그럼 <html>의 기능이 뭐였죠?
<html>은 있어도 그만 없어도 그만이지만 HTML을
이용해서 웹페이지의 작성을 시작한다는 것을
의미하죠. 또한 웹페이지의 맨 마지막에도
</html>을 적어 줍으로서 여기서 작성을
끝낸다는 의미를 나타내죠. 이제 감히 잡히시는지......^^
<table></table> 역시 같은 기능을 해줍니다.
바로 "<table> <-- 여기서 부터 표를
만들기 시작해서 </table> <--여기서 표를
끝내준다는 의미를 해줍니다." 그러나
<html></html> 과는 다른 점이 있다면
<table> 에는 부가적인 속성이 붙는 다는 겁니다.
그럼 속성을 한번 봐 볼까요? ^^ 잘 보세요^^
| 속성 |
기능 |
| border="수치" |
표의 테두리 두께를
조정해줍니다. |
| WIDTH="수치"
or "수치%" |
표의 가로넓이를
지정된 수치만큼 정해줍니다. 백분율
사용가능 |
| HEIGHT="수치"
or "수치%" |
표의 세로넓이를
지정된 수치만큼 정해줍니다. 백분율
사용가능 |
| CELLSPACING="수치" |
셀의 구분 선굵기를
조정합니다. |
| CELLPADDING="수치" |
셀의 안쪽여백의
간격을 조정합니다. |
| bgcolor="색명"
or "색상코드명" |
표의 배경색을
정해줍니다. |
보통 사용할 때
<table border="수치"
width="수치" height="수치" cellspacing="수치"
cellpadding="수치" bgcolor="색명">
이런 식으로 사용을 합니다. 그럼
하나하나 설명해 보죠^^ 먼저 border="수치" 는
설명드린대로 표의 테두리 두께를 조정해줍니다.
| border="0" |
border="1" |
border="5" |
border="15" |
border="15" |
|
|
|
|
|
|
흠......더 이상 설명
안해도 이해가 되시겠죠^^ 근뎅....다른 건 다
이해가 되는데 맨 끝에 있는 색깔이 들어 있는 표는
어떻게 한거냐구요?^^ 흠...관찰력이 매우 뛰어
나신데요.......^^ 테두리 선에 색을 넣는 것은
그렇게 흔하게 사용되는 것이 아니라서 미리
설명을 안했었는데....간단합니다. 부과적으로....태그에....
bordercolorlight="색명" bordercolordark="색명"
만 넣어 주시면 됩니다. 굳이 해석하자면 "밝은
테두리색"," 어두운테두리색" 이
되겠지만....밝은 테두리색이 위부분에 오는
거구요.....어두운 테두리색이 아래쪽에 오는
겁니다.^^
헉....벌써.....여러분의
화면 오른쪽의 스크롤바가 한참 내려왔네요^^
요즘은 대부분의 휠마우스지만.....전 아직도 그냥
마우스에요 ㅜㅜ 스크롤바 내리기 힘드니깐 다음
페이지로 넘어가서 계속 설명드리지요.....^^
|
