Tables

This post contains the same basic table displayed in several styles. Each style builds on the one preceding it. The final examples feature tables that are responsive and make use of data attributes for better accessibility. The final example features a table that is sortable by one or more columns.

A Plain Table

Senator or Representative District Tobacco Industry Contributions During their Most Recent Campaign, 2010 or 2012 Total
Jones, Timothy W (R) 110 $33,037
Schaefer, Kurt(R) 19 $25,750
Dempsey, Tom (R) 23 $25,700
Diehl Jr., John J. (R) 89 $14,750

A Bit Nicer Than Plain Table

Senator or Representative District Tobacco Industry Contributions During their Most Recent Campaign, 2010 or 2012 Total
Jones, Timothy W (R) 110 $33,037
Schaefer, Kurt(R) 19 $25,750
Dempsey, Tom (R) 23 $25,700
Diehl Jr., John J. (R) 89 $14,750

The two tables have different classes, but are otherwise identical. The first table has class=”plain” and the second has class=”plain nicer”.
HTML Syntax
<table class="plain nicer">
	<thead>
		<tr>
			<th>Senator or Representative</th>
			<th>District</th>
			<th>Tobacco Industry Contributions During their Most Recent Campaign, 2010 or 2012 Total</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Jones, Timothy W (R)</td>
			<td>110</td>
			<td>$33,037</td>
		</tr>
		<tr>
			<td>Schaefer, Kurt(R)</td>
			<td>19</td>
			<td>$25,750</td>
		</tr>
		<tr>
			<td>Dempsey, Tom (R)</td>
			<td>23</td>
			<td>$25,700</td>
		</tr>
		<tr>
			<td>Diehl Jr., John J. (R)</td>
			<td>89</td>
			<td>$14,750</td>
		</tr>
	</tbody>
</table>

The first table, table class=”plain”, contains cells with shared borders that are twice as wide as I intended. I removed these double borders in table class=”plain nicer”. I also added padding to each cell and centered the content found in the cells in the District column.
CSS Syntax
#post-111 .plain th { font-weight: bold; }

#post-111 .plain th,
#post-111 .plain td { border: 0.063em solid #c6c6f3;  /* 1px @ 16px */ }
	
/* .nicer */
#post-111 .nicer th,
#post-111 .nicer td { padding: 0.25em 0.5em; }

	#post-111 .nicer td { border-top: 0; }

	#post-111 .nicer th + th,
	#post-111 .nicer td + td { border-left: 0; }

	#post-111 .nicer tr th:nth-of-type(2n),
	#post-111 .nicer tr td:nth-of-type(2n) { text-align: center; }

Now with a Caption, Details, and a Summary

Top Four Recipients of Tobacco Contributions in the Missouri General Assembly, 2009-2012.

More about this table

The data in this table was taken from the report, Vaping and Vetoes: Missouri General Assembly Exempts E-Cigs from Tobacco Taxes by the National Institute on Money in State Politics.

To increase accessibility, I like to use a paragraph such as this one, which is not displayed by default, as a place to include details about each column found in the table – like this – the first column shows the name of a member of Missouri’s General Assembly. The second column shows a district number. The third column shows dollar amounts.

Senator or Representative District Tobacco Industry Contributions During their Most Recent Campaign, 2010 or 2012 Total
Jones, Timothy W (R) 110 $33,037
Schaefer, Kurt(R) 19 $25,750
Dempsey, Tom (R) 23 $25,700
Diehl Jr., John J. (R) 89 $14,750

I added a caption with details and summary to the HTML markup.

HTML Syntax
<table class="plain nicer">
	<caption>Top Four Recipients of Tobacco Contributions in the Missouri General Assembly, 2009-2012.<details><summary>More about this table</summary>
	<p>The data in this table was taken from the report, <a href="http://www.followthemoney.org/research/institute-reports/vaping-and-vetoes-missouri-general-assembly-exempts-e-cigs-from-tobacco-taxes" target="_blank">Vaping and Vetoes: Missouri General Assembly Exempts E-Cigs from Tobacco Taxes</a> by the National Institute on Money in State Politics.</p>
	<p>To increase accessibility, I like to use a paragraph such as this one, which is not displayed by default, as a place to include details about each column found in the table - like this - the first column shows the name of a member of Missouri's General Assembly. The second column shows a district number. The third column shows dollar amounts.</p></details></caption>
	<thead>
		<tr>
			<th>Senator or Representative</th>
			<th>District</th>
			<th>Tobacco Industry Contributions During their Most Recent Campaign, 2010 or 2012 Total</th>
		</tr>
	</thead>
	[....]
