사용 안내서 취소

표를 사용하여 내용 표시

검색

마지막 업데이트 날짜 2022년 11월 28일

표를 사용하여 웹 사이트에 내용을 표시하는 방법을 살펴봅니다. 또한 표 셀 분할 및 병합, 표 형식 데이터 가져오기 및 내보내기 방법을 살펴봅니다.

표는 HTML 페이지에서 데이터를 표 형식으로 표시하고 텍스트와 그래픽의 레이아웃을 지정할 수 있는 강력한 도구입니다. 표는 하나 이상의 행으로 구성되고 각 행은 하나 이상의 셀로 구성됩니다. HTML 코드에서는 일반적으로 열이 명시적으로 지정되지 않지만 Dreamweaver에서는 행과 셀뿐 아니라 열도 조작할 수 있습니다.

Dreamweaver에서는 표를 선택하거나 표로 삽입 포인터를 가져가면 각 표 열의 표 폭과 열 폭이 표시됩니다. 폭 옆에는 표 머리글 메뉴와 열 머리글 메뉴에 대한 화살표가 표시됩니다. 이 메뉴를 통해 자주 사용되는 표 관련 명령에 빠르게 액세스할 수 있습니다. 필요에 따라 폭과 메뉴를 사용하거나 해제할 수 있습니다.

표나 열의 폭이 표시되지 않으면 해당 표나 열의 폭이 HTML 코드에서 지정되지 않은 것입니다. 두 개의 숫자가 표시되는 경우는 디자인 뷰에 나타나는 시각적 폭이 HTML 코드에 지정된 폭과 일치하지 않는 경우입니다. 표의 오른쪽 아래 모서리를 드래그하여 크기를 조절하거나 셀에 설정된 폭을 초과하여 내용을 입력할 때 이러한 현상이 나타날 수 있습니다.

예를 들어 열 폭을 200픽셀로 설정한 다음 250픽셀 폭으로 펼쳐지는 콘텐츠를 추가하면 해당 열에 두 개의 숫자인 200(코드에 지정된 폭)과 괄호 안에 (250)(화면에 렌더링되는 시각적 열 폭)이 표시됩니다.

참고:

CSS 배치를 사용하여 페이지 레이아웃을 지정할 수도 있습니다.

HTML의 표 서식 적용 우선 순위

디자인 뷰에서 표에 서식을 적용할 때 전체 표의 속성을 설정하거나 표에서 선택된 행, 열 또는 셀의 속성을 설정할 수 있습니다. 배경색이나 정렬 등의 속성을 전체 표와 개별 셀에서 서로 다른 값으로 설정하면 셀 서식이 행 서식보다 우선 적용되고 행 서식은 표 서식보다 우선 적용됩니다.

표 서식의 우선 순위는 다음과 같습니다.

예를 들어 한 셀의 배경색을 파랑으로 설정한 다음 전체 표의 배경색을 노랑으로 설정하는 경우 셀 서식이 표 서식보다 우선 적용되므로 파란색 셀이 노란색으로 바뀌지 않습니다.

참고:

열의 속성을 설정하면 Dreamweaver에서는 열에 있는 각 셀에 해당하는 td 태그의 속성을 변경합니다.

표 셀 분할 및 병합 정보

전체 선택 영역이 셀로 이루어진 직선이거나 직사각형인 경우 인접한 여러 셀을 병합하여 여러 열이나 행에 걸친 단일 셀로 만들 수 있습니다. 이전에 병합한 셀인지 여부에 관계없이 셀을 여러 행이나 열로 분할할 수도 있습니다. Dreamweaver에서는 지정한 배열을 만들기 위해 colspan 또는 rowspan 속성을 필요에 따라 추가하여 표의 구조를 자동으로 다시 작성합니다.

다음 예에서는 처음 두 행의 가운데 셀이 두 행에 걸친 단일 셀로 병합되었습니다.

표 삽입 및 내용 추가하기

[삽입] 패널이나 [삽입] 메뉴를 사용하여 표를 새로 만들 수 있습니다. 그런 다음 표 외부에서 텍스트와 이미지를 추가할 때와 같은 방법으로 표 셀에 텍스트와 이미지를 추가합니다.

표를 표시하려는 위치로 삽입 포인터를 이동합니다.

참고:

문서가 비어 있는 경우에는 오직 문서의 시작 부분에 삽입 포인터를 둘 수 있습니다.
- [삽입] > [표]를 선택합니다.
- 삽입 패널의 HTML 범주에서 표를 클릭합니다.
표 대화 상자에서 속성을 설정한 다음 [확인]을 클릭하여 표를 생성합니다.

표 생성

행

표 행 개수 결정

열

표 열 개수 결정

표 폭

표의 폭을 픽셀 단위로 지정하거나 브라우저 창의 폭에 대한 퍼센트로 지정합니다.

테두리 두께

표의 테두리 폭을 픽셀 단위로 지정합니다.

셀 간격

인접한 표 셀 사이의 픽셀 수를 결정합니다.

참고:

