테이블 만들기 - 1
홈페이지를 제작하는데 있어서 표를 빼놓고는 홈페이지를 만든 다는 생각을 할 수 없을 정도로 table 태그는 아주 중요합니다. 또한 table 태그만 잘만 사용해도 웹 디자인은 따로 할 필요가 없을 정도로 유용한 태그입니다. 표를 잘 이용하면 홈페이지를 아주 간결하고 산뜻하게 꾸밀 수 있답니다. 이러한 table 태그를 잘 하기 위해선 몇가지 속성만 잘 이해하시면 됩니다.......그게 어떤 속성인지는 앞으로 차차 설명하면서 이야기 하기로 하고 기초부터 하나하나 배워보도록 하겠습니다.
일단 아래 표에 있는 기본명령어와 속성을 한번 쭉~ 읽어보세요. 한번에 외우면 좋겠지만 어디 처음부터 그게 쉽게 되나요?^^ 하나하나 예제와 설명을 들어가며 보신다면 굳이 안 외워도 강좌가 끝날 때쯤이면 머리속에 다 들어 있을 것입니다.
| 기본명령어 | 속성 | ||||||||||||||
| <table></table> | 테이블 태그에 맨처음과 맨 끝에 들어갑니다. | ||||||||||||||
| <tr></tr> | 한 행을 만들어 줍니다. | ||||||||||||||
| <caption></caption> | 표에 제목을 나타냄 | ||||||||||||||
| <td></td> | 한 셀을 만들어 줍니다. | ||||||||||||||
| <th><th> | 셀 제목을 나타냅니다. | ||||||||||||||
| |||||||||||||||
자~ 한번 씩 읽어보셨는지요?^^ 한번에 이해가 다 되신다면 제가 더 이상 설명할 필요가 없겠지만 그렇지 않으신 분들이 우리 주위에는 많기(?) 때문에 하나씩 집어가며 설명드리겠습니다. 그전에 먼저 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="색명" 만 넣어 주시면 됩니다. 굳이 해석하자면 "밝은 테두리색"," 어두운테두리색" 이 되겠지만....밝은 테두리색이 위부분에 오는 거구요.....어두운 테두리색이 아래쪽에 오는 겁니다.^^
헉....벌써.....여러분의 화면 오른쪽의 스크롤바가 한참 내려왔네요^^ 요즘은 대부분의 휠마우스지만.....전 아직도 그냥 마우스에요 ㅜㅜ 스크롤바 내리기 힘드니깐 다음 페이지로 넘어가서 계속 설명드리지요.....^^
출처 : 태그매니아
신고
"님의 댓글"
이 댓글을 신고하시겠습니까?
