베스트 키워드
주간 월간 연간
검색  상세검색
이벤트 디자이너를 위한 디자인 세상 아사달이 만들어갑니다.
디자인센터 보유 현황 오늘어제이번달지난달누적
웹기획
HTML 사용법
    - HTML 소개
    - 텍스트
    - 링크
    - 이미지
    - 테이블
    - 인클루드
    - 프레임
    - 폼(FORM)
    - 이미지 자르기
    - 색상코드표
포토샵 사용법
일러스트 사용법
플래시 사용법
일러스트 만들기
편집사진 만들기
사물 편집사진 만들기
플래시 모션 만들기
플래시 스크립트 만들기
웹구성 요소 만들기
웹 페이지 만들기
생활 홈페이지 만들기
비즈니스 홈페이지 만들기
쇼핑몰 홈페이지 만들기
테이블
Home > 디자인 센터 > 웹강좌 > HTML 사용법 > 테이블
테이블 테이블 크기 외곽선과 여백 셀 꾸미기
(1) 셀 크기

<td  width="셀 너비" height="셀 높이"> ~ </td>

- 아래와 같이 특정한 셀의 너비와 높이를 정할 때 사용합니다.
회사명 주소 연락처
콘텐츠 서울 금천구 가산동 2026-2000
NIDA 서울 강남구 역삼동 123-456

(2) 셀 합치기

<td  colspan="가로로 합칠 셀의 수" rowspan="세로로 합칠 셀의 수">~</td>

colspan 속성은 현재 셀에서 가로 방향, rowspan은 현재 셀에서 세로 방향으로 셀을 합칠 때 이용합니다.




<table border="1" cellpadding="3"> <tr> <td colspan="3" height="50" align="center"><b>협력업체</b></td></tr> <tr> <td width="200">회사명</td> <td>주소</td> <td>연락처</td></tr> <tr> <td width="200">아사달</td> <td rowspan="2">서울 금천구 가산동</td> <td>2026-2000</td></tr> <tr> <td width="200">NIDA</td> <td>123-456</td></tr> </table>
(3) 셀 안의 텍스트 정렬

셀 안의 텍스트 정렬 속성에는 가로 방향 속성인 얼라인(align)과 세로 방향 속성인 브이얼라인(valign)이 있습니다.

<tr align="가로 위치" valign="세로 위치">~</tr>
<td align="가로 위치" valign="세로 위치">~</td>

① align="가로 위치"
    - left : 왼쪽으로 정렬한다.(기본값)
    - right : 오른쪽으로 정렬한다.
    - center : 가운데로 정렬한다.

① align="세로 위치"
    - top : 위쪽으로 정렬한다.
    - middle : 가운데로 정렬한다.(기본값)
    - bottom : 아래로 정렬한다.

  align="left" align="right" align="center"
valign="top" 콘텐츠 콘텐츠 콘텐츠
valign="middle" 콘텐츠 콘텐츠 콘텐츠
valign="bottom" 콘텐츠 콘텐츠 콘텐츠



<table border="1" cellpadding="0" width="100%"> <tr> <td align="center">회사명</td> <td>주소</td> <td align="right">연락처</td></tr> <tr> <td align="center">콘텐츠</td> <td rowspan="2" valign="top">서울 금천구 가산동</td> <td align="right">2026-2000</td></tr> <tr> <td align="center">NIDA</td> <td align="right">123-456</td></tr> </table>
(4) 배경색, 배경이미지

① 배경색 넣기

bgcolor 속성을 이용하여 배경색을 지정합니다.

<table bgcolor="색이름"> ~ </table> <tr bgcolor="색이름"> ~ </tr> <td bgcolor="색이름"> ~ </td>



<table border="1" cellpadding="5" width="100%"> <tr height="30"> <td align="center" bgcolor="#33ccff">회사명</td> <td bgcolor="#ccffff">주소</td> <td align=center bgcolor="#ffff66">연락처</td></tr> <tr> <td align="center" bgcolor="#eeeeee">콘텐츠</td> <td rowspan="2" bgcolor="#f5f5f5">서울 금천구 가산동</td> <td align="center" bgcolor="#f5f5f5">2026-2000</td></tr> </table>
② 배경이미지 넣기

background 속성을 이용하여 배경이미지를 지정합니다.

<table background="이미지 url"> ~ </table> <tr background="이미지 url"> ~ </tr> <td background="이미지 url"> ~ </td>



<table border="1" cellpadding="5" width="100%"> <tr height="30"> <td align="center" background="http://center.diso.co.kr/image/center/web/html/back.gif">회사명</td> <td background="http://center.diso.co.kr/image/center/web/html/back.gif">주소</td> <td align="center" background="http://center.diso.co.kr/image/center/web/html/back.gif">연락처</td></tr> <tr> <td align="center" bgcolor="#eeeeee">콘텐츠</td> <td rowspan="2" bgcolor="#f5f5f5">서울 금천구 가산동</td> <td align="center" bgcolor="#f5f5f5">2026-2000</td></tr> </table>
사이트명 : 아사달닷컴 | 회사명 : (주)아사달 | 대표이사 : 서창녕 | 대표전화 : 02-2026-2000 | 팩스번호 : 02-2026-2008
사업자등록번호 : 206-81-24351 | 법인등록번호 : 110111-1940504 | 통신판매업신고 : 제18-890호 | 벤처확인번호 : 051134532200563
(우편번호 : 153-803) 서울특별시 금천구 가산동 371-28번지 우림라이온스밸리 A동 8층 (주)아사달
Copyright ⓒ asadal.com All rights reserved.
아사달 이용 가능 브라우저