위한 건축 도구 Toolz.dev 내가 많은 HTML 테이블을 문서로,사용자에게 이메일로,가끔 일반 방문 페이지에 쓴다는 것을 의미합니다. 그리고 테이블은 아무도 손으로 쓰는 것을 좋아하지 않는 HTML 의 1 비트입니다. 열 행과 다섯 열은 오십 셀 태그를 넘고,모두 올바른 순서로 열고 닫아야하며,하나는 누락되었습니다 </td> 조용히 전체 레이아웃을 깬다. 스프레드시트에 데이터 더미가 있었고 마크업을 원했기 때문에 사이트에 생성기를 구축했다. 이것이 가이드입니다.
TL;DR: 툴즈 HTML 테이블 생성기 쉼표 또는 탭으로 구분된 데이터를 가져와 액세스 가능한 완전한 데이터를 작성합니다
<table>와 함께<thead>,<tbody>및 적절한 헤더 셀. 첫 번째 행이 될 수 있습니다<th scope="col">그리고 첫 번째 열<th scope="row">따라서 화면 판독기는 올바른 헤더를 발표합니다. 캡션,줄무늬 행 및 테두리를 추가하고 클래스 기반 CSS,이메일의 인라인 스타일 또는 일반 의미 HTML 을 선택합니다. 모든 셀은 이스케이프됩니다. 그것은 완전히 클라이언트 측에서 실행됩니다: 업로드 없음,가입 없음,오프라인으로 작동합니다.
HTML 테이블 생성기 란 무엇입니까?
HTML 테이블 생성기는 데이터의 행을 브라우저의 테이블로 렌더링하는 HTML 마크업으로 바꿉니다. 콤마로 구분되거나 탭으로 구분된 값을 붙여넣고 테이블의 모양을 선택하면 도구가 완전한 내용을 작성합니다 <table> 요소 <thead>, <tbody>그리고 그 안에 있는 행과 셀. 모두 손으로 입력하는 대신 <tr>, <th>, 그리고 <td> 그리고 셀을 계산하여 열을 정렬된 상태로 유지하면 데이터를 한 번 붙여넣고 페이지, 이메일 템플릿 또는 원시 HTML을 허용하는 Markdown 파일에 삭제할 준비가 된 백업 마크업을 복사할 수 있습니다.
생성기가 그 자리를 얻는 이유는 테이블 HTML 이 장황하고 반복적이며 반복은 실수가 숨겨지는 곳입니다. 모든 셀에는 여는 태그와 닫는 태그가 필요하고 헤더 셀은 데이터 셀과 다르며 모든 것이 직사각형으로 유지되어야하거나 브라우저가 엉망진창을 렌더링합니다. 작은 테이블을 넘어서는 모든 것을 손으로하는 것은 느리고 오류가 발생하기 쉽습니다. 도구는 결정론적으로 수행합니다: 값을 부여하고 유효하고 이스케이프되며 올바르게 중첩 된 마크 업을 생성합니다.
손으로 쓴 테이블이 종종 건너뛰는 원시 마크업 위에 접근성 레이어가 있는데,제가 가장 신경쓰는 부분입니다. 제대로 만들어진 테이블이 사용하는 <th> a가 있는 헤더 셀의 경우 scope 보조 기술이 주어진 데이터 셀이 속한 헤더를 발표할 수 있고 a를 전달할 수 있도록 속성입니다 <caption> 표에 포함된 내용을 설명합니다. 표 형식의 데이터에 대한 WHATWG HTML Living Standard's 섹션에서는 이러한 요소를 자세히 설명하고 생성기는 이를 사용자에게 남겨두지 않고 적용합니다 <div> 테이블처럼 보이지만 화면 판독기에 노이즈로 읽혀지는 그리드입니다.
그냥 손으로 테이블을 작성하지 않겠습니까?
두 개씩 테이블을 들어,손으로 쓰는 것은 도구를 여는 것보다 빠르며,당신은해야합니다. 생성기는 실제로 고통스러운 테이블에 그것의 유지를 번다: 실제 데이터,많은 행,헤더가있는 것들에,손으로 쓰는 것은 세 가지 반복 실패 모드를 가지고 있습니다.
첫 번째는 깨진 구조입니다. 50 개 중 하나의 닫는 태그를 놓치고 browser's 오류 복구는 예측할 수 없는 작업을 수행하며 이를 시작한 셀을 찾는 데 몇 분을 낭비합니다. 두 번째는 일관성이 없는 열입니다. 한 행에 4 개의 셀이 있고 나머지 행에 5 개가 있으면 테이블이 비뚤어지게 렌더링되며 태그 벽에서 짧은 행을 발견하는 것은 정말 어렵습니다. 세 번째는 이스케이프: a 가 포함된 데이터를 붙여넣습니다 <, 안 &또는 길 잃은 사람 " 바로 감방에 들어가 마크업을 깨뜨리거나 작은 주입 구멍을 열었습니다.
생성기는 세 가지를 모두 제거합니다. 짧은 행을 패딩하여 모든 행에 동일한 수의 셀이 있고 테이블은 직사각형으로 유지됩니다. 항상 열리는 것을 닫습니다. 그리고 모든 셀 값을 HTML 이스케이프하므로 a < 된다 < 그리고 태그로 읽히지 않고 텍스트로 표시합니다. 붙여넣는 것은 안전하게 렌더링된 것입니다.
여기 한 테이블의 결정이 있습니다.
| 상황 | 사용 | 왜 |
|---|---|---|
| 작은 2x2 테이블 | 손으로 쓰세요 | 어떤 것을 여는 것보다 더 빨리 |
| 많은 행과 헤더가 있는 실제 데이터입니다 | HTML 테이블 생성기 | 탈출, 중첩 및 정렬은 핸드 테이블이 깨지는 곳입니다 |
| 대신 Markdown 테이블을 원합니다 | 마크다운 테이블 생성기 | 같은 아이디어, GitHub 맛의 Markdown 출력 |
| CSV를 보거나 확인하려는 것뿐입니다 | CSV 뷰어 | 마크업을 생성하지 않고 데이터를 읽습니다 |
테이블을 어떻게 접근 가능하게 만들 수 있나요?
이것은 단지 바로 보이는 테이블과 모든 사람에게 적합한 테이블을 구분하는 질문이므로 자체 섹션을 얻습니다. 두 가지가 중요합니다: 헤더 셀과 캡션.
헤더 셀 먼저. 실제 테이블에서 행이나 열에 레이블을 지정하는 셀은 다음과 같아야 합니다.In the real table, the cells that label rows or columns should be <th>, 아니다 <td>그리고 각각 <th> a를 휴대해야 합니다 scope 열의 머리글인지 여부를 나타내는 속성입니다(Attribute saying whether it heads a column)scope="col") 또는 행(scope="row"). 스크린 리더는 사용합니다 scope 각 데이터 셀 전에 관련 헤더를 발표하려면 청취자가 "역할: Engineer" 베어 "Engineer" 컨텍스트가 없는 대신. generator's 첫 번째 행 헤더 옵션이 방출됩니다 <th scope="col"> 맨 위 행의 경우 첫 번째 열 헤더 옵션이 방출됩니다 <th scope="row"> 각 본문 행의 선두 셀의 경우. 테이블에 대한 W3C's WAI 튜토리얼에서는 간단한 데이터 테이블에 대해 정확히 이 패턴을 권장합니다.
캡션은 두번째 작품입니다. A <caption> 테이블 바로 안쪽에 위치한 Element 는 보조 기술이 읽어내고 시각을 가진 사용자가 그리드 위에 볼 수 있는 제목을 테이블에 부여합니다. 어쨌든 테이블 위에 쓸 문장과 동등한 접근 가능한 항목입니다. 생성기는 캡션 필드를 채울 때 하나를 추가하고 다른 텍스트처럼 빠져나갑니다. 캡션과 범위가 지정된 헤더 사이에서 출력은 우연히 통과하는 모양이 아닌 화면 판독기가 탐색할 수 있는 테이블입니다.
스타일링 모드의 차이점은 무엇입니까?
이 도구는 스타일을 전달하는 세 가지 방법을 제공합니다. 테이블이 어디로 가는지 작동 방식이 바뀌기 때문입니다.
클래스 모드는 테이블에 클래스 이름을 추가하고 스타일시트에 놓을 수 있는 CSS 의 일치하는 블록을 출력합니다. 이것은 웹 사이트에 적합한 선택입니다: 마크업은 깨끗하게 유지되고 스타일링은 한 곳에 살며 얼룩말 줄무늬 사용과 같은 기능이 있습니다 tbody tr:nth-child(even)스타일시트에서만 작동합니다. 대신 인라인 모드는 각 요소에 스타일을 직접 씁니다 style 속성. 그것은 더 추악한 마크업이지만 대부분의 클라이언트가 스트립하는 HTML 이메일에 필요한 것입니다 <style> 블록과 외부 CSS,그래서 스타일링은 모든 요소를 따라 가야합니다. 없음 모드는 클래스도 스타일도 전혀없는 일반 의미 HTML 을 출력합니다. 이는 자신의 디자인 시스템이 있고 단지 그것을 걸기 위해 정확하고 접근 가능한 구조가 필요할 때 원하는 것입니다.
나는 기본적으로 클래스 모드에 도달, 내가 이메일에 붙여 넣기 할 때만 인라인 모드, 내가 이미 전역적으로 테이블을 스타일링 사이트에 테이블을 드롭 할 때 없음 모드. 이 도구는 데이터를 다시 입력하지 않고 그들 사이를 전환 할 수 있습니다, 그래서 맞는 볼 수있는 세 가지 모두 시도 클릭의 커플입니다.
발전기는 어떻게 사용하나요?
흐름은 네 단계입니다. 입력 상자에 쉼표로 구분되거나 탭으로 구분된 행을 붙여넣습니다; 구분자가 자동으로 감지되며 데이터가 모호한 경우 이를 재정의할 수 있습니다. 첫 번째 행이 열 헤더인지,각 행의 첫 번째 열이 행 헤더인지 결정합니다. 캡션을 추가하고 줄무늬 행,테두리 또는 컴팩트 레이아웃을 켜고 클래스 기반 CSS,인라인 스타일 또는 일반 HTML 을 선택합니다. 그런 다음 HTML 생성 및 복사와 클래스 모드에서 일치하는 CSS 를 클릭합니다.
구문 분석은 CSV 의 비공식 표준인 RFC 4180 을 따르므로 큰따옴표로 감싼 필드는 구분 기호를 포함할 수 있으며 따옴표 필드 안에 두 배로 된 따옴표는 작은따옴표가 됩니다. 즉,같은 셀을 의미합니다 "Doe, Jane" 쉼표로 분할하는 대신 하나의 셀을 유지합니다. 그리고 모든 것이 브라우저에서 실행되기 때문에 고객 이름,내부 수치 또는 서버에서 원하지 않는 다른 모든 것을 포함하는 데이터를 붙여 넣을 수 있으며 머신을 떠나지 않습니다. 해당 클라이언트 측 모델은 사이트의 나머지 부분 뒤에 있는 것과 동일합니다 데이터 개인 정보 보호 온라인 도구 가이드.
이것이 다른 도구와 어떻게 맞습니까?
HTML 테이블 생성기는 구조화된 데이터를 가져와 정리 마크업을 전달하는 작은 도구 그룹에 있습니다. 가장 가까운 이웃은 다음과 같습니다 마크다운 테이블 생성기는 동일한 작업을 수행하지만 웹 페이지용 HTML 대신 README 및 문제에 대해 GitHub 맛이 나는 Markdown을 출력합니다. 생성된 table's 마크업이 정리를 원하거나, reindent에 손으로 쓴 테이블 HTML 더미가 있을 때, the HTML 포맷터 아름답게 합니다. 그리고 HTML 과 Markdown 문서 사이를 이동할 때,the HTML에서 Markdown 변환기로 왕복 여행을 처리하며 테이블이 포함되어 있습니다.
연결 아이디어는 데이터가 한 모양으로 살고 다른 모양으로 필요하며 결정론적 도구가 사람이 직접 편집하는 태그보다 번역을 더 잘 수행한다는 것입니다. 웹용으로 구축하면 웹 개발자 툴킷 검거는 이것이 어떻게 서로 맞는지 보여줍니다 개발자 생산성 도구 가이드는 하루에 여러 번 각각 몇 분씩 절약되는 더 넓은 소규모 유틸리티 세트를 다룹니다.
문서 작성의 실제 예입니다
이것을 구체적으로 만들어 보겠습니다. 사이트 주변의 많은 문서는 기능 비교 및 참조 테이블 세트입니다: 어떤 도구가 무엇을 하는지,어디에 제한이 적용되는지,주어진 옵션이 무엇을 의미하는지. 스프레드시트는 편집 및 정렬이 쉬운 곳이기 때문에 대부분의 데이터는 스프레드시트에서 수명을 시작합니다. 내 페이지 중 일부가 렌더링하지 않는 Markdown 으로 내보내거나 HTML 테이블을 손으로 입력하는 것을 의미하는 데 사용되는 페이지에 가져 오는 것은 20 행 참조의 경우 진정으로 비참한 10 분입니다.
이제 클립보드에 탭으로 구분된 값을 넣는 스프레드시트에서 바로 열을 복사하여 생성기에 붙여넣고 탭 구분 기호를 자동 감지하도록 합니다. 첫 번째 행을 헤더로 유지하고 테이블을 설명하는 캡션을 추가하고 클래스 모드에서 줄무늬 행과 테두리를 켜고 HTML 과 CSS 를 모두 복사합니다. 마크업이 페이지에 떨어지고 CSS 는 스타일시트에 한 번 들어가고 그 후 모든 테이블에서 재사용되며 전체 헤더 셀은 1 분 미만으로 나옵니다 <th scope="col">따라서 테이블에 대해 생각하지 않고도 액세스할 수 있으며 모든 값이 이스케이프되므로 a가 포함된 행이 됩니다 < 코드 참조에서는 페이지가 폭발하지 않습니다.
제가 이 테이블들을 손으로 쓰는 것보다는 생성기를 사용하는 이유는 HTML 이 어렵다는 것이 아니라 HTML 이 지루하고 지루한 부분이 제가 버그를 소개하는 곳이기 때문입니다. 태그 입력,탈출, 접근성 속성을 도구에 오프로드하는 것은 첫 번째 붙여넣기에서 테이블이 정확하다는 것을 의미하며,배관 대신 테이블의 내용에 주의를 기울입니다. 이메일의 경우 뉴스레터 도구가 스트립되기 때문에 인라인 모드에서 동일한 데이터를 재생성합니다 <style> 블록 및 인라인 버전은 여행에서 그대로 유지됩니다.
알만한 가치가 있는 한계는 무엇입니까?
몇 가지 정직한 가장자리. 첫 번째는이 도구가 빌드된다는 것입니다 데이터 헤더와 값 행이 있는 종류의 테이블입니다. 레이아웃 도구도 아니고 colspan이나 rowspan도 수행하지 않습니다. 복잡한 테이블에서 가끔 볼 수 있는 병합 셀 트릭입니다. 병합된 셀은 어쨌든 화면 판독기가 테이블을 탐색하기가 훨씬 더 어렵게 만들고 대다수의 표 형식 데이터에 대해 테이블이 필요하지 않습니다. 여러 열에 걸쳐 병합된 헤더가 정말로 필요한 경우, 즉 생성된 마크업에 대한 수동 편집입니다 HTML 포맷터 나중에 깔끔하게 유지하겠습니다.
두 번째는 생성기가 데이터를 텍스트로 읽고 유형에 대해 영리하려고하지 않는다는 것입니다. 숫자의 열은 각 셀에서 텍스트로 방출되며,이는 디스플레이에 정확히 적합합니다; 숫자를 올바르게 정렬하거나 수천 개의 구분 기호를 추가하지 않습니다. 왜냐하면 그것들은 당신에게 속한 스타일링 및 서식 결정이기 때문입니다. 그것이 보장하는 것은 붙여 넣은 값이 셀의 값이며 이스케이프되고 변경되지 않았다는 것입니다.
세 번째는 구분 기호 모호성입니다. 자동 감지는 행에서 가장 일관된 열 수를 제공하는 구분 기호를 찾아 작동하며 깨끗한 CSV 및 TSV 에 신뢰할 수 있습니다. 데이터가 실제로 모호한 경우,예를 들어 일부 행에 인용되지 않은 쉼표가 포함된 값의 경우 감지가 잘못 추측할 수 있으므로 구분 기호를 고정된 결정이 아닌 수동 재정의로 명시적으로 설정하고 구문 분석은 결정론적입니다.
마지막으로 클래스 모드에서 생성 된 CSS 는 합리적이고 중립적 인 출발점입니다: 가벼운 헤더 배경,얇은 테두리,편안한 패딩. 그것은 편집하기위한 것입니다. 브랜드에 맞게 색상을 변경하고,패딩을 조정하고,스트라이핑을 떨어 뜨립니다; 그것은 명확한 클래스 이름을 가진 평범한 CSS 이며 tool's 작업은 최종 모양을 지시하는 것이 아니라 첫 번째 초안을 저장하는 것입니다.
자주 묻는 질문
HTML 테이블 생성기 란 무엇입니까? HTML 테이블 생성기는 데이터의 행을 테이블로 렌더링하는 HTML 마크업으로 변환합니다. CSV 또는 탭으로 구분된 값을 붙여넣으면 완전한 값을 작성합니다 요소 , 및 셀을 사용하므로 모든 태그를 손으로 입력할 필요는 없습니다.
CSV 를 HTML 테이블로 변환하려면 어떻게 해야 하나요? 입력 상자에 CSV 를 붙여넣고,열 이름이 포함된 경우 첫 번째 행을 헤더로 유지하고,스타일링을 선택한 다음 생성을 클릭합니다. 이 도구는 구분 기호를 감지하고,테이블을 빌드하며,페이지에 바로 복사할 수 있는 HTML 을 제공합니다.
테이블을 어떻게 접근 가능하게 만들 수 있나요? 헤더 셀과 캡션을 사용합니다. 첫 번째 행 헤더를 켜서 열 제목이 됩니다 를 사용하고 행 레이블에 대해 첫 번째 열 헤더를 활성화하고 테이블을 설명하는 캡션을 추가합니다. 그런 다음 화면 판독기는 각 셀에 대한 올바른 헤더를 발표합니다.스타일링 모드의 차이점은 무엇입니까? 클래스 모드는 클래스 이름과 별도의 CSS 블록을 추가하는데,이는 웹사이트에 가장 적합합니다. 인라인 모드는 각 요소에 스타일을 직접 작성하며,이메일에 붙여넣어도 살아남습니다. 없음 모드는 일반 의미 HTML 을 출력하므로 자신만의 스타일시트를 적용할 수 있습니다.
내 데이터의 특수 문자가 이스케이프됩니까? 예. 모든 셀 값은 HTML 이스케이프 처리되므로 <, >, & 및 "와 같은 문자는 엔터티로 작성되고 마크업으로 해석되는 대신 텍스트로 표시됩니다. 이렇게 하면 데이터에 앵글 괄호나 앰퍼샌드가 포함되어 있을 때 테이블이 깨지지 않습니다.
셀 내부의 쉼표를 처리할 수 있나요? 예. 파서는 RFC 4180 을 따르므로 큰따옴표로 감싼 필드는 구분자를 포함할 수 있으며,따옴표 필드 안에 있는 두 배의 따옴표는 작은따옴표가 됩니다. 따옴표로 된 쉼표는 새 열을 시작하는 대신 셀의 일부를 유지합니다.
내 데이터가 어디에나 업로드됩니까? 아니요. 변환은 전적으로 기기에서 JavaScript 를 사용하여 브라우저에서 이루어집니다. 데이터는 업로드,로그 또는 저장되지 않으며,페이지가 로드되면 도구가 네트워크 연결을 끊은 상태로 계속 작동합니다.
HTML 테이블 생성기는 무료인가요? 예. 가입도 없고 워터마크도 없고 사용량 상한선도 없이 완전 무료입니다. 개인 또는 상업 프로젝트에 필요한 만큼 HTML 테이블을 생성합니다.