테두리 두께나 셀 간격 및 셀 패딩에 명시적으로 값을 할당하지 않으면 대부분의 브라우저에서 표 테두리 두께와 셀 패딩이 1로, 셀 간격이 2로 설정되어 표시됩니다. 브라우저에서 표에 테두리, 패딩 또는 간격이 표시되지 않게 하려면 [셀 패딩] 및 [셀 간격]을 0으로 설정합니다.

셀 패딩

셀 테두리와 셀 내용 사이의 픽셀 수를 결정합니다.

없음:

표에 열 또는 행 머리글을 사용하지 않습니다.

왼쪽

표의 첫 번째 열이 머리글 열로 지정되므로 표의 각 행에 대한 머리글을 입력할 수 있습니다.

위

표의 첫 번째 행이 머리글 행으로 지정되므로 표의 각 열에 대한 머리글을 입력할 수 있습니다.

모두

표에 열 머리글과 행 머리글을 모두 입력할 수 있습니다.

참고:

사용자가 화면 판독기를 사용하는 경우에 대비하여 머리글을 사용하는 것이 좋습니다. 화면 판독기로 표 머리글을 읽을 수 있으므로 표 정보를 이용하는 데 매우 유용합니다.

캡션

표 외부에 표 제목을 표시합니다.

요약

표 설명을 표시합니다. 화면 판독기는 요약 텍스트를 읽지만 사용자 브라우저에는 이 텍스트가 표시되지 않습니다.

표 가져오기 및 내보내기

Microsoft Excel 등의 다른 애플리케이션에서 작성하여 탭, 콤마, 콜론, 세미콜론 등의 구분 기호로 항목을 구분한 텍스트 형식으로 저장된 표 형식 데이터를 Dreamweaver로 가져와서 표로 구성할 수 있습니다.

Dreamweaver의 표 데이터를 인접 셀의 내용이 구분 기호로 분리된 텍스트 파일로 내보낼 수도 있습니다. 구분 기호로는 콤마, 콜론, 세미콜론 또는 공백을 사용할 수 있습니다. 표를 내보낼 때는 전체 표를 내보내야 하며 표의 일부만 선택하여 내보낼 수는 없습니다.

참고:

처음 6개의 행 또는 열과 같이 표의 일부만 내보내려면 먼저 해당 데이터가 들어 있는 셀을 복사하고 표 바깥에 붙여넣는 방법으로 새 표를 만들어 내보냅니다.

표 데이터 가져오기

[파일] > [가져오기] > [표 형식 데이터 가져오기]를 선택합니다.
표 형식 데이터에 대한 옵션을 지정하고 [확인]을 클릭합니다.

데이터 파일

가져올 파일의 이름입니다. 파일을 선택하려면 [검색] 버튼을 클릭합니다.

구분 기호

가져오는 파일에 사용된 구분 기호입니다.

[기타]를 선택하면 팝업 메뉴 오른쪽에 텍스트 상자가 표시됩니다. 파일에 사용된 구분 기호를 입력합니다.

참고:

이때 데이터 파일을 저장할 때 사용된 구분 기호를 지정해야 합니다. 그렇지 않으면 파일을 제대로 가져오지 못하여 데이터가 표로 올바르게 구성되지 않습니다.
표 폭
표의 폭.
- [데이터에 맞추기]를 선택하면 각 열의 폭이 열에서 가장 긴 텍스트 문자열에 맞게 조절됩니다.
- [설정]을 선택하면 고정된 표 폭을 픽셀 단위 또는 브라우저 창 폭에 대한 퍼센트로 지정할 수 있습니다.
테두리

표의 테두리 폭을 픽셀 단위로 지정합니다.

셀 패딩

셀의 내용과 셀 테두리 사이의 픽셀 수입니다.

셀 간격

인접한 표 셀 사이의 픽셀 수입니다.

참고:

테두리, 셀 간격 및 셀 패딩에 명시적으로 값을 할당하지 않으면 대부분의 브라우저에서 표 테두리와 셀 패딩이 1로, 셀 간격이 2로 설정되어 표시됩니다. 브라우저에서 표를 패딩 또는 간격 없이 표시하려면 [셀 패딩] 및 [셀 간격]을 0으로 설정합니다. 테두리가 0으로 설정된 경우 셀 및 표 테두리를 보려면 [보기] > [시각 도구] > [표 테두리]를 선택합니다.

상단 행 서식

가능한 경우 표의 맨 위 행에 적용할 서식을 결정합니다. 네 가지 서식 옵션인 [서식 없음], [굵게], [기울임체] 또는 [굵은 기울임체] 중 하나를 선택합니다.

표 내보내기

삽입 포인터를 표 셀 중 하나에 둡니다.
[파일] > [내보내기] > [표]를 선택합니다.
다음 옵션을 지정합니다.

구분 기호

내보낸 파일에서 항목을 구분하는 데 사용할 구분 기호를 지정합니다.

행 분리

내보낸 파일을 열 운영 체제(Windows, Macintosh 또는 UNIX)를 지정합니다. 텍스트 행의 끝을 표시하는 방법은 운영 체제마다 다릅니다.
[내보내기]를 클릭합니다.
파일 이름을 입력하고 [저장]을 클릭합니다.

표 요소 선택하기

전체 표, 행 또는 열을 한 번에 선택할 수 있습니다. 또한 하나 이상의 개별 셀을 선택할 수도 있습니다.

