Tables

Be sure to use the table option in the CMS editor, and always use table headers and a caption to describe the data for accessibility.

Basic table

Example of a basic table.

First name	Last name	Email	Description
Renee	Luettgen	abshire.josiane@frami.com	Cum sint fuga qui vel similique.
Tiara	Johnston	theron.rosenbaum@greenholt.org	Quidem debitis in eveniet optio doloremque eos.
Carissa	Dibbert	koelpin.karine@herzog.com	Sint ut praesentium sit quae eveniet.
Martina	Kerluke	stewart.schinner@gmail.com	Consequatur dicta et tempore illum qui tempore.
Anna	Schinner	ptoy@yahoo.com	Voluptatem et enim minima id veritatis.
Wilmer	Bogan	llemke@hotmail.com	Dolorem illo aliquid blanditiis.
Cydney	Hayes	dameon.mckenzie@wiza.com	Aut labore et quibusdam itaque nisi maiores.
Erin	VonRueden	heathcote.colten@gmail.com	Ex repudiandae pariatur modi pariatur est.
Francisco	Champlin	kub.natalie@yahoo.com	Vel aliquid rerum dolor vel aliquam.
Gloria	Cronin	weissnat.blake@yahoo.com	Non dignissimos accusantium aut minima.

Sortable table

Use <table class="table-sort"> for this option. Click on each table heading to sort by column. Status:

First name	Last name	Email
Icie	Conroy	vstark@eichmann.biz
Tre	Mitchell	mathew08@gmail.com
Geoffrey	Prosacco	wehner.rubye@gmail.com
Ashtyn	Spencer	georgiana.kuhic@yahoo.com
Jedidiah	Powlowski	zberge@gerlach.info
Toney	Rippin	josue34@murphy.com
Maxwell	Brekke	ckemmer@langworth.com
Mathew	Schroeder	vfunk@blick.net
Eldridge	Swaniawski	jannie76@yahoo.com
Luigi	Grimes	uankunding@gmail.com
Stuart	Abernathy	bins.freda@goodwin.biz
Margarette	Johns	litzy.heidenreich@pacocha.com
Hollis	Zieme	heaven.watsica@yahoo.com
Fernando	Bartoletti	anne.lemke@hotmail.com
Providenci	Pollich	langosh.cathryn@crooks.info
Taya	Williamson	wilson41@miller.biz
Alyce	Wuckert	bertram.bergnaum@gmail.com
Reggie	Lehner	pfannerstill.vincenza@volkman.com
Marlin	Green	diamond.bode@berge.com
Destini	Jacobson	alessandra29@lowe.com

Responsive table

Use <table class="table-stack"> for this option. This table turns data into self-contained cards on mobile for easy reading.

First name	Last name	Email
Rashawn	Grant	dwill@hotmail.com
Scottie	Block	lschumm@lehner.org
Brain	Ernser	ayla.okeefe@hotmail.com
Hoyt	Walsh	nmarquardt@yahoo.com
Christiana	Welch	delia.hettinger@barton.org
Janelle	Ernser	agnes.mckenzie@bailey.biz
Ally	Rath	mclaughlin.keven@hotmail.com
Edison	Bergnaum	maureen81@littel.com
Angel	Abernathy	kbatz@gmail.com
Muhammad	Reinger	noelia89@mohr.net

Source code

<table>
    <caption>Describe your table for screen readers in the caption.</caption>
    <thead>
        <tr>
            <th scope="col">Column 1</th>
            <th scope="col">Column 2</th>
            <th scope="col">Column 3</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Data for col 1</td>
            <td>Data for col 2</td>
            <td>Data for col 3</td>
        </tr>
        <tr>
            <td>Data for col 1</td>
            <td>Data for col 2</td>
            <td>Data for col 3</td>
        </tr>
    </tbody>
</table>