다음을 통해 공유

Visual Web Developer에서의 HTML 표 편집 소개

  • 아티클

업데이트: 2007년 11월

웹 페이지에 HTML 표를 사용하여 페이지 레이아웃을 정의하고 내용을 열 형식으로 표시할 수 있습니다. Visual Studio를 사용하면 HTML 표를 디자인 뷰에서 시각적으로 편집하거나 소스 뷰에서 태그로 편집할 수 있습니다.

디자인 뷰에서 표 편집

디자인 뷰에서 웹 페이지 디자이너는 HTML 표를 시각적으로 편집하는 데 사용할 수 있는 표 편집기를 제공합니다. 표 및 셀 속성을 설정할 수 있는 옵션이 포함된 대화 상자를 사용하거나 도구 상자를 통해 페이지에 표를 추가할 수 있습니다. 이 표는 브라우저에 나타나는 그대로 디자이너에 표시됩니다. 기본적으로 디자이너에서는 표에 테두리가 설정되지 않은 경우에도 쉽게 편집할 수 있도록 표 주위에 테두리를 표시합니다.

참고:

표 편집기는 웹 페이지 디자이너의 모든 요소와 마찬가지로 XHTML과 호환되는 태그를 만듭니다. 자세한 내용은 Visual Web Developer의 XHTML을 참조하십시오.

표 편집기를 사용하여 행, 열 또는 개별 셀을 선택하고 속성을 설정할 수 있습니다. 또한 열, 행 또는 셀의 크기를 변경할 수도 있습니다.

참고:

표 편집기를 사용하면 HTML 표(table 요소와 자식 요소)를 편집할 수 있지만 ASP.NET Table 컨트롤(asp:table 요소)은 편집할 수 없습니다. 일반적으로 ASP.NET Table 컨트롤은 표 형식의 디스플레이를 만들기 위해 프로그래밍 방식으로 사용되며 페이지의 레이아웃에는 사용되지 않습니다.

표 레이아웃 템플릿

때때로 HTML 표는 페이지에서 요소의 레이아웃을 정의하는 데 사용되므로 표 편집기에는 미리 정의된 레이아웃 템플릿이 포함되어 있습니다. 표를 만들 때 다음 항목을 정의하는 표를 포함하여 일반적인 레이아웃을 선택할 수 있습니다.

  • 머리글을 포함할 셀과 주 내용을 포함할 다른 셀

  • 주 내용을 포함할 셀과 추가 내용을 포함할 다른 셀

  • 각각 머리글, 추가 내용, 바닥글 및 주 내용을 포함할 셀

참고:

미리 정의된 템플릿을 사용하여 처음으로 표를 만드는 경우 이 표는 내용을 포함하지 않으므로 예상했던 것과 다르게 렌더링될 수 있습니다. 내용을 추가하여 표 레이아웃을 테스트하십시오.

레이아웃 템플릿을 사용하여 표를 만든 후에는 특정 레이아웃 요구 사항에 맞게 템플릿을 사용자 지정할 수 있습니다.

소스 뷰에서 표 편집

HTML 요소를 편집하는 것과 같은 방식으로 소스 뷰에서 HTML 표를 편집할 수 있습니다. 예를 들어 편집기에서는 다른 요소의 경우와 마찬가지로 표 요소에도 IntelliSense와 유효성 검사 기능을 제공합니다. 다음과 같은 편집기 기능은 소스 뷰에서 표로 작업하는 경우 특히 유용합니다.

참고 항목

작업

방법: Visual Web Developer에서 HTML 표 요소 추가 및 제거

방법: Visual Web Developer에서 HTML 표 요소 및 내용 선택

방법: Visual Web Developer에서 HTML 표 요소의 크기 조정