포인터를 표, 행, 열 또는 셀 위로 가져가면 Dreamweaver에서 선택 영역의 모든 셀이 강조 표시되므로 선택 대상 셀을 확인할 수 있습니다. 이 기능은 표에 테두리가 없거나 셀이 여러 열이나 행으로 확장되어 있거나 표가 중첩된 경우에 유용합니다. 환경 설정에서 강조 색상을 변경할 수 있습니다.

참고:

표의 테두리 위에 포인터를 두고 Ctrl 키(Windows)나 Command 키(Macintosh)를 누르고 있으면 표의 전체 구조, 즉 표에 있는 모든 셀이 강조 표시됩니다. 이 기능은 중첩된 여러 표 중 하나의 구조를 보려는 경우에 유용합니다.

표 전체 선택

다음 중 한 가지를 수행하여 표를 선택합니다.

표를 선택하려면 표의 왼쪽 위 모서리를 클릭합니다.
표 셀을 클릭한 다음 문서 창 왼쪽 아래에 있는 태그 선택기에서 태그를 선택합니다.
표 셀을 클릭하고 표 머리글 메뉴를 클릭한 다음 [표 선택]을 선택합니다. 선택된 표의 오른쪽과 아래쪽 가장자리에 선택 핸들이 표시됩니다.
표 셀을 클릭한 다음 [편집] > [표] > [표 선택]을 선택합니다.

행이나 열을 하나 또는 여러 개 선택하기

행의 왼쪽 가장자리 또는 열의 위쪽 가장자리를 가리키도록 포인터를 놓습니다.
포인터가 선택 화살표로 바뀌면 행 또는 열 하나를 클릭하여 선택하거나 여러 행 또는 열을 드래그하여 선택합니다.

행 선택

열 하나 선택하기

열을 클릭합니다.
열 머리글 메뉴를 클릭한 다음 [열 선택]을 선택합니다.

셀 하나 선택하기

다음 중 하나를 수행합니다.
- 셀을 클릭한 다음 문서 창 왼쪽 아래에 있는 태그 선택기에서 <td> 태그를 선택합니다.
- Control 키(Windows) 또는 Command 키(Macintosh)를 누른 채로 셀을 클릭합니다.

셀 한 줄 또는 직사각형 셀 블록 선택하기

다음 중 하나를 수행합니다.

셀 중 하나에서 다른 셀로 드래그합니다.
셀 하나를 선택하고 같은 셀을 Control 키(Windows) 또는 Command 키(Macintosh)를 누른 채로 클릭하여 선택한 다음 Shift 키를 누른 채로 다른 셀을 클릭합니다.

인접하지 않은 셀 선택하기

Ctrl(Windows) 또는 Command(Macintosh) 키를 누른 채로 선택할 셀, 행 또는 열을 클릭합니다.

선택되지 않은 셀, 행 또는 열을 Ctrl(Windows) 또는 Command(Macintosh) 키를 누르고 클릭하면 선택 영역에 추가됩니다. 이미 선택된 상태이면 선택 영역에서 제거됩니다.

표 요소의 강조 색상 변경

편집 > 환경 설정(Windows) 또는 Dreamweaver > 환경 설정(Macintosh)을 선택합니다.
왼쪽의 범주 목록에서 [강조 표시]를 선택하고 다음을 변경한 다음 [확인]을 클릭합니다.
- 표 요소의 강조 색상을 변경하려면 [마우스 오버] 색상 상자를 클릭한 다음 색상 피커를 사용하여 강조 색상을 선택하거나 텍스트 상자에 강조 색상의 16진수 값을 입력합니다.
- 표 요소의 강조 표시 기능을 켜거나 끄려면 [마우스 오버]에 대한 [보기] 옵션을 선택하거나 해제합니다.
참고:

이 옵션은 포인터를 오브젝트 위에 놓았을 때 Dreamweaver에서 강조 표시되는 모든 오브젝트에 적용됩니다.

표 속성 설정하기

속성 관리자를 사용하여 표를 편집할 수 있습니다.

표를 선택합니다.
속성 관리자(윈도우 > 속성)에서 필요에 따라 속성을 변경합니다.

표 속성

표 ID

표의 ID입니다.

행 및 열

표의 행과 열의 수입니다.

W

픽셀 단위의 표의 폭 또는 브라우저 창의 폭에 대한 퍼센트입니다.

참고:

일반적으로 표의 높이는 설정할 필요가 없습니다.

CellPad

셀의 내용과 셀 테두리 사이의 픽셀 수입니다.

CellSpace

인접한 표 셀 사이의 픽셀 수입니다.

정렬

같은 단락에 있는 텍스트나 이미지 등의 다른 요소를 기준으로 표가 표시될 위치를 결정합니다.

[왼쪽]을 선택하면 다른 요소의 왼쪽에 표가 정렬되고, 그 결과 같은 단락의 텍스트가 표의 오른쪽에 줄 바꿈되어 들어갑니다. [오른쪽]을 선택하면 다른 요소의 오른쪽에 표가 정렬되고, 그 결과 텍스트가 표의 왼쪽에 줄 바꿈되어 들어갑니다. [가운데]를 선택하면 표가 가운데 정렬되고, 텍스트는 표의 위 및/또는 아래에 나타납니다. [기본값]을 선택하면 브라우저의 기본 정렬이 적용됩니다.

