TV 가이드 목록 의미론.테이블 아닌가요?

StackOverflow https://stackoverflow.com/questions/626224

  •  06-07-2019
  •  | 
  •  

문제

웹 기반 TV 가이드 목록을 구축해야 합니다.

처음 시작했을 때 테이블 형식의 데이터이므로 테이블을 만드는 것만 필요하다고 생각했습니다.

date       00:00   00:30   01:00   etc...
channel 1  show 1  show 2  show 3  etc...
channel 2  show 3  show 4  show 5  etc...

하지만 아쉽게도 상황은 그렇지 않습니다.동안 <th> 30분마다 있습니다.쇼 길이는 5분부터 가능합니다.최대 몇 시간.

나는 속이고 모든 것을 만들 수 있습니다 <th> colspan=6을 사용하면 하위 단위는 5분이 됩니다.그런 다음 모든 쇼의 colspan을 시간/5(분) 길이로 설정하고 이것이 내 colspan입니다.

하지만 (항상 하지만이 있습니다) 이제 제가 가지고 있는 것은 표 형식의 데이터가 있는 테이블이 아니라 일종의 스파게티 테이블입니다.

어떻게 해야 하나요?

도움이 되었습니까?

해결책 4

결국 우리는 TV 가이드가 정확히 테이블이 아니라고 결정했습니다. 시간과 시간에 쇼를 보여주는 시간과 신체 부위를 보여주는 헤더 섹션이 있지만 여기에 테이블 부분이 끝나는 곳이 있습니다.

목록 목록으로 수행합니다. 첫 번째 목록은 헤더와 채널 목록이며 모든 LI에는 다른 목록이 있으며 헤더에는 시간 목록 (매 시간이 일정한 너비를 얻는 곳)이 있습니다. LI의 나머지 (채널)에는 특정 채널에 대한 쇼 목록이 있으며 모든 LI는 쇼 길이를 기준으로 너비를 얻습니다.

<ol>
    <li>date
        <ol>
            <li>00:00</li>
            <li>00:30</li>
            <li>01:00</li>
            <li>01:30</li>
            .
            .
            .
        </ol>
    </li>
    <li>Channel 1
        <ol>
            <li>Show 1</li>
            <li>Show 2</li>
            <li>Show 3</li>
            <li>Show 4</li>
            .
            .
            .
        </ol>
    </li>
    <li>Channel 2
    .
    .
    .
<ol>

완벽한 해결책은 아니지만 우리는 불완전한 세상에 살고 있습니다.

다른 팁

이것은 분명히 당신이 해결해야 할 것이 아닙니다u003Ctable> .

다중 사용u003Cdiv> S, 각각 CSS에서 인라인 또는 인라인 블록 세트가있는 각각. 너비를 설정하고 아마도 CSS 클래스를 사용하여 가장 잘 수행 될 것입니다. 예를 들어 다음과 같이.

div.channel div
{
   display: inline-block;
}
div.five { width: 1em; }
div.ten { width: 2em; }
div.fifteen { width: 3em; }
...

그런 다음 HTML :

<div class="channel">
  <div class="five">Five minute program</div>
  <div class="fifteen">Fifteen minute program</div>
  <div class="five">Five minute program</div>
</div>
<div class="channel">
  <div class="ten">Ten minute program</div>
  <div class="fifteen">Fifteen minute program</div>
</div>

영감을 얻기 위해 기존 TV 가이드를 살펴보셨나요?

colspans 옵션이 많은 테이블이 사용된 테이블입니다. 예를 들어 여기.

기본적으로 두 가지 옵션이 있다고 생각합니다.

  • 테이블을 사용하고 colspan을 사용하세요.한정된 시간 동안 하나의 '열'만 가질 수 있으므로 시간당 열 수에 따라 가장 가까운 5분, 10분 또는 15분으로 반올림해야 할 수 있으며 1시간 길이의 프로그램은 귀하의 질문에서 지적한대로 4, 6 또는 12의 열 범위입니다.
  • 일반 DIV와 함께 CSS를 사용하고(또는 원하는 경우 UL 및 LI, 각 행에 대한 UL 및 해당 행의 각 블록에 대한 LI를 만들 수도 있음) 각 항목의 너비를 별도로 지정합니다.이 작업은 백분율(전체 행의 확장 및 축소 허용) 또는 픽셀 단위로 수행할 수 있습니다.내부 요소, 즉 각 프로그램마다 하나씩 부동 블록이나 인라인 블록으로 실험해 볼 수 있습니다.반올림 오류로 인해 래핑되지 않는 한 부동 소수점은 문제가 없습니다.

나는 의미상으로 두 번째 옵션이 더 낫다고 생각합니다.올바르게 지적했듯이 테이블과 매우 유사하므로 테이블이 적절해야 하지만 표시하려는 것보다 더 많은 열을 사용하고 영역 크기를 조정하면 의미론적 매력을 잃게 됩니다.

나는 당신이 당신의 데이터가 실제로 테이블이 아니라는 것을 보여 주었다고 생각합니다. CSS에 익숙하다면 CSS를 사용하고 규칙을 설정하는 경로를 따라가는 것이 좋습니다.

예를 들어 5 분, 10 분, 15 분, 31 분, 1 시간 등과 같은 클래스가있을 수 있습니다 ....이 규칙 각각은 올바른 너비 등을 제공하도록 구성됩니다. 평범하지 않은 다른 것에 대해서는 크기를 즉시 계산할 수 있습니다.

당신이 제시하는 데이터는 실제로 그래프 또는 차트와 유사합니다. 이에 해당하는 HTML 요소가 없습니다. 나는 테이블 접근법이 의미가 있다고 말하고있다. 테이블을 1/6으로 나누는 것도 의미가 있습니다. 1.125의 콜 스팬을 가질 수없는 매체의 한계입니다. 이 표는 프로그래밍 방식으로 생성되므로 각 논리 셀을 6 개의 물리적 셀로 분할하는 것이 주요 문제라고 생각하지 않습니다. 스크린 리더와 같은 비표준 브라우저에서 샘플을 테스트하십시오.

TV 목록? 목록입니다 ...

실제로, 이것에 대한 심각한 의견 불일치가 있습니다.

그러니 원하는 것을 결정하고 선택하십시오 ...

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top