HTML 표는 일반적으로 행과 열로 구성되어 있는데 스프레드시트와 유사합니다.
이는 데이터를 표시하는 데 사용되며 판매 수치, 날씨 통계, 스포츠 결과, 여기 표시된 예제를 예로 들 수 있습니다.
수년 동안 디자이너들이 페이지 레이아웃용으로 표를 이용해왔는데요.
그러한 경우 시각장애인이나 다른 장애가 있는 사용자에게 접근성 문제를 초래할 수 있습니다.
따라서 표는 데이터용으로만 사용해야 합니다.
그러면 Dreamweaver CC에서 표를 삽입하는 방법을 살펴보죠.
먼저 비어 있는 새 HTML 페이지를 만들어보죠.
파일, 새 파일, HTML, 레이아웃은 "없음"을 선택한 다음 이 페이지의 저장 위치를 DWCC2014 > exercises로 지정하고 이름을 "table_insert.html"이라고 입력합니다.
표를 삽입하는 방법은 다양합니다.
먼저 디자인 뷰에 있는지 확인합니다.
라이브 뷰에서는 표를 삽입할 수 없습니다.
가능하긴 하지만 매우 어렵습니다.
삽입 메뉴에서 Table을 선택합니다.
또한 키보드 단축키를 사용할 수 있는데, Windows의 경우 Ctrl + Alt + T, Mac의 경우 Command + Option + T입니다.
삽입 패널을 사용할 수도 있는데요.
삽입 패널을 선택하는 경우 패널 왼쪽 상단에 있는 메뉴에서 일반을 선택한 다음 표를 삽입할 수 있습니다.
Table을 클릭하면 Table 대화 상자가 열리고 행과 열의 값을 입력합니다.
이 값은 나중에 언제든지 변경할 수 있습니다.
행과 열의 값을 각각 6과 3으로 입력해보죠.
표의 폭은 입력하지 않는 것이 좋습니다.
표는 콘텐츠에 맞게 자동으로 확장되기 때문입니다.
HTML에서 테두리 두께는 1 픽셀로만 설정해야 하는데요.
표 테두리를 굵게 만들려면 CSS로 설정해야 합니다.
하지만 대부분 경우 표 테두리는 없는 것이 더 나으므로 제거하겠습니다.
셀 패딩은 각 표의 셀에 가로 공간과 세로 공간을 추가해 줍니다.
이 옵션을 통해 공간을 동일하게 추가할 수 있습니다.
HTML5에서 셀 패딩은 사용되지 않는데요.
따라서 CSS를 사용하는 것이 좋습니다.
셀 간격도 마찬가지입니다.
각 셀 주위에 공간을 동일하게 추가할 수 있는데 이 역시 CSS로 작업하는 것이 훨씬 좋습니다.
다음 섹션에서는 머리글 셀을 추가할지 결정합니다.
머리글 셀을 없애거나 왼쪽 또는 위쪽에 추가할 수 있고 또는 왼쪽과 위쪽 모두에 추가할 수도 있습니다.
그럼 모두를 선택해보죠.
액세스 가능성 섹션을 보면 캡션을 추가할 수 있는 옵션이 있습니다.
표에 캡션을 추가할 경우 자리 표시자를 놓는 것이 좋은데요.
표를 만든 다음에는 Table 대화 상자를 다시 열 수 없기 때문입니다.
따라서 캡션을 만들려면 이때 해야 하는데요.
아니면 나중에 기존의 HTML 코드로 이동하여 캡션을 수동으로 삽입해야 합니다.
"Placeholder caption"이라고 입력해보겠습니다.
요약은 HTML5에서 제거되어 더 이상 사용되지 않습니다.
표의 요약 요소가 웹 페이지에서 실제로 표시되지 않고 전반적으로 액세스 가능하도록 만들어졌습니다.
따라서 캡션을 사용하거나 표의 내용 설명을 위한 다른 방법을 이용하는 것이 좋습니다.
원하는 대로 설정했다면 확인을 클릭합니다.
그러면 자리 표시자 캡션과 표가 삽입됩니다.
현재 표가 비어 있고 셀 크기가 너무 작아 무언가를 입력하기가 쉽지 않습니다.
이때 표 위로 마우스를 가져간 다음 마우스 오른쪽 버튼으로 클릭하고 표시되는 메뉴에서 표를 선택한 다음 아래로 내려가 확장 표 모드를 선택합니다.
그러면 셀이 확장되어 텍스트를 삽입하기가 수월해집니다.
이것은 Dreamweaver CC의 시각적인 툴로 표에 아무런 영향을 미치지 않고 기존 HTML도 그대로 유지됩니다.
이처럼 셀 안을 클릭해 손쉽게 입력할 수 있습니다.
머리글을 추가한 다음 Tab을 눌러 다음 셀로 이동합니다.
첫 번째 행에 콘텐츠를 삽입한 다음 확장 표 모드를 종료하기 위해 상단에 있는 종료를 클릭하면 표가 일반 크기로 축소됩니다.
머리글이 왼쪽과 위쪽 모두에 추가되도록 선택했기 때문에 위쪽의 행이 모두 굵게 표시됩니다.
이 셀을 클릭하고 숫자를 입력하면 역시 굵게 표시되고 가운데로 정렬되는데 "th" 요소를 사용했기 때문입니다.
다음 셀에 텍스트를 입력하면 왼쪽으로 정렬되고 일반 텍스트로 삽입됩니다. "td" 표 데이터 셀을 사용했기 때문이죠.
이처럼 입력을 시작하면 표 셀이 자동으로 콘텐츠에 맞게 확장됩니다.
디자인 뷰를 보면 표 셀을 구분해 주는 이러한 점선이 있는데 라이브 뷰로 전환하면 점선이 사라지고 브라우저에서 표시되는 모양을 보여줍니다.
디자인 뷰로 다시 돌아가 표에 콘텐츠를 계속 추가합니다.
Dreamweaver CC에서 표를 삽입하는 방법은 다양한데요.
한 가지 방법은 삽입 패널에서 Table을 선택하는 것입니다.
이때 패널 왼쪽 상단에서 일반을 선택해야 합니다.
또는 삽입 메뉴에서 Table을 선택하거나 키보드 단축키를 사용할 수 있는데, Windows의 경우 Ctrl + Alt + T, Mac의 경우 Command + Option + T입니다.
표의 삽입 지점은 디자인 뷰에서 현재 위치한 곳이 됩니다.
Table 대화 상자에서 원하는 행과 열의 값을 입력하고 폭은 제거하는 것이 좋습니다.
표는 삽입되는 콘텐츠에 맞게 자동으로 확장되기 때문입니다.
또한 표 머리글을 포함할지 결정해야 하는데 표 머리글 추가를 왼쪽 열, 위쪽 행, 모두 또는 없음으로 설정할 수 있습니다.
표 캡션을 추가할 수도 있는데요.
일반적으로 표 상단에 표시되는데 CSS를 사용하여 아래로 이동시킬 수 있습니다.