참고:

정렬을 [기본값]으로 설정하면 표 옆에 다른 내용이 표시되지 않습니다. 다른 내용 옆에 표를 표시하려면 [왼쪽] 또는 [오른쪽] 정렬을 사용하십시오.

테두리

표의 테두리 폭을 픽셀 단위로 지정합니다.

참고:

테두리, 셀 간격 및 셀 패딩에 명시적으로 값을 할당하지 않으면 대부분의 브라우저에서 표 테두리와 셀 패딩이 1로, 셀 간격이 2로 설정되어 표시됩니다. 브라우저에서 표를 패딩 또는 간격 없이 표시하려면 [테두리], [셀 패딩] 및 [셀 간격]을 0으로 설정합니다. 테두리가 0으로 설정된 경우 셀 및 표 테두리를 보려면 [보기] > [시각 도구] > [표 테두리]를 선택합니다.

클래스

표에 CSS 클래스를 설정합니다.

참고:

표 속성 관리자를 확장하면 다음 옵션을 볼 수 있습니다. 표 속성 관리자를 확장하려면 오른쪽 아래의 확장 화살표를 클릭합니다.

열 폭 지우기 및 행 높이 지우기

및 [행 높이 지우기]를 사용하면 표에서 명시적으로 지정한 행 높이 또는 열 폭 값이 모두 삭제됩니다.

표의 폭을 픽셀로 변환

및 [표 높이를 픽셀로 변환]을 사용하면 표에 있는 각 열의 폭 또는 높이가 현재 폭(픽셀 단위)으로 설정되고 전체 표의 폭도 현재 폭(픽셀 단위)으로 설정됩니다.

표의 폭을 퍼센트로 변환

및 [표 높이를 퍼센트로 변환]을 사용하면 표에 있는 각 열의 폭 또는 높이가 문서 창 폭에 대한 현재 퍼센트 값으로 변환되고 전체 표의 폭도 문서 창 폭에 대한 현재 퍼센트 값으로 변환됩니다.

텍스트 상자에 값을 입력한 경우에는 Tab이나 Enter(Windows) 또는 Return(Macintosh) 키를 눌러 값을 적용합니다.

셀, 행 또는 열 속성 설정하기

속성 관리자를 사용하여 표의 셀과 행을 편집할 수 있습니다.

열이나 행을 선택합니다.
속성 관리자(윈도우 > 속성)에서 다음 옵션을 설정합니다.

수평

셀, 행 또는 열 내용의 수평 정렬을 지정합니다. 셀의 내용을 왼쪽, 오른쪽 또는 가운데로 정렬하거나 브라우저의 기본 정렬(보통 일반 셀에서는 왼쪽 정렬, 머리글 셀에서는 가운데 정렬)을 사용할 수 있습니다.

수직

셀, 행 또는 열 내용의 수직 정렬을 지정합니다. 셀의 내용을 셀의 위, 가운데, 아래 또는 기준선에 정렬하거나 브라우저의 기본 정렬(일반적으로 가운데 정렬)을 사용할 수 있습니다.

W 및 H

선택된 셀의 폭과 높이(픽셀 단위 또는 전체 표 폭이나 높이에 대한 퍼센트 단위)입니다. 퍼센트를 지정하려면 값 뒤에 퍼센트 기호(%)를 사용합니다. 해당 셀의 내용 및 다른 열과 행의 폭과 높이에 따라 적절한 폭이나 높이를 브라우저에서 자동으로 결정하려면 이 필드를 기본값인 공백으로 둡니다.

기본적으로 브라우저는 열에서 가장 넓은 이미지나 가장 긴 줄이 들어갈 수 있는 행 높이와 열 폭을 선택합니다. 따라서 열에 내용을 추가할 때 해당 열이 표의 다른 열보다 훨씬 넓어지는 경우가 있습니다.

참고:

높이를 전체 표 높이에 대한 퍼센트로 지정할 수 있지만 브라우저에서 해당 행이 지정한 퍼센트 높이로 표시되지 않을 수도 있습니다.

배경

색상 피커에서 선택한 셀, 열 또는 행의 배경색입니다.

셀 병합

선택한 셀, 행 또는 열을 하나의 셀로 결합합니다. 사각형 또는 직선형 블록 형태로 선택된 셀만 병합할 수 있습니다.

셀 분할

셀을 나누어 둘 이상의 셀로 만듭니다. 셀은 한 번에 하나만 분할할 수 있고 셀을 여러 개 선택하면 이 버튼을 사용할 수 없습니다.

한 줄로

지정한 셀에서 줄 바꿈이 일어나지 않고 모든 텍스트가 한 줄로 유지됩니다. [한 줄로]가 선택되어 있으면 셀에 입력하거나 붙여 넣은 모든 데이터가 들어가도록 셀이 넓어집니다. 일반적으로 셀에서 가장 긴 단어나 가장 넓은 이미지가 들어갈 수 있도록 셀이 수평으로 확장된 다음 다른 내용이 들어갈 수 있도록 필요에 따라 수직으로 확장됩니다.

