Striped Data Table

A table to display data things like schedules, as found on pages like the Channel Listings Page and the FYC Events Page. Each row is a flexbox designed to display a reasonable number of items evenly before the mobile breakpoint. Any customization specific to a single page should only be added to that pages' stylesheet.

PROVIDER

CHANNEL

AT&T U-VERSE

HD Channels: 1852-1866

SD Channels: 852 - 866

COX

Varies by region

DIRECTV

545 - 557

DISH

318 - 333

FRONTIER FIOS

HD Channels: 865 - 874

SD Channels: 365 - 380

FRONTIER VANTAGE

Please check with your provider

MEDIACOM

Varies by region

OPTIMUM

320 - 331

SPECTRUM

Varies by region

SUDDENLINK

Varies by region

VERIZON FIOS

HD Channels: 865 - 874

SD Channels: 365 - 380

XFINITY

Varies by region

  <div class="striped-data-table">
    <div class='striped-data-table__row'>
      <div class='striped-data-table__item'>
        <p>PROVIDER</p>
      </div>
      <div class='striped-data-table__item'>
        <p>CHANNEL</p>
      </div>
    </div>
    <div class='striped-data-table__row'>
    <div class='striped-data-table__item'>
        <p>AT&T U-VERSE</p>
      </div>
      <div class='striped-data-table__item'>
        <p>HD Channels: <span class="striped-data-table__highlight">1852-1866</span></p>
        <p>SD Channels: <span class="striped-data-table__highlight">852 - 866<span></p>
      </div>
    </div>
    <div class='striped-data-table__row'>
      <div class='striped-data-table__item'>
        <p>COX</p>
      </div>
      <div class='striped-data-table__item'>
        Varies by region
      </div>
    </div>
    <div class='striped-data-table__row'>
      <div class='striped-data-table__item'>
        <p>DIRECTV</p>
      </div>
      <div class='striped-data-table__item'>
        <p><span class="striped-data-table__highlight">545 - 557</span></p>
      </div>
    </div>
    <div class='striped-data-table__row'>
      <div class='striped-data-table__item'>
        <p>DISH</p>
      </div>
      <div class='striped-data-table__item'>
        <p><span class="striped-data-table__highlight">318 - 333</span></p>
      </div>
    </div>
    <div class='striped-data-table__row'>
      <div class='striped-data-table__item'>
        <p>FRONTIER FIOS</p>
      </div>
      <div class='striped-data-table__item'>
        <p>HD Channels: <span class="striped-data-table__highlight">865 - 874</span></p>
        <p>SD Channels: <span class="striped-data-table__highlight">365 - 380</span></p>
      </div>
    </div>
    <div class='striped-data-table__row'>
      <div class='striped-data-table__item'>
        <p>FRONTIER VANTAGE</p>
      </div>
      <div class='striped-data-table__item'>
        <p>Please check with your provider</p>
      </div>
    </div>
    <div class='striped-data-table__row'>
      <div class='striped-data-table__item'>
        <p>MEDIACOM</p>
      </div>
      <div class='striped-data-table__item'>
        <a href="https://mediacomtoday-lineup.com" target="_blank" data-track data-label="varies by region" data-provider-id="45">Varies by region</a>
      </div>
    </div>
    <div class='striped-data-table__row'>
      <div class='striped-data-table__item'>
        <p>OPTIMUM</p>
      </div>
      <div class='striped-data-table__item'>
        <p><span class="striped-data-table__highlight">320 - 331</span></p>
      </div>
    </div>
    <div class='striped-data-table__row'>
      <div class='striped-data-table__item'>
        <p>SPECTRUM</p>
      </div>
      <div class='striped-data-table__item'>
        <a href="https://www.spectrum.com/browse/content/new-channel-lineup.html" target="_blank" data-track data-label="varies by region" data-provider-id="20">Varies by region</a>
      </div>
    </div>
    <div class='striped-data-table__row'>
      <div class='striped-data-table__item'>
        <p>SUDDENLINK</p>
      </div>
      <div class='striped-data-table__item'>
        Varies by region
      </div>
    </div>
    <div class='striped-data-table__row'>
      <div class='striped-data-table__item'>
        <p>VERIZON FIOS</p>
      </div>
      <div class='striped-data-table__item'>
        <p>HD Channels: <span class="striped-data-table__highlight">865 - 874</span></p>
        <p>SD Channels: <span class="striped-data-table__highlight">365 - 380</span></p>
      </div>
    </div>
    <div class='striped-data-table__row'>
      <div class='striped-data-table__item'>
        <p>XFINITY</p>
      </div>
      <div class='striped-data-table__item'>
        <a href="https://www.xfinity.com/support/local-channel-lineup/" target="_blank" data-track data-label="varies by region" data-provider-id="23">Varies by region</a>
      </div>
    </div>
  </div>