CSS Syntax
caption { font-weight: bold; }
	caption details { font-weight: normal; }
		details summary { margin: 0.5em 0; }

Example with zebra-stripes

Top Four Recipients of Tobacco Contributions in the Missouri General Assembly, 2009-2012.

More about this table

The data in this table was taken from the report, Vaping and Vetoes: Missouri General Assembly Exempts E-Cigs from Tobacco Taxes by the National Institute on Money in State Politics.

To increase accessibility, I like to use a paragraph such as this one, which is not displayed by default, as a place to include details about each column found in the table – like this – the first column shows the name of a member of Missouri’s General Assembly. The second column shows a district number. The third column shows dollar amounts.

Senator or Representative District Tobacco Industry Contributions During their Most Recent Campaign, 2010 or 2012 Total
Jones, Timothy W (R) 110 $33,037
Schaefer, Kurt(R) 19 $25,750
Dempsey, Tom (R) 23 $25,700
Diehl Jr., John J. (R) 89 $14,750

The HTML markup has not changed since the previous example, except that I added zebra to the table’s list of class values, resulting in table class=”plain nicer zebra”.

I then set thead‘s row and every second row within tbody to have a background color.

CSS Syntax
#post-111 .zebra thead tr,
#post-111 .zebra tbody tr:nth-of-type(2n) { background-color: #e6e6f3; }

Responsive and Data Attributes for Better Accessibility

By including data-* attributes in each cell’s HTML markup, CSS can be used to generate this data-* attribute content in a manner that enhances accessibility and is responsive. This is where I learned of this technique.

HTML Syntax
<table class="plain nicer zebra responsive">
	<caption>Top Four Recipients of Tobacco Contributions in the Missouri General Assembly, 2009-2012.<details><summary>More about this table</summary>
	<p>The data in this table was taken from the report, <a href="http://www.followthemoney.org/research/institute-reports/vaping-and-vetoes-missouri-general-assembly-exempts-e-cigs-from-tobacco-taxes" target="_blank">Vaping and Vetoes: Missouri General Assembly Exempts E-Cigs from Tobacco Taxes</a> by the National Institute on Money in State Politics.</p>
	<p>To increase accessibility, I like to use a paragraph such as this one, which is not displayed by default, as a place to include details about each column found in the table - like this - the first column shows the name of a member of Missouri's General Assembly. The second column shows a district number. The third column shows dollar amounts.</p></details></caption>
	<thead>
		<tr>
			<th data-title="Column Name">Senator or Representative</th>
			<th data-title="Column Name">District</th>
			<th data-title="Column Name">Tobacco Industry Contributions During their Most Recent Campaign, 2010 or 2012 Total</th>
		</tr>
	</thead>
<tbody>
<tr>
<td data-title="Senator or Representative">Jones, Timothy W (R)</td>
<td data-title="District">110</td>
<td data-title="Tobacco Industry Contributions During their Most Recent Campaign, 2010 or 2012 Total">$33,037</td>
</tr>
<tr>
<td data-title="Senator or Representative">Schaefer, Kurt(R)</td>
<td data-title="District">19</td>
<td data-title="Tobacco Industry Contributions During their Most Recent Campaign, 2010 or 2012 Total">$25,750</td>
</tr>
<tr>
<td data-title="Senator or Representative">Dempsey, Tom (R)</td>
<td data-title="District">23</td>
<td data-title="Tobacco Industry Contributions During their Most Recent Campaign, 2010 or 2012 Total">$25,700</td>
</tr>
<tr>
<td data-title="Senator or Representative">Diehl Jr., John J. (R)</td>
<td data-title="District">89</td>
<td data-title="Tobacco Industry Contributions During their Most Recent Campaign, 2010 or 2012 Total">$14,750</td>
</tr>
</tbody>
</table>

Because of CSS media queries, this table becomes linearized when displayed in a browser window less than 800 pixels wide. Additionally, the top row is hidden and helpful data-title values are inserted before each cell’s content.

Top Four Recipients of Tobacco Contributions in the Missouri General Assembly, 2009-2012.

More about this table

The data in this table was taken from the report, Vaping and Vetoes: Missouri General Assembly Exempts E-Cigs from Tobacco Taxes by the National Institute on Money in State Politics.

