Tables - Patterns - Superfeedr

See the main page for details. Navigation is available via the side menu. You can also toggle all the patterns:

When there’s data to display, or other ordered information, a table is the best bet.

Introduces the names of each column. When contained in a .box (second sample), it takes the table__header class, to provide a box-derived style.

Toggle pattern display width

<table>
	<thead>
		<tr>
			<th>Column header</th>
			<th>Column header</th>
			<th>Column header</th>
		</tr>
	</thead>
</table>

<div class="box">
	<table>
		<thead class="table__header">
			<tr>
				<th>Column header</th>
				<th>Column header</th>
				<th>Column header</th>
			</tr>
		</thead>
	</table>
</div>

A cell with centred contents.

Toggle pattern display width

<table>
	<thead>
		<tr>
			<th>Non-centred header content</th>
			<th class="column__center">Centred header content</th>
			<th class="column__center">Centred header content</th>
			<th class="column__center">Centred header content</th>
			<th class="column__center">Centred header content</th>
			<th class="column__center">Centred header content</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Non-centred content</td>
			<td class="column__center">Centred content</td>
			<td class="column__center">Centred content</td>
			<td class="column__center">Centred content</td>
			<td class="column__center">Centred content</td>
			<td class="column__center">Centred content</td>
		</tr>
		<tr>
			<td>Non-centred content</td>
			<td class="column__center">Centred content</td>
			<td class="column__center">Centred content</td>
			<td class="column__center">Centred content</td>
			<td class="column__center">Centred content</td>
			<td class="column__center">Centred content</td>
		</tr>
		<tr>
			<td>Non-centred content</td>
			<td class="column__center">Centred content</td>
			<td class="column__center">Centred content</td>
			<td class="column__center">Centred content</td>
			<td class="column__center">Centred content</td>
			<td class="column__center">Centred content</td>
		</tr>
		<tr>
			<td>Non-centred content</td>
			<td class="column__center">Centred content</td>
			<td class="column__center">Centred content</td>
			<td class="column__center">Centred content</td>
			<td class="column__center">Centred content</td>
			<td class="column__center">Centred content</td>
		</tr>
	</tbody>
</table>

The feed, token, and invoice tables, which provide special styles for their unique contents. Note the column styles (column--*).

Toggle pattern display width

<div class="box">
	<table class="u-cell-trim-text-tds">
		<thead class="table__header">
			<tr>
				<th class="column--feed-URL  u-w-25p">Feed URL</th>
				<th class="column--endpoint  u-w-25p">Endpoint</th>
				<th class="column--format  u-w-10p">Format</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><a class="js-activate-modal" href="#modal_subscriptions_0" title="http://www.theverge.com/rss/group/quick-read/index.xml">http://www.theverge.com/rss/group/quick-read/index.xml</a></td>
				<td><abbr title="lchski@superfeedr.com">lchski@superfeedr.com</abbr></td>
				<td>atom</td>
			</tr>
			<tr>
				<td><a class="js-activate-modal" href="#modal_subscriptions_1" title="http://ecustom.ca/feed.xml">http://ecustom.ca/feed.xml</a></td>
				<td><abbr title="http://ecustom.ca/hook">http://ecustom.ca/hook</abbr></td>
				<td></td>
			</tr>
			<tr>
				<td><a class="js-activate-modal" href="#modal_subscriptions_2" title="http://push-pub.appspot.com/feed">http://push-pub.appspot.com/feed</a></td>
				<td><abbr title="lchski@superfeedr.com">lchski@superfeedr.com</abbr></td>
				<td>atom</td>
			</tr>
		</tbody>
	</table>
</div>

<div class="box">
	<table class="token-table">
		<thead class="table__header">
			<tr>
				<th class="column--token-name u-w-40p">Token Name</th>
				<th class="column__center column--subscribe">Subscribe</th>
				<th class="column__center column--unsubscribe">Unsubscribe</th>
				<th class="column__center column--retrieve">Retrieve</th>
				<th class="column__center column--list">List</th>
				<th class="column__center column--xmpp">XMPP</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><a class="js-activate-modal auth-token__modal-activator" href="#modal_dynamic_1381">Testing</a></td>
				<td class="column__center token-table__positive"><img src="/assets/img/icons/tick.png" alt="Tick"></td>
				<td class="column__center token-table__positive"><img src="/assets/img/icons/tick.png" alt="Tick"></td>
				<td class="column__center token-table__positive"><img src="/assets/img/icons/tick.png" alt="Tick"></td>
				<td class="column__center token-table__positive"><img src="/assets/img/icons/tick.png" alt="Tick"></td>
				<td class="column__center token-table__positive"><img src="/assets/img/icons/tick.png" alt="Tick"></td>
			</tr>
			<tr>
				<td><a class="js-activate-modal auth-token__modal-activator" href="#modal_dynamic_1652">PubSubHubbub Console Token</a></td>
				<td class="column__center token-table__positive"><img src="/assets/img/icons/tick.png" alt="Tick"></td>
				<td class="column__center token-table__positive"><img src="/assets/img/icons/tick.png" alt="Tick"></td>
				<td class="column__center token-table__positive"><img src="/assets/img/icons/tick.png" alt="Tick"></td>
				<td class="column__center token-table__positive"><img src="/assets/img/icons/tick.png" alt="Tick"></td>
				<td class="column__center token-table__negative"><img src="/assets/img/icons/cross.png" alt="Cross"></td>
			</tr>
			<tr>
				<td><a class="js-activate-modal auth-token__modal-activator" href="#modal_dynamic_1972">Testeroo</a></td>
				<td class="column__center token-table__positive"><img src="/assets/img/icons/tick.png" alt="Tick"></td>
				<td class="column__center token-table__negative"><img src="/assets/img/icons/cross.png" alt="Cross"></td>
				<td class="column__center token-table__negative"><img src="/assets/img/icons/cross.png" alt="Cross"></td>
				<td class="column__center token-table__negative"><img src="/assets/img/icons/cross.png" alt="Cross"></td>
				<td class="column__center token-table__negative"><img src="/assets/img/icons/cross.png" alt="Cross"></td>
			</tr>
			<tr>
				<td><a class="js-activate-modal auth-token__modal-activator" href="#modal_dynamic_1998">XMPP Console Token</a></td>
				<td class="column__center token-table__negative"><img src="/assets/img/icons/cross.png" alt="Cross"></td>
				<td class="column__center token-table__negative"><img src="/assets/img/icons/cross.png" alt="Cross"></td>
				<td class="column__center token-table__negative"><img src="/assets/img/icons/cross.png" alt="Cross"></td>
				<td class="column__center token-table__negative"><img src="/assets/img/icons/cross.png" alt="Cross"></td>
				<td class="column__center token-table__positive"><img src="/assets/img/icons/tick.png" alt="Tick"></td>
			</tr>
		</tbody>
	</table>
