이상하게도, 마스터하기 가장 어려운 웹 기술 중 하나는 일반 텍스트와 이미지 다음에 브라우저에서 사용할 수있는 가장 빠른 기술 중 하나입니다. 생각해야 할 다양한 장치 유형으로 인해 오늘날의 문제는 더욱 커지고 있습니다.
문제가 발생하지 않는 항목이 너무 적 으면 완벽한 테이블을 만드는 것이 거의 불가능합니다. 발생할 수있는 오류의 종류는 다음과 같습니다.
- 텍스트 줄 바꿈이 잘못되었습니다
- 정당화 오류
- 화면에서 테이블 렌더링
- 스크롤 문제
- 행 높이 오류
- 열 너비 오류
- 일반적인 추악함
이 기사에서는 이와 같은 문제를 피하는 방법을 살펴보고 테이블이 좋은 인상을 줄 수있는 가장 좋은 기회를 제공합니다.
회피 전략
테이블을 제대로 작성하기가 어렵 기 때문에 일부 사람들은 테이블 사용을 피하려고합니다. 몇 가지 일반적인 전략은 CSS를 사용하여 가짜 테이블을 만들고 데이터 테이블의 이미지를 코드로 구현하지 않고 이미지를 사용하는 것입니다.
이러한 회피 전략은 모두 결함이 있으므로 피해야합니다. CSS를 사용하여 테이블을 모방하면 테이블에 내재 된 의미 체계가 부족하여 사용성 및 접근성 문제가 발생할 수 있습니다.
테이블 이미지는 소개에 나열된 문제를 겪지 않지만 SEO 잠재력을 저하 시키며 데이터를 업데이트해야하는 경우 쉽게 수정할 수 없습니다. 사용성 및 접근성 문제도 소개합니다.
프레임 워크는 당신의 친구입니다
Bootstrap 및 Foundation과 같은 일반적인 프레임 워크에는 많은 시간 절약 도구가 포함되어 있으며 테이블도 예외는 아닙니다. Bootstrap에서 고급스럽게 보이는 테이블을 만드는 것은 어렵지 않지만 노력에 맞춤 조정을 추가하지 않고 랙에서 빌드하면 몇 가지 제한 사항이 있습니다.
외모가 전부는 아닙니다
내용과 스타일은 항상 독립적이어야하므로 특수한 테이블 스타일이 적용되기 전에보기 좋게 보이도록 먼저 일반 HTML로 테이블을 작성하는 것이 좋습니다.
이것은 또한 좋은 테이블 구성에는 단순히 테이블을 보기 좋게 만드는 것 이상의 것이 필요하다는 것을 상기시키는 데 도움이 될 수 있습니다. 그것은 또한 유용해야합니다format이온 전달 시스템. 테이블의 목표가 전달하는 것이 아닌 경우format이온, 당신이하고있는 무엇이든 테이블을 사용해서는 안됩니다.
접근성을 목표로
인쇄 된 텍스트를보고 읽는 데 어려움이있는 사람들이 있으므로 테이블에 액세스 할 수 있도록하는 것이 좋습니다. 테이블의 접근성을 높이기 위해 알아야 할 모든 것을 찾을 수 있습니다. WebAIIM.
테이블 구성 요소에 ID 값 제공을 고려하십시오.
표의 각 부분 (행, 셀)을 최대한 제어하려면divi이중 ID 값. 클래스 값을 추가하면 더 많은 유연성을 얻을 수 있습니다.
이 작업을 수행하면 작업이 훨씬 많아 지므로 참조로 항목을 미세 조정할 수 있어야 할 때만 실용적입니다. 이 작업을 수행하기로 결정한 경우 JavaScript 및 CSS를 사용하여 테이블 항목을 직접 조작 할 수 있습니다.
테이블 작성의 복잡성 중 하나는 행을 선언하지만 열은 선언하지 않는다는 것입니다. 열은 각 행에 배치하는 데이터 항목 수에 따라 동적으로 생성됩니다. 이것이 테이블이 페이지 로딩 시간을 증가시키는 이유입니다.
효과적으로 열은 페이지가 렌더링되기 전에 추상적 인 의미로만 존재하므로 어떤 종류의 참조도 제공 할 수 없습니다. 행의 첫 번째 TD 항목에 "firstCol"과 같은 클래스를 지정하면 열을 직접 참조하는 방법을 제공 할 수 있습니다.
컴팩트 한 테이블이 최고
크고 높은 가시성 구성 요소로 모든 것을 만드는 것이 유행이되었습니다. 접근성 관점에서 볼 때 이것은 훌륭합니다. 그러나 사용성 측면에서 문제가 발생할 수 있으므로 항상 최선의 방법은 아닙니다.
Bootstrap 개발자는 다음과 같이 실험했습니다. responsive 테이블이지만 테이블과 responsive잘 어울리지 않습니다. 세로 모드에서 모바일 화면에 맞도록 처음부터 테이블을 디자인하는 것은 현명한 조치입니다.
테이블은 항상 스크롤 가능해야합니다
항상 테이블 자체의 오버 플로우 값을 자동으로 설정하는 것이 좋지만 테이블 자체에서는 그렇지 않습니다. 대신, 다음과 같이 div 안에 테이블을 래핑하십시오.
그런 다음 테이블 본문을 구성하는 PHP 코드가 많이 있습니다.
테이블을 스크롤 가능하게 만드는 작업은 첫 번째 행에 있습니다. 여기서 테이블 랩 div의 높이는 고정되어 있으며 오버플로 값은 자동으로 설정되어 있습니다. 테이블 주위의 랩퍼 대신 테이블 자체에이를 수행하면 의도하지 않은 결과가 발생할 수 있습니다.
필요한 경우 무거운 타자를 불러
간단한 테이블의 경우 이는 과도하지만 열 너비 조정 및 열 정렬과 같은 장점이 실제로 필요한 테이블이있는 경우 복잡한 테이블을 구성하는 데 도움이되는 강력한 jQuery 애플리케이션이 있습니다.
WordPress 사이트에서 원하는 가장 인상적인 옵션은 wpDataTables, 워드프레스 테이블 plugin 테이블, 차트 및 데이터 관리 작업을 쉽게 만듭니다. 그것으로, 당신은 만들 수 있습니다 responsive WordPress 테이블 및 차트.
plugin 최대 수백만 개의 행이 있는 큰 테이블에서 매우 빠르게 작동하지만 Excel 또는 Google 스프레드시트에 있는 것처럼 테이블에서 많은 사용자 지정 및 필터링을 수행할 수도 있습니다.
가장 크고 가장 가능성이 높은 것은 플렉시 그리드. 이것은 Java Swing 테이블과 비슷한 모양이며 비슷한 방식으로 작동합니다.
Flexigrid의 기능은 필요한만큼 너무 많을 수도 있으므로이 경우 고려할 수 있습니다 테이블 소터매우 간단합니다.
이러한 도구 유형의 기능은 흥미로울 수 있지만 페이지 로딩 시간을 더 늘릴 수 있어야합니다. 꼭 필요한 경우를 위해 이런 종류의 것을 저장하는 것이 가장 좋습니다.
자동 변환 도구는 일반적으로 최상의 결과를 제공하지 않습니다
문서 테이블을 HTML 테이블로 변환 할 수있는 CMS 플러그인이 있습니다. 이것들은 직접 테이블을 직접 만드는 것만 큼 좋은 곳이 아니므로 우수한 결과를 원한다면 이런 종류의 자동화가 진행되지 않습니다.
그러나 자체 제작 한 자동화는 괜찮습니다.
PHP를 사용하여 데이터베이스에서 테이블 구성formation은 항상 좋은 생각이며 모든 것을 수동으로 입력하는 것보다 확실히 선호됩니다. 여기서 차이점은 자동화 작동 방식을 완전히 제어할 수 있다는 것입니다.
타사 자동화를 사용할 때는 타사 작성자가 테이블에 대해 가정해야합니다. 즉, 테이블을 직접 만드는 것보다 많은 기능이 부족한 일반 테이블이 생길 수 있습니다.
적절하게 테이블을 사용하면 그들은 당신에게 보상합니다
좋은 테이블은 디자인된 것이지 그냥 생기는 것이 아닙니다. 에서 디자인할 때format이온 전달 시스템의 효율성과 효율성을 원할 것입니다. 테이블이 그에 맞게 디자인되었는지 확인하고 사이트는 테이블을 포함함으로써 최대의 이점을 얻을 수 있습니다.
헤더 이미지 제공
코멘트 0 응답