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
Rosa	Cole	felicity.larson@zboncak.biz	Repellendus possimus aut molestias enim velit.
Bradly	Mante	alisha79@yahoo.com	Est deserunt magnam et libero.
Gertrude	Leannon	trantow.valentine@hotmail.com	Tempora distinctio deleniti exercitationem quas.
Jarod	Hirthe	amanda.breitenberg@dickens.info	Consequatur delectus et aut sint.
Nicholaus	Kohler	qconroy@hirthe.biz	Totam perferendis officiis veritatis ab corporis.
Loyal	Kovacek	lang.antwan@yahoo.com	Aut non dolores pariatur ab nostrum.
Lennie	Boyer	vern53@hotmail.com	Nobis in blanditiis laudantium alias.
Samson	Lueilwitz	pkoch@hotmail.com	Rerum a numquam ab quia qui eum dicta.
Tamara	Heathcote	anna.hansen@jacobson.com	At deleniti qui libero perspiciatis.
Anastacio	Bashirian	antwon.swaniawski@gulgowski.info	Dicta aliquid sed libero ratione et iure.

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
Kim	Kuphal	twiza@thiel.net
Juwan	Spinka	kyler66@yahoo.com
Lenore	Murphy	kamron08@kreiger.com
Gus	Schinner	cjacobson@schmeler.org
Emmie	Heller	orland17@heathcote.com
Cristopher	McDermott	mcartwright@schiller.com
Alena	Morar	zemlak.emelia@johnston.info
Ines	Mills	xjerde@hotmail.com
Shanna	Kautzer	adams.emilio@hotmail.com
Julius	Volkman	kaia26@yahoo.com
Buford	Kemmer	ybosco@bernhard.com
Dolores	Anderson	nitzsche.isom@howe.com
Candace	McGlynn	gus87@yahoo.com
Maxine	Conn	lakin.karl@gmail.com
Henry	Murphy	deonte50@gmail.com
Raoul	Schinner	jordy85@muller.biz
Leon	Pacocha	wilford00@hotmail.com
Chloe	Lind	baumbach.zaria@gmail.com
Layla	Sawayn	hintz.albertha@bosco.com
Alysa	Schuster	orie.cummings@heathcote.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
Monique	Grant	hkemmer@heidenreich.biz
Felicita	Wisozk	rau.alford@yahoo.com
Domenic	Rosenbaum	janelle.keeling@gmail.com
Maynard	Bashirian	beulah12@green.com
Ibrahim	Boyer	rey.beahan@zboncak.com
Rossie	Jacobson	yberge@gmail.com
Chet	Denesik	zelma.conroy@hotmail.com
Bernice	Schuster	burley19@balistreri.com
Seamus	Lakin	leopold.volkman@hotmail.com
Maximilian	Cronin	torp.fabiola@mayer.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>