Faux Table

Description: A faux table is a table that looks/formatted like a table, but allows enhanced functionality that a table does not allow. Instead of table tags, the faux table uses an unordered list along with CSS styling.

508 Guidelines When using a screen reader on a faux table, the screen reader will read it row by row. Keyboard accessibility within the faux table will depend on the design.

Only Tabular Date - Default Layout

Facility
Name
Analog Pager
Digital Pager
Office Phone
TST1
John Doe
(123) 456-7890
(123) 456-7890
(123) 456-7890
TST1
John Doe
(123) 456-7890
(123) 456-7890
(123) 456-7890

Entire row linking / single entire cell linking / content within cell linking

Table Content
Faux Table Header 2
Faux Table Header 3
Faux Table Header 4
Table Content
Exampe of long content with link inside, text link - Lorem ipsum dolor sit amet, consectetur adipisicing edivt. Soluta amet, commodi placeat voluptatibus, quos sapiente natus sequi quidem animi, doloribus reiciendis assumenda? Ipsum aspernatur praesentium vero totam placeat voluptatibus molestiae?
An example of an ahref text link within the faux table cell
Table Content
Table Content
Table Content
Table Content
Table Content
Entire row
Entire row links
Entire row links
Entire row links

Encounter Visit Management

This faux table represents data on hospital admissions categorized by date, details, and location.
Date
Details
Location
05/09/2015 - 12:00
Lorem ipsum dolor sit amet
Primary Care
05/05/2015 - 16:00
Lorem ipsum dolor sit amet
General Medicine
04/22/2015 - 08:00
Lorem ipsum dolor sit amet
Primary Care
03/08/2015 - 09:00
Lorem ipsum dolor sit amet
Primary Care 
<h2 class="text-center">Only Tabular Data - Default Layout</h2>
    <div class="faux-table-container">
        <div class="faux-table">
            <div class="header">
                <div class="table-row">
                    <div>
                        <div>Facility</div>
                    </div>
                    <div>
                        <div>Name</div>
                    </div>
                    <div>
                        <div>Analog Pager</div>
                    </div>
                    <div>
                        <div>Digital Pager</div>
                    </div>
                    <div>
                        <div>Office Phone</div>
                    </div>
                </div>
            </div>
            <div class="body">
                <div class="table-row">
                    <div>
                        <span>TST1</span>
                    </div>
                    <div>
                        <span>John Doe</span>
                    </div>
                    <div>
                        <span>(123) 456-7890</span>
                    </div>
                    <div>
                        <span>(123) 456-7890</span>
                    </div>
                    <div>
                        <span>(123) 456-7890</span>
                    </div>
                </div>
                <div class="table-row">
                    <div>
                        <span>TST1</span>
                    </div>
                    <div>
                        <span>John Doe</span>
                    </div>
                    <div>
                        <span>(123) 456-7890</span>
                    </div>
                    <div>
                        <span>(123) 456-7890</span>
                    </div>
                    <div>
                        <span>(123) 456-7890</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
            
<h2 class="text-center">Entire row linking / single entire cell linking / content within cell linking</h2>
<div class="faux-table-container">
    <div class="faux-table">
        <div class="header table-row">
            <div class="table-cell">
                <div>Table Content</div>
            </div>
            <div class="table-cell flex-width-2">
                <div>Faux Table Header 2</div>
            </div>
            <div class="table-cell">
                <div>Faux Table Header 3</div>
            </div>
            <div class="table-cell">
                <div>Faux Table Header 4</div>
            </div>
        </div>
        <div class="body">
            <div class="table-row">
                <div class="table-cell">
                    <span>Table Content</span>
                </div>
                <div class="table-cell flex-width-2">
                    <span>Exampe of long content with link inside, <a href="#">text link</a> - Lorem ipsum dolor sit amet, consectetur adipisicing edivt. Soluta amet, commodi placeat voluptatibus, quos sapiente natus sequi quidem animi, doloribus reiciendis assumenda? Ipsum aspernatur praesentium vero totam placeat voluptatibus molestiae? </span>
                </div>
                <div class="table-cell">
                    <a href="">An example of an ahref text link within the faux table cell</a>
                </div>
                <div class="table-cell">
                    <span>Table Content</span>
                </div>
            </div>
            <div class="table-row">
                <div class="table-cell">
                    <span>Table Content</span>
                </div>
                <div class="table-cell flex-width-2">
                    <span>Table Content</span>
                </div>
                <div class="table-cell">
                    <span>Table Content</span>
                </div>
                <div class="table-cell">
                    <span>Table Content</span>
                </div>
            </div>
            <a href="" class="table-row">
                <div class="table-cell">
                    <span>Entire row</span>
                </div>
                <div class="table-cell flex-width-2">
                    <span>Entire row links</span>
                </div>
                <div class="table-cell">
                    <span>Entire row links</span>
                </div>
                <div class="table-cell">
                    <span>Entire row links</span>
                </div>
            </a>
        </div>
    </div>
</div>
            
<h2 class="text-center">Encounter Visit Management</h2>
<div class="faux-table-container">
    <div class="faux-table">
        <div class="sr-only">This faux table represents data on hospital admissions categorized by date, details, and location.</div>
        <div class="header table-row">
            <div class="table-cell">
                <div>Date</div>
            </div>
            <div class="table-cell">
                <div>Details</div>
            </div>
            <div class="table-cell">
                <div>Location</div>
            </div>
        </div>
        <div class="body">
            <a href="#" class="table-row">
                <div class="table-cell">
                    <span>05/09/2015 - 12:00</span>
                </div>
                <div class="table-cell">
                    <span>Lorem ipsum dolor sit amet</span>
                </div>
                <div class="table-cell">
                    <span>Primary Care</span>
                </div>
            </a>
            <a href="#" class="table-row">
                <div class="table-cell">
                    <span>05/05/2015 - 16:00</span>
                </div>
                <div class="table-cell">
                    <span>Lorem ipsum dolor sit amet</span>
                </div>
                <div class="table-cell">
                    <span>General Medicine</span>
                </div>
            </a>
            <a href="#" class="table-row">
                <div class="table-cell">
                    <span>04/22/2015 - 08:00</span>
                </div>
                <div class="table-cell">
                    <span>Lorem ipsum dolor sit amet</span>
                </div>
                <div class="table-cell">
                    <span>Primary Care</span>
                </div>
            </a>
            <a href="#" class="table-row">
                <div class="table-cell">
                    <span>03/08/2015 - 09:00</span>
                </div>
                <div class="table-cell">
                    <span>Lorem ipsum dolor sit amet</span>
                </div>
                <div class="table-cell">
                    <span>Primary Care</span>
                </div>
            </a>
        </div>
    </div>
</div>