미국 공식 홈페이지 정부HTML의 테이블은 사용하기 매우 어렵습니다. 평판의 주된 이유는 코딩이 아니라 콘텐츠 제작의 저작 단계에서 비롯됩니다. 모든 웹 콘텐츠가 스크린 리더에서 액세스할 수 있도록 보장하는 것이 모범 사례(WCAG)이고, 연방법(508조)에 따라 정부 소유 웹 사이트에 대해 이를 요구하기 때문입니다. 테이블의 접근성을 보장하는 것이 가장 중요합니다. 이 페이지는 작성자(또는 편집자)가 자신의 콘텐츠에 대해 생각하고 프레젠테이션 디자인에 접근성을 포함하도록 안내하는 역할을 합니다.
아래 섹션을 사용하여 콘텐츠를 작성하거나 고객과 협력하여 정보 전달에 논리적인 방식으로 표 형식의 정보를 구성하고 웹에서 액세스할 수 있도록 하는 장벽을 제거하는 데 도움을 받으세요.
다음은 정보를 표시하는 데 사용할 수 있는 기본 HTML 테이블입니다. 이는 TAS 웹사이트에 표 형식의 정보를 전달할 때 "첫 번째 선택"이 되어야 합니다.
| 헤더셀1 | 헤더셀2 | 헤더셀3 | |
|---|---|---|---|
| 행제목 | $20,000 | $30,000 | $5,000 |
| 행제목 | 텍스트 데이터 | 추가 텍스트 | 추가 텍스트 |
다음은 위에 제시된 스타일을 생성하기 위해 테이블 HTML을 수정해야 하는 방법입니다.
<caption> 요소의 <tbody> 섹션, 어떤 것보다 먼저 <tr>. 여기에는 전체 표에 대한 굵은 "제목"이 포함됩니다. 안에 포함해서 <table> 요소는 스크린리더에게 전체 테이블을 설명하도록 보장합니다.style="width:100%" 부터 <table> 요소를 페이지 컨테이너의 너비에 걸쳐 강제로 적용합니다. 더 좁은 테이블을 원하는 경우 이는 선택 사항입니다.<table> 요소 - 테이블 테두리를 접도록 설정하고 TAS 웹 팔레트에 따라 색상을 지정합니다. 또한 CSS에서 다른 클래스가 적절하게 선택되도록 보장합니다.<th> 맨 윗줄에 있는 요소입니다. 이렇게 하면 TAS 웹 팔레트에서 배경색을 얻을 수 있습니다.<th> 요소에 "header" 대신 "left" 클래스를 추가합니다. 이렇게 하면 배경 음영이 적용되지 않고 텍스트가 셀 왼쪽에 정렬됩니다.scope 기인하다. 예를 들어; 첫 번째 행과 첫 번째 열이 모두 헤더인 경우 위 표와 같은 범위 속성이 필요합니다.style="width: __%;" 각각에 <th> 첫 번째 행에서 강조표시된 부분은 숫자입니다. 백분율은 테이블 열의 크기를 조정하는 데 적합해야 합니다. 이를 통해 디자인의 열을 제어할 수 있습니다. 너비를 생략하면 <th> 요소를 사용하면 공백 없이 가장 넓은 콘텐츠를 기반으로 유연하게 사용할 수 있습니다. 내용은 셀 내부에서 줄바꿈됩니다(<th> or <td>) 너비를 설정하지 않고 공백 문자에 위치합니다.이들 각각은 선택 사항이지만 TAS 웹 사이트의 기본 테이블에 대한 표준입니다.
다음은 표 형식 데이터를 간단한 HTML 표 형식에 맞추는 데 도움이 되도록 작성/편집 프로세스를 안내하는 몇 가지 팁입니다.
<caption> 테이블 이름을 지정하는 요소는 테이블 이름이 아닌 전체 이름을 지정하는 요소입니다. <h#> 외부에 있는 요소 <table> 요소입니다.<h#> 제목을 사용해야 하는 경우 테이블의 요소를 삭제합니다(즉, 테이블 내부 페이지의 h-요소 계층 구조를 깨지 마십시오).scope, colspan및 rowspan 속성을 적절하게
scope 세로 및 가로 테이블 머리글 셀이 모두 있는 경우 머리글 셀의 컨텍스트(예: 머리글 셀이 행에 대한 것인지 열에 대한 것인지)를 식별하는 데 사용됩니다.colspan 셀이 여러 열에 걸쳐 병합될 때 사용됩니다. - 병합된 열 수를 식별하기 위해rowspan 셀이 여러 행에 걸쳐 병합될 때 사용됩니다. - 병합된 행 수를 식별하기 위해