태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

[왕초보 홈페이지 만들기 강좌 ①] HTML이란 무엇인가?
http://blog.hostit.co.kr/82

[왕초보 홈페이지만들기 강좌 ②] 나모 웹 에디터란 무엇인가?
http://blog.hostit.co.kr/83

[왕초보 홈페이지 만들기 강좌 ③] 기본적인 HTML 문서의 구조
http://blog.hostit.co.kr/105

[왕초보 홈페이지 만들기 강좌 ④] HTML 태그의 기초를 익혀보자! 기본 HTML 태그
http://blog.hostit.co.kr/118

[왕초보 홈페이지 만들기 강좌 ⑤] 동방신기 사진 넣기, 이미지 넣기, 글자 정렬, 문장 정렬

http://blog.hostit.co.kr/130

[왕초보 홈페이지 만들기 강좌 ⑥] HTML 문서끼리 링크하기, 연결하기, 링크 걸기
http://blog.hostit.co.kr/144





안녕하세요 여러분~ 오랜만이에요 ^^ 그 동안의 강좌로 연습은 많이 해 보셨는지요?
HTML은 컴퓨터 프로그래밍 언어의 일종입니다. 컴퓨터 프로그래밍 언어 또한
사람들이 쓰는 언어와 같아서, 자주 사용하고 연습하지 않으면 잊어버리기 십상이랍니다.
계속계속 연습하고 응용해서 멋진 홈페이지를 만드는 데에 저희 호스트잇이 도움이 되었으면 합니다 ^^!




오늘은 HTML 문서 안에서 표를 만드는 방법에 대해서 배울 것입니다.
HTML 문서에서 표는 단순히 숫자나 자료를 깔끔하게 제시하는 데에만 사용되는 것은 아닙니다.
단순히 글과 그림을 일직선으로 죽 늘어놓을 것이 아니고 깔끔하게 정렬할 것이라면,
표의 사용은 필수적입니다.




1. <table> 태그

영어로 표는 ’table’이기 때문에, 표를 시작하고 끝내는 데에는 table이라는 태그가 쓰입니다.
그리고 마치 <body>나 <font> 태그처럼, <table> 태그 안에도 여러 가지 속성이 들어갑니다.

  • <table border=숫자>
    표의 테두리 굵기를 조절하는 속성입니다.
    숫자가 커질수록 표의 테두리를 구성하는 선은 굵어지게 되며,
    border 속성에 아무것도 입력하지 않거나 0으로 지정하면 표의 테두리가 보이지 않게 됩니다.
  • <table bordercolor="색상 이름이나 색상 코드">
    표의 테두리 색깔을 지정합니다.
  • <table width=숫자 height=숫자>
    표의 가로와 세로를 픽셀 단위로 지정합니다.
  • <table bgcolor=”색상 이름이나 색상 코드”>
    표의 배경 색깔을 지정하는 속성입니다.




2. <tr> 태그와 <td> 태그

tr은 Table Row (표의 열)의 약자이고, td는 Table Data(표의 내용)의 약자입니다.
이 두 개의 태그를 통해서 표 안에 열과 행이 만들어지게 되는 것이죠.
td 태그는 언제나 tr 태그에 종속되어서 움직입니다.
손으로 표를 그린다고 생각할 때, 가로줄을 먼저 그어놓고
세로줄은 나중에 나눈다고 생각하면 편하죠.
그럼 한 번 예제를 따라해 볼까요?

 




그러면 아래와 같이 나타나게 됩니다.

 




표의 셀들을 합치고 싶을 때는 <td> 태그의 속성인 colspan과 rowspan을 사용합니다.
<td colspan=숫자>를 입력하면 입력한 숫자만큼의 셀을 가로로 합칠 수 있고,
<td rowspan=숫자>를 입력하면 입력한 숫자만큼의 셀을 세로로 합칠 수 있습니다.
위에 입력한 예제에 조금의 내용을 덧붙여서 셀 합치기를 연습해 볼까요?


 




그러면 아래와 같이 두 셀이 합쳐진 모습이 나타납니다.





그리고 나서 border=0으로 지정해 주고 적당히 글자들의 간격을 조정해 주면…

 




아래와 같이 표의 모습은 보이지 않으면서 깔끔한 모습의 홈페이지를 만들 수 있게 됩니다.

 





Posted by 호스트잇