CSV를 붙여 넣거나 가격표 및 영업시간 양식으로 시작하세요. 캡션, 헤더 셀, scope가 있는 HTML 표를 안전하게 생성하고 복사할 수 있는 간단한 반응형 CSS도 제공합니다.
스프레드시트나 CSV의 행을 붙여 넣거나 서비스 가격표 및 영업시간 양식으로 시작하세요. 캡션과 헤더 셀, 스크린 리더가 사용하는 scope 속성이 포함된 올바른 HTML 표와 휴대전화에서도 읽기 쉬운 짧은 CSS를 만들 수 있습니다. 모든 값을 이스케이프하므로 붙여 넣은 텍스트가 페이지를 망가뜨리지 않습니다. 모든 기능은 브라우저에서 실행됩니다. 입력한 내용은 We.Inc나 다른 곳으로 전송되지 않으며 탭을 닫으면 사라집니다.
양식을 선택하거나 직접 행을 붙여 넣으세요. 쉼표, 스프레드시트의 탭, 세미콜론을 사용할 수 있으며 값 안의 쉼표도 따옴표로 묶으면 함께 유지됩니다.
첫 번째 행을 열 제목으로 사용할지, 첫 번째 열을 각 행의 제목으로 사용할지 선택하세요. 해당 셀은 scope 속성이 있는 th 셀이 됩니다.
캡션을 작성하세요. 스크린 리더 사용자에게 표의 이름을 알려 주고 모든 사용자에게 표 위에 표시됩니다.
스타일을 선택하고 데스크톱 및 휴대전화 너비에서 미리 보세요. 작은 화면에서 넓은 표는 찌그러지는 대신 자체 영역 안에서 좌우로 스크롤됩니다.
HTML과 CSS를 복사하거나 두 가지를 하나의 파일로 다운로드하세요.
가격이나 영업시간처럼 행과 열이 있는 데이터에만 표를 사용하세요. 페이지 레이아웃에는 CSS를 사용하세요.
제목은 짧게 쓰세요. 스크린 리더가 내용을 알릴 때마다 반복해서 읽습니다.
단위를 모든 셀마다 쓰지 말고 제목에 넣으세요(가격, USD).
꼭 필요한 경우가 아니라면 셀을 병합하지 마세요. 스크린 리더로 따라가기 어렵습니다.
휴대전화 너비에서 표를 확인하세요. 좌우로 한 번 넘기는 것보다 더 많이 움직여야 한다면 표를 나누는 방법을 고려하세요.
자주 묻는 질문
접근성을 갖춘 HTML 표란 무엇인가요?
표 이름을 알려 주는 캡션, 열과 행 제목에 사용하는 th 헤더 셀, 제목이 열이나 행 중 어디에 해당하는지 지정하는 scope 속성이 필요합니다. 스크린 리더는 이를 사용해 각 값과 관련된 제목을 알려 줍니다. 이 생성기는 세 가지를 모두 추가합니다.
표를 div로 만들면 안 되나요?
div 격자를 표처럼 보이게 할 수 있지만 보조 기술은 어떤 셀이 어떤 제목에 속하는지 알 수 없습니다. 실제 표 요소를 사용하면 이 의미가 기본으로 제공됩니다.
반응형 표는 어떻게 표시되나요?
좁은 화면에서는 표가 좌우로 스크롤되는 영역 안에 표시됩니다. 영역에 키보드 포커스를 둘 수 있고 캡션으로 이름이 지정되어 키보드 사용자도 스크롤할 수 있습니다.
입력 데이터는 이스케이프되나요?
네. 셀의 앰퍼샌드, 꺾쇠괄호, 따옴표가 HTML 엔티티로 바뀝니다. 따라서 <script>가 포함된 셀은 실행되지 않고 텍스트로 표시됩니다.
Excel이나 Google Sheets에서 바로 붙여 넣을 수 있나요?
네. 복사한 셀은 탭으로 구분되어 들어오며 도구가 자동으로 인식합니다.
무료인가요?
네. 가입할 필요가 없으며 브라우저에서 실행됩니다.
가격표와 영업시간은 표로 작성하세요
대부분의 소규모 비즈니스 사이트에는 비용과 영업시간을 보여 주는 표가 적어도 두 개 있습니다. 둘 다 실제 표 형식 데이터이므로 표로 마크업해야 합니다. 각 가격은 서비스에, 각 시간은 요일에 연결되어야 합니다.
이 도구의 양식은 두 가지 형식으로 시작할 수 있게 합니다. 게시하기 전에 예시 행을 내 정보로 바꾸세요. 예시는 실제 가격이 아닙니다.