</div>

<section class="box">
	<table class="u-cell-trim-text-tds">
		<colgroup>
			<col></col>
			<col class="u-w-25p"></col>
		</colgroup>
		<thead class="box__header">
			<tr>
				<th class="box__title" colspan="2">All Invoices</th>
			</tr>
		</thead>

		<tbody>
			<tr>
				<td class=""><a href="/orders/57710">January 23, 2016</a> </td>
				<td class="">$0.00</td>
			</tr>

			<tr>
				<td class=""><a href="/orders/55076">December 24, 2015</a></td>
				<td class="">$0.00</td>
			</tr>

			<tr>
				<td class=""><a href="/orders/52894">November 24, 2015</a></td>
				<td class="">$0.00</td>
			</tr>

			<tr>
				<td class=""><a href="/orders/50687">October 25, 2015</a></td>
				<td class="">$0.00</td>
			</tr>

			<tr>
				<td class=""><a href="/orders/48516">September 25, 2015</a></td>
				<td class="">$0.00</td>
			</tr>

			<tr>
				<td class=""><a href="/orders/46412">August 26, 2015</a></td>
				<td class="">$0.00</td>
			</tr>

			<tr>
				<td class=""><a href="/orders/44334">July 27, 2015</a></td>
				<td class="">$0.00</td>
			</tr>

			<tr>
				<td class=""><a href="/orders/42270">June 27, 2015</a></td>
				<td class="">$0.00</td>
			</tr>

			<tr>
				<td class=""><a href="/orders/40210">May 28, 2015</a></td>
				<td class="">$0.00</td>
			</tr>

			<tr>
				<td class=""><a href="/orders/38056">April 27, 2015</a></td>
				<td class="">$0.00</td>
			</tr>

			<tr>
				<td class=""><a href="/orders/35906">March 28, 2015</a></td>
				<td class="">$0.00</td>
			</tr>

			<tr>
				<td class=""><a href="/orders/34630">February 26, 2015</a></td>
				<td class="">$0.00</td>
			</tr>

			<tr>
				<td class=""><a href="/orders/33398">January 27, 2015</a></td>
				<td class="">$0.00</td>
			</tr>

			<tr>
				<td class=""><a href="/orders/32238">December 28, 2014</a></td>
				<td class="">$0.00</td>
			</tr>

			<tr>
				<td class=""><a href="/orders/31120">November 28, 2014</a></td>
				<td class="">$0.00</td>
			</tr>

			<tr>
				<td class=""><a href="/orders/30064">October 29, 2014</a></td>
				<td class="">$0.00</td>
			</tr>

			<tr>
				<td class=""><a href="/orders/29030">September 29, 2014</a></td>
				<td class="">$0.00</td>
			</tr>

			<tr>
				<td class=""><a href="/orders/28019">August 30, 2014</a></td>
				<td class="">$0.00</td>
			</tr>

			<tr>
				<td class=""><a href="/orders/27037">July 31, 2014</a></td>
				<td class="">$0.00</td>
			</tr>
		</tbody>
	</table>
</section>

<table class="invoice-table invoice-items">
	<thead>
		<tr>
			<th style="width: 56%">Name</th>
			<th style="width: 20%">Pricing</th>
			<th style="width: 17%">Volume</th>
			<th style="width: 17%">Total</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Up to 100000</td>
			<td>2,000 for $1</td>
			<td>140</td>
			<td>$0.07</td>
		</tr>
		<tr>
			<td>Discount, since you received less than 10,000 notifications</td>
			<td>0</td>
			<td>140</td>
			<td>-$0.07</td>
		</tr>
	</tbody>
	<tfoot>
		<tr style="font-weight: bold;">
			<td colspan="2">Total</td>
			<td> </td>
			<td>$0.00</td>
		</tr>
	</tfoot>
</table>

<section class="box">
	<table>
        <colgroup>
            <col>
            <col class="u-w-25p">
        </colgroup>
		<thead class="box__header">
			<tr>
				<th class="box__title" colspan="2">Latest posts on our blog</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><a href="#">Story title</a></td>
				<td>5 days ago</td>
			</tr>
			<tr>
				<td><a href="#">Story title</a></td>
				<td>5 days ago</td>
			</tr>
		</tbody>
		<tfoot class="box__footer">
			<tr>
				<td colspan="2">
					<div class="form-row  form-row--form-actions">
						<button name="button" class="button button--raised button--positive">Subscribe</button>
					</div>
				</td>
			</tr>
		</tfoot>
	</table>
</section>

Superfeedr Patterns › Tables

Table header

Centred cell

Special table types