To increase accessibility, I like to use a paragraph such as this one, which is not displayed by default, as a place to include details about each column found in the table – like this – the first column shows the name of a member of Missouri’s General Assembly. The second column shows a district number. The third column shows dollar amounts.

Senator or Representative District Tobacco Industry Contributions During their Most Recent Campaign, 2010 or 2012 Total
Jones, Timothy W (R) 110 $33,037
Schaefer, Kurt(R) 19 $25,750
Dempsey, Tom (R) 23 $25,700
Diehl Jr., John J. (R) 89 $14,750
CSS Syntax
@media screen and (max-width: 800px) {
	#post-111 table.responsive th, 
	#post-111 table.responsive td {
		display: block;
		border: 0;
	}
	
	#post-111 table.responsive thead {
		display: none;
		visibility: hidden;
	}
	
	#post-111 table.responsive th[data-title]:before,
	#post-111 table.responsive td[data-title]:before {
		content: attr(data-title) ": ";
		font-weight: bold;
	}
	
	#post-111 .nicer.responsive th,
	#post-111 .nicer.responsive td { padding: 0; /* undo .nicer */ }

	#post-111 .nicer tr th:nth-of-type(2n),
	#post-111 .nicer tr td:nth-of-type(2n) { text-align: left; }
	
	#post-111 .zebra.responsive tbody tr:nth-of-type(2n+1) td:first-of-type { margin-top: 1em; }
	#post-111 .zebra.responsive tbody tr:nth-of-type(2n+1) td:last-of-type { margin-bottom: 1em; }
}

Example with Table Sorter

This table can be sorted by one or more columns. This is made possible by the Table Sorter plugin for WordPress. For readers not using WordPress, I recommend looking into the TableSorter plugin for jQuery.

This table can be sorted by one or more columns.

More about this table

The data in this table is nonsensical filler meant to illustrate sorting.

To sort by multiple columns, hold down the shift key and while clicking a second, third or even fourth column header!

Honorific First Last
Mr Paul McCartney
Mrs Jane Doe
Ms Jennifer Aniston
Mr Paul Bunyon
Ms Jennifer Lawrence
Mr Paul Simon
HTML Syntax
<table class="plain nicer zebra responsive tablesorter">
	<caption>This table can be sorted by one or more columns.<details><summary>More about this table</summary>
	<p>The data in this table is nonsensical filler meant to illustrate sorting.</p>
	<p>To sort by multiple columns, hold down the shift key and while clicking a second, third or even fourth column header!</p></details></caption>
	<thead>
		<tr>
			<th data-title="Column Name">Honorific</th>
			<th data-title="Column Name">First</th>
			<th data-title="Column Name">Last</th>
		</tr>
	</thead>
<tbody>
<tr>
<td data-title="Honorific">Mr</td>
<td data-title="First Name">Paul</td>
<td data-title="Last Name">McCartney</td>
</tr>
<tr>
<td data-title="Honorific">Mrs</td>
<td data-title="First Name">Jane</td>
<td data-title="Last Name">Doe</td>
</tr>
<tr>
<td data-title="Honorific">Ms</td>
<td data-title="First Name">Jennifer</td>
<td data-title="Last Name">Aniston</td>
</tr>
<tr>
<td data-title="Honorific">Mr</td>
<td data-title="First Name">Paul</td>
<td data-title="Last Name">Bunyon</td>
</tr>
<tr>
<td data-title="Honorific">Ms</td>
<td data-title="First Name">Jennifer</td>
<td data-title="Last Name">Lawrence</td>
</tr>
<tr>
<td data-title="Honorific">Mr</td>
<td data-title="First Name">Paul</td>
<td data-title="Last Name">Simon</td>
</tr>
</tbody>
</table>
There are two notable things about the CSS syntax. First, I over-rode the default user-interface images used for column headers – mine are bigger. Second, I over-rode a rule defined earlier as part of the .nicer class where the data found in the 2nd column was centered.

CSS Syntax
table.tablesorter thead tr th { background-image: url("images/bg.png"); }
table.tablesorter thead tr .tablesorter-headerAsc { background-image: url("images/asc.png"); }
table.tablesorter thead tr .tablesorter-headerDesc { background-image: url("images/desc.png"); }

#post-111 .tablesorter tr th:nth-of-type(2n),
#post-111 .tablesorter tr td:nth-of-type(2n) { text-align: left; }	/* overwrites .nicer */		

Leave a Reply

Your email address will not be published. Required fields are marked *