본문 바로가기
  • 컴퓨터 기초를 위한 블로그입니다
컴퓨터사용팁

HTML - Table 넣기

by 동강사랑💙 2011. 1. 5.

Table 넣기

- 다양한 TABLE 만드는 태그 및 테두리, 색상지정 방법

① TABLE 만들기 태그

<table>
<tr><td></td></tr>
</table>
기본태그는 간단하죠? 여기서 tr은 열을 바꿔주고, td는 행을 나눠 줍니다. 그러나 table 만들기는 이제 시작입니다. 모양도 여러가지이고 편집도 다양하기 때문에 눈을 크게 뜨고 보셔야 해요~

② 여러가지 TABLE
아래의 예제들을 보면서 tr과 td를 이용해 어떻게 줄과 칸을 바꿨는지를 잘 관찰하세요.
그리고 두 개의 행(가로)을 합칠 때는 colspan="2", 세 개의 행을 합칠 때에는 colspan="3"..., 두 개의 열(세로)를 합칠 경우에는 rowspan="2"와 같이 넣어주면 됩니다.
설명이 좀 복잡하지만 아래의 태그명령어와 그림을 비교하면서 연습해 보세요. 

<table>
<tr>
<td>첫번째 칸</td><td>두번째 칸</td><td>세번째 칸</td><td>네번째 칸</td>
</tr>
</table>

첫번째 칸
두번째 칸
세번째 칸
네번째 칸

<table>
<tr><td>첫번째 줄</td></tr>
<tr><td>두번째 줄</td></tr>
<tr><td>세번째 줄</td></tr>
</table>

첫번째 줄
두번째 줄
세번째 줄

<table>
<tr><td>첫째줄 첫째칸</td><td>첫째줄 둘째칸</td></tr>
<tr><td>둘째줄 첫째칸</td><td>둘째줄 둘째칸</td></tr>
</table>

첫째줄 첫째칸
첫째줄 둘째칸
둘째줄 첫째칸
둘째줄 둘째칸

<table>
<tr><td rowspan="2">첫째줄과 둘째줄의 칸을 합쳤어요.</td>
<td>첫째줄 둘째칸</td></tr><tr><td>둘째줄 둘째칸</td></tr>
</table>

첫째줄과 둘째줄의
첫째칸을 합쳤어요.
첫째줄 둘째칸
둘째줄 둘째칸

③ TABLE 편집 
<table border="수치" bgcolor="색상명" width="수치" height="수치"> 이와 같이 table의 테두리, 색상, 크기 등을 조절할 수가 있습니다.
border는 테두리를 얼만큼 주느냐인데 0이면 테두리가 없는 것이고 1, 2...는 테두리가 굵어지게 됩니다. bgcolor는 table의 배경색으로 그냥 color가 아님을 주의하세요. 그리고 width는 넓이를, height는 높이를 지정해 주는 것이 겠죠.
참고로 table에 테두리를 주되 테두리의 색상만 바꾸고 싶다면 bordercolor="색상명"을 추가해 넣으시면 됩니다. 또한 위에서 처럼 table 전체만 지정하는 것이 아니라 tr 혹은 td에 따로따로 테두리, 색상, 크기 등을 지정해 줄 수 있습니다.

<table border="1" bgcolor="458B74" bordercolor="black">
<tr><td rowspan="2" width="200" bgcolor="6699CC">첫째줄과 둘째줄의 칸을 합쳤어요.</td>
<td height="100">첫째줄 둘째칸</td></tr><tr><td>둘째줄 둘째칸</td></tr>
</table>

첫째줄과 둘째줄의
첫째칸을 합쳤어요.
첫째줄 둘째칸
둘째줄 둘째칸
     예제소스

     <html>
     <head><title>TABLE 만들기 예제</title></head>
     <body bgcolor="458B74">
     <center>
     <font color="white" face="이솝체">TABLE 만들기</font><p>
     <hr size=2, color="EEAD0E" width=250 align=center><p>
     <table border="0" bgcolor="6699CC">
     <tr><td colspan="2" height="150" bgcolor="EEEEEE">첫째줄의 칸을
     합쳤어요.</td></tr>
     <tr><td height="100" width="150">둘째줄 첫째칸</td>
     <td height="100" width="130">둘째줄 둘째칸</td></tr>
     </table><p>
     <table border="1" bgcolor="EEEEEE" bordercolor="black">
     <tr><td rowspan="3" width="150" bgcolor="6699CC">첫째줄, 둘째줄,
     <br>세째줄의 첫째칸을 <br>합쳤어요.</td>
     <td height="100" width="130">첫째줄 둘째칸</td></tr><tr><td>둘째줄
     둘째칸</td></tr><tr><td>세째줄 둘째칸</td></tr>
     </table>
     </center>
     </body>
     </html>

     예제실행 <= 결과를 보시려면 클릭하세요.

'컴퓨터사용팁' 카테고리의 다른 글

윈도우 시각효과 설정하기  (0) 2011.01.06
삭제한 파일 복구하기 Recuva  (1) 2011.01.06
HTML - 링크시키기  (0) 2011.01.05
HTML - 음악 넣기  (0) 2011.01.05
HTML - 그림 넣기  (0) 2011.01.05

관련글

티스토리툴바