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
Ellis	Metz	dhalvorson@johnson.net	Nihil possimus error quia sed facilis.
Darius	Lemke	chelsey.oberbrunner@yahoo.com	A suscipit velit ad quam.
Kip	Hickle	tia.wilkinson@farrell.com	Soluta numquam voluptate esse modi voluptas ut.
Alvis	Huels	doris.larkin@hotmail.com	Natus accusantium id voluptatum amet.
Kenya	Block	wwyman@ryan.com	Quo blanditiis expedita vel eum recusandae.
Vada	Blanda	qhermiston@hotmail.com	Eum eum fuga quia rerum omnis.
Porter	Dibbert	dexter13@hotmail.com	Modi ducimus quo dolores adipisci.
Kelvin	Marvin	dana.grady@gmail.com	Est iusto quod minus assumenda at facere qui.
Sally	Howell	ibeahan@gmail.com	Distinctio laboriosam tempora aut voluptate.
Juwan	Heaney	zhayes@grant.com	Sunt et eligendi id voluptates.

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
Monty	Bernier	jacky.cassin@hotmail.com
Athena	Johnston	ilene46@kuhlman.com
Naomie	Koch	fanny.nitzsche@hotmail.com
Abelardo	Torphy	hahn.kayden@koss.biz
Richmond	Effertz	hoppe.everett@hotmail.com
Bert	Raynor	ardith19@rolfson.net
Giuseppe	Robel	francisca.haley@lockman.org
Breanne	Kuhn	dicki.jermain@yahoo.com
Marisa	Nikolaus	drosenbaum@bradtke.com
Joe	Okuneva	mack.reilly@kling.com
Kayleigh	Sporer	desmond.kulas@gmail.com
Janice	Schuster	guido.morissette@kuhn.biz
Rashad	Glover	vkiehn@wuckert.com
Keaton	Kautzer	columbus.mayer@koss.com
Rodrigo	Anderson	ward.shanna@yahoo.com
Lisa	Moen	kovacek.audreanne@gmail.com
Mohammad	Okuneva	gerlach.jodie@hotmail.com
Rod	Rolfson	willard71@hotmail.com
Tyshawn	Lowe	fkub@gmail.com
Clark	Nolan	predovic.shanie@konopelski.biz

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
Lennie	Mayer	jboyle@hotmail.com
Jackie	Stanton	darius78@block.com
Gordon	Rippin	maverick22@gleichner.biz
Eldon	Flatley	arunte@hotmail.com
Forrest	Boyle	thiel.lola@yahoo.com
Dylan	Fahey	hickle.newell@yahoo.com
Luther	Botsford	lisette61@hotmail.com
Clementine	Bernier	amie57@yahoo.com
Jo	Kuhlman	aschumm@gmail.com
Liza	Blanda	letha.lindgren@kuhic.com

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>