머리글

선택한 셀에 표 머리글 셀 서식을 적용합니다. 기본적으로 표 머리글 셀의 내용은 굵은 글씨체이며 가운데 정렬됩니다.

참고:

폭과 높이는 픽셀 또는 퍼센트 값으로 지정할 수 있으며 픽셀과 퍼센트 사이에서 변환할 수 있습니다.

참고:

열의 속성을 설정하면 Dreamweaver에서는 열에 있는 각 셀에 해당하는 td 태그의 속성을 변경합니다. 하지만 행의 특정 속성을 설정하는 경우 Dreamweaver에서는 행에 있는 각 td 태그의 속성을 변경하는 것이 아니라 tr 태그의 속성을 변경합니다. 따라서 행의 모든 셀에 같은 서식을 적용하는 경우에는 tr 태그에 서식을 적용하면 HTML 코드가 한결 산뜻하고 간결해 집니다.
Tab 또는 Enter 키(Windows)를 누르거나 Return 키(Macintosh)를 눌러 값을 적용합니다.

표 및 셀 서식 지정하기

표와 셀의 속성을 설정하거나 표에 사전 설정된 디자인을 적용하여 표 모양을 바꿀 수 있습니다. 표 및 셀 속성을 설정하기 전에 서식이 적용되는 우선 순위가 셀, 행, 표라는 점을 알고 있어야 합니다.

참고:

표 셀에 있는 텍스트에 서식을 적용하려면 표 외부에서 텍스트 서식을 적용할 때 사용하는 방법과 동일한 방법을 사용하십시오.

표, 행, 셀 또는 열의 형식 변경하기

표, 셀, 행 또는 열을 선택합니다.
속성 관리자(윈도우 > 속성)에서 오른쪽 아래에 있는 확장 화살표를 클릭하여 필요한 속성을 변경합니다.
원하는 대로 속성을 변경합니다.

옵션에 대한 자세한 내용을 보려면 속성 관리자의 [도움말] 아이콘을 클릭하십시오.

참고:

열의 속성을 설정하면 Dreamweaver에서는 열에 있는 각 셀에 해당하는 td 태그의 속성을 변경합니다. 하지만 행의 특정 속성을 설정하는 경우 Dreamweaver에서는 행에 있는 각 td 태그의 속성을 변경하는 대신 tr 태그의 속성을 변경합니다. 따라서 행의 모든 셀에 같은 서식을 적용하는 경우에는 tr 태그에 서식을 적용하면 HTML 코드가 훨씬 명확하고 간결해 집니다.

코드 보기에서 표의 액세스 가능성 값을 추가하거나 편집하기

코드에서 해당 속성을 편집합니다.

참고:

코드에서 태그를 빠르게 찾으려면 표를 클릭한 다음 문서 창의 아래쪽에 있는 태그 선택기에서 <table> 태그를 선택합니다.

디자인 뷰에서 표의 액세스 가능성 값을 추가하거나 편집하기

표 캡션을 편집하려면 캡션을 강조 표시하고 새 캡션을 입력합니다.
- 캡션 정렬을 편집하려면 삽입 포인터를 표 캡션에 놓고 마우스 오른쪽 버튼을 클릭(Windows)하거나 Control 키를 누른 채로 클릭(Macintosh)한 다음 [태그 코드 편집]을 선택합니다.
- 표 요약을 편집하려면 표를 선택하고 마우스 오른쪽 버튼을 클릭(Windows)하거나 Control 키를 누른 채로 클릭(Macintosh)한 다음 [태그 코드 편집]을 선택합니다.

표, 열 및 행의 크기 조절하기

표 크기 조절하기

전체 표 또는 개별 행과 열의 크기를 조절할 수 있습니다. 전체 표의 크기를 조절하면 표의 모든 셀 크기가 비례에 맞게 조절됩니다. 표의 셀 폭이나 높이를 명시적으로 지정한 경우 표의 크기를 조절하면 문서 창에 표시되는 셀의 크기는 바뀌지만 지정된 셀 폭과 높이는 변경되지 않습니다.

표의 선택 핸들 중 하나를 드래그하여 표의 크기를 조절할 수 있습니다. Dreamweaver에서는 표를 선택하거나 표 안에 삽입 포인터가 있으면 표의 위쪽이나 아래쪽에 표 머리글 메뉴와 표 폭이 표시됩니다.

HTML 코드에서 설정한 열 폭이 화면에서 보이는 폭과 일치하지 않는 경우가 있습니다. 이러한 경우 폭을 일치시킬 수 있습니다. Dreamweaver에서는 표의 레이아웃을 지정하는 데 도움이 되는 표와 열의 폭 및 머리글 메뉴가 표시되며 필요에 따라 폭 및 메뉴를 활성화하거나 비활성화할 수 있습니다.

열 및 행의 크기 조절하기

속성 관리자를 사용하거나 열 또는 행의 테두리를 드래그하여 열 폭이나 행 높이를 변경할 수 있습니다. 크기가 잘 조절되지 않으면 열 폭이나 행 높이를 지우고 다시 시작할 수 있습니다.

참고:

코드 보기를 사용하여 HTML 코드에서 직접 셀 폭과 높이를 변경할 수도 있습니다.

Dreamweaver에서는 표를 선택하거나 표 안에 삽입 포인터가 있으면 열의 위쪽이나 아래쪽에 열 머리글 메뉴와 열 폭이 표시되며 필요에 따라 열 머리글 메뉴를 활성화하거나 비활성화할 수 있습니다.

표 크기 조절

표를 선택합니다. 라이브 뷰 상태에서 표를 선택하면 [요소 표시]가 나타납니다. 표 서식 모드를 입력하려면 샌드위치 아이콘을 클릭합니다.

표의 크기를 수평으로 조절하려면 오른쪽에 있는 선택 핸들을 드래그합니다.
표의 크기를 수직으로 조절하려면 아래쪽에 있는 선택 핸들을 드래그합니다.
표의 크기를 양방향으로 조절하려면 오른쪽 아래 모서리에 있는 선택 핸들을 드래그합니다.

라이브 뷰에서 표 서식 모드를 종료하려면 Esc 키를 누르거나 표 바깥쪽을 클릭합니다. [편집] > [표] 메뉴 옵션을 사용하여 표를 추가로 수정할 수 있습니다.

참고: [편집] > [표] 메뉴의 옵션은 표 전체를 선택했는지 또는 단일 셀을 선택했는지에 따라 달라집니다. 라이브 뷰에서 요소 표시는 전체 표를 선택하면 "표"를, 특정 셀을 선택하면 "td"를 표시합니다. 셀 서식 모드에서 표 서식 모드로 전환하려면 표의 테두리를 클릭하십시오.

표의 전체 폭을 유지하면서 열의 폭 변경하기

디자인 뷰 상태에서 변경할 열의 오른쪽 테두리를 드래그합니다.

인접한 열의 폭도 변경되므로 실제로는 두 열의 크기가 조절됩니다. 열이 조정되는 방식을 시각적으로 볼 수 있으며 표의 전체 폭은 바뀌지 않습니다.

표 폭을 유지하면서 열 폭 변경

참고:

표의 폭이 픽셀이 아닌 퍼센트 단위인 경우 가장 오른쪽 열의 오른쪽 테두리를 드래그하면 표 전체의 폭이 변경되고 모든 열이 비례에 맞게 넓어지거나 좁아집니다.

다른 열의 크기를 유지하면서 열의 폭 변경하기

디자인 뷰 상태에서 Shift 키를 누른 채 열의 테두리를 드래그합니다.

한 열의 폭이 변경됩니다. 열이 조정되는 방식을 시각적으로 볼 수 있으며 조절되는 열의 크기에 맞게 표의 전체 폭이 바뀝니다.

다른 열 폭을 유지하면서 열 폭 변경

행 높이를 시각적으로 변경하기

행의 아래쪽 테두리를 드래그합니다.

코드의 열 폭과 시각적 폭을 일치시키기

셀 내부를 클릭합니다.
표 머리글 메뉴를 클릭한 다음 [모든 폭 고정]을 선택합니다.

Dreamweaver에서 코드에 지정된 폭이 시각적 폭과 일치하도록 재설정됩니다.

표에 설정된 폭 또는 높이 모두 지우기

표를 선택합니다.
다음 중 하나를 수행합니다.
- [편집] > [표] > [셀 폭 지우기] 또는 [편집] > [표] > [셀 높이 지우기]를 선택합니다.
- 속성 관리자(윈도우 > 속성)에서 [행 높이 지우기] 버튼 또는 [열 폭 지우기] 버튼 을 클릭합니다.
- 표 머리글 메뉴를 클릭한 다음 모든 높이 지우기 또는 모든 폭 지우기를 선택합니다.

설정된 열 폭 지우기

열을 클릭하고 열 머리글 메뉴를 클릭한 다음 [열 폭 지우기]를 선택합니다.

표와 열의 폭 및 메뉴 활성화 또는 비활성화하기 (디자인 뷰 모드)

[보기] > [디자인 뷰 옵션] > [시각 도구] > [표의 폭]을 선택합니다.

행과 열 추가 및 제거

행과 열을 추가 및 제거하려면 [수정] > [표]를 선택하거나 열 머리글 메뉴를 사용합니다.

참고:

표의 마지막 셀에서 Tab 키를 누르면 표에 한 행이 자동으로 추가됩니다.

행 또는 열 하나 추가하기

셀을 클릭하고 다음 중 하나를 수행합니다.

[편집] > [표] > [행 삽입] 또는 [편집] > [표] > [열 삽입]을 선택합니다.

삽입 포인터 위에 행이 나타나거나 삽입 포인터 왼쪽에 열이 나타납니다.
열 머리글 메뉴를 클릭한 다음 [왼쪽에 열 삽입] 또는 [오른쪽에 열 삽입]을 선택합니다.

여러 행이나 열 추가하기

셀 내부를 클릭합니다.
[편집] > [표] > [행 또는 열 삽입]을 선택하고 대화 상자 작업을 완료한 다음 [확인]을 클릭합니다.

삽입

행을 삽입할지 또는 열을 삽입할지를 지정합니다.

행의 수 또는 열의 수

삽입할 행 또는 열의 수입니다.

위치

새 행이나 열의 삽입 위치를 선택된 셀의 행이나 열의 앞 또는 뒤로 지정합니다.

행 또는 열 삭제

다음 중 하나를 수행합니다.

삭제할 행이나 열 안에서 셀을 클릭한 다음 [편집] > [표] > [행 삭제] 또는 [편집] > [표] > [열 삭제]를 선택합니다.
전체 행 또는 열을 선택한 다음 Delete 키를 누릅니다.

속성 관리자(윈도우 > 속성)에서 다음 중 하나를 수행합니다.
- 행을 추가하거나 삭제하려면 [행] 값을 늘리거나 줄입니다.
- 열을 추가하거나 삭제하려면 [열] 값을 늘리거나 줄입니다.

참고:

데이터가 포함된 행이나 열을 삭제하더라도 Dreamweaver에서는 경고 메시지를 표시하지 않습니다.

셀 분할 및 병합하기

속성 관리자를 사용하거나 [편집] > [표] 하위 메뉴의 명령을 사용하여 셀을 분할하거나 병합할 수 있습니다.

표에서 둘 이상의 셀 병합하기

연속된 직선형 및 사각형 모양으로 셀을 선택합니다.

아래 그림에서는 셀 선택 영역이 사각형이므로 셀을 병합할 수 있습니다.

셀로 이루어진 직사각형에 셀을 병합할 수 있습니다.

아래 그림에서는 셀 선택 영역이 직사각형이 아니므로 셀을 병합할 수 없습니다.

선택 영역이 직사각형이 아니면 셀을 병합할 수 없습니다.
다음 중 하나를 수행합니다.
- [편집] > [표] > [셀 병합]을 선택합니다.
- 확장된 HTML 속성 관리자(윈도우 > 속성)에서 [셀 병합]을 클릭합니다.
참고:

이 버튼이 표시되지 않으면 속성 관리자의 오른쪽 아래에 있는 확장 화살표를 클릭하여 모든 옵션을 표시하십시오.

각 셀의 내용은 합쳐진 셀에 포함됩니다. 선택된 셀 중 첫 번째 셀의 속성이 병합된 셀에 적용됩니다.

셀 분할하기

셀을 클릭하고 다음 중 하나를 수행합니다.
- [편집] > [표] > [셀 분할]을 선택합니다.
- 확장된 HTML 속성 관리자(윈도우 > 속성)에서 [셀 분할]을 클릭합니다.
참고:

이 버튼이 표시되지 않으면 속성 관리자의 오른쪽 아래에 있는 확장 화살표를 클릭하여 모든 옵션을 표시하십시오.
[셀 분할] 대화 상자에서 셀 분할 방법을 지정합니다.

셀 분할

셀을 여러 행으로 분할할지 또는 여러 열로 분할할지를 지정합니다.

행의 수/열의 수

셀을 몇 개의 행 또는 열로 분할할지 지정합니다.

한 셀에 포함되는 행 또는 열의 수 늘리거나 줄이기

다음 중 하나를 수행합니다.

[편집] > [표] > [세로 셀 합치기] 또는 [편집] > [표] > [가로 셀 합치기]를 선택합니다.
[편집] > [표] > [세로 셀 나누기] 또는 [편집] > [표] > [가로 셀 나누기]를 선택합니다.

셀 복사, 붙여넣기 및 삭제하기

셀 서식을 그대로 유지하면서 표에서 하나 또는 여러 셀을 한 번에 복사하거나 붙여넣거나 삭제할 수 있습니다.

셀을 삽입 포인터 위치에 붙여넣거나 기존 표의 선택 영역 대신 붙여넣을 수 있습니다. 여러 표 셀을 붙여넣으려면 셀이 들어갈 표 또는 표의 선택 영역 구조가 클립보드의 내용과 호환되어야 합니다.

표 셀 잘라내기 또는 복사하기

연속된 직선형 및 사각형 모양으로 하나 이상의 셀을 선택합니다.

아래 그림에서는 셀 선택 영역이 사각형이므로 잘라내거나 복사할 수 있습니다.

셀로 이루어진 직사각형에서 셀을 잘라내거나 복사할 수 있습니다.

아래 그림에서는 셀 선택 영역이 사각형이 아니므로 잘라내거나 복사할 수 없습니다.

선택 영역이 직사각형이 아니면 셀을 잘라내거나 복사할 수 없습니다.
[편집] > [잘라내기] 또는 [편집] > [복사]를 선택합니다.

참고:

전체 행이나 열을 선택하고 [편집] > [잘라내기]를 선택하는 경우에는 셀의 내용뿐 아니라 행이나 열 전체가 표에서 제거됩니다.

표 셀 붙여넣기

셀을 붙여넣을 위치를 선택합니다.
- 기존 셀을 붙여넣는 셀로 대체하려면 클립보드에 있는 셀과 레이아웃이 같은 셀을 선택해야 합니다. 예를 들어 3 x 2 셀 블록을 복사했거나 잘라냈으면 붙여넣어 대체할 블록도 3 x 2 셀 블록으로 선택합니다.
- 특정 셀 위쪽에 셀 한 행을 모두 붙여넣으려면 해당 셀을 클릭합니다.
- 특정 셀 왼쪽에 셀 한 열을 모두 붙여넣으려면 해당 셀을 클릭합니다.
참고:

한 행 또는 한 열을 구성하는 셀 중 일부만 클립보드로 복사된 상태에서 하나의 셀을 클릭하여 클립보드의 셀을 붙여넣으면 클릭한 셀과 인접 셀이 표에서의 위치에 따라 붙여넣는 셀로 대체될 수 있습니다.
- 붙여넣는 셀로 새 표를 만들려면 삽입 포인터를 표 바깥에 둡니다.
[편집] > [붙여넣기]를 선택합니다.

기존 표에 전체 행이나 열을 붙여넣으면 해당 행이나 열이 표에 추가됩니다. 개별 셀을 붙여넣으면 선택된 셀의 내용이 대체됩니다. 표 바깥에 붙여넣으면 해당 행, 열 또는 셀을 사용하여 새로운 표가 정의됩니다.

셀은 그대로 두고 셀 내용만 제거하기

셀을 하나 이상 선택합니다.

참고:

이때 전체 행이나 열이 선택되지 않도록 합니다.
[삭제]를 누릅니다.

참고:

전체 행이나 열이 선택된 상태에서 [편집] > [지우기]를 선택하거나 Delete 키를 누르면 내용은 제외하고 전체 행이나 열이 삭제됩니다.

병합된 셀이 있는 행이나 열 삭제하기

해당 열이나 행을 선택합니다.
[편집] > [표] > [행 삭제] 또는 [편집] > [표] > [열 삭제]를 선택합니다.

표 중첩

중첩된 표는 다른 표의 셀 안에 들어 있는 표입니다. 중첩된 표에도 다른 표와 같이 서식을 적용할 수 있지만, 표 폭이 중첩된 표를 포함하고 있는 셀의 폭으로 제한됩니다.

기존 표의 셀을 클릭합니다.
[삽입] > [표]를 선택하고 [표 삽입] 옵션을 설정한 다음 [확인]을 클릭합니다.

표 정렬하기

하나의 열에 있는 내용을 기반으로 표의 행을 정렬할 수 있습니다. 두 열의 내용을 기반으로 보다 복잡한 방법으로 표를 정렬할 수도 있습니다.

colspan 또는 rowspan 속성을 포함하는 표(병합된 셀을 포함하는 표)를 정렬할 수 없습니다.

표를 선택하거나 표에 있는 임의의 셀을 클릭합니다.
[편집] > [표] > [표 정렬]을 선택하고 대화 상자에서 옵션을 설정한 다음 [확인]을 클릭합니다.

다음 기준으로 정렬

표의 행을 정렬하는 데 사용할 열 값을 결정합니다.

순서

열을 알파벳순으로 정렬할지 또는 숫자순으로 정렬할지와 오름차순(A - Z, 작은 수에서 높은 수) 또는 내림차순으로 정렬할지를 결정합니다.

열의 내용이 숫자이면 [숫자순]을 선택합니다. 한 자리 숫자와 두 자리 숫자가 섞여 있는 목록을 알파벳순으로 정렬하면 숫자를 단어로 취급하여 정렬합니다. 예를 들어 1, 2, 3, 10, 20, 30의 순서가 아닌 1, 10, 2, 20, 3, 30의 순서로 정렬됩니다.

다음 정렬/순서

다른 열을 기준으로 2차 정렬 순서를 결정합니다. [다음 정렬] 팝업 메뉴에서 2차 정렬의 기준 열을 지정하고 [순서] 팝업 메뉴에서 2차 정렬 순서를 지정합니다.

정렬 시 첫 번째 행 포함

표의 첫 번째 행을 포함하여 정렬하도록 지정합니다. 첫 번째 행이 고정된 머리글인 경우 이 옵션을 선택하지 마십시오.

머리글 행 정렬

본문 행과 동일한 기준을 사용하여 표의 thead 섹션(있는 경우)에 있는 모든 행을 정렬하도록 지정합니다. thead 행은 thead 섹션에 유지되며, 정렬한 후에도 표 맨 위에 계속 나타납니다. thead 태그에 대한 자세한 내용은 [참조] 패널(도움말 > 참조)을 참조하십시오.

바닥글 행 정렬

본문 행과 동일한 기준을 사용하여 표의 tfoot 섹션(있는 경우)에 있는 모든 행을 정렬하도록 지정합니다. tfoot 행은 tfoot 섹션에 유지되며, 정렬한 후에도 표 맨 아래에 계속 나타납니다. tfoot 태그에 대한 자세한 내용은 [참조] 패널(도움말 > 참조)을 참조하십시오.

정렬이 끝난 후 모든 행의 색상을 같게 유지

정렬 후 색상 등의 표 행 속성이 같은 내용에 계속 연결되어 있어야 함을 지정합니다. 표 행에 두 가지 대체 색상 서식이 적용된 경우에는 이 옵션을 선택하지 않아야 정렬된 표에서 대체 색상 적용 행이 유지됩니다. 행 속성이 각 행의 내용별로 다른 경우에는 이 옵션을 선택하여 정렬된 표에서 해당 행에 올바른 속성이 적용되도록 하십시오.

쉽고 빠르게 지원 받기

신규 사용자이신가요?