Styling tables in concrete5

December 27th, 2010 Leave a comment Go to comments

The tables built with our Tables addon by default have no custom styling. We went this way because we want to allow the site builders and theme developers customize the table layout via css making it fit the overall website design. Here is how a simple table looks by default:

default table layout

No borders, no background, etc. But all of that can be added via CSS styling.

We added some classes to make it easy customize the table layout via css without touching the html code. Here are the classes:

.swp-table – class of the div block which wraps around the table
.swp-table-table – class of the table tag
.swp-table-head – class of the table headings row
.swp-table-odd-row, .swp-table-even-row – these classes can be used to style odd/even rows differently
.swp-table-paging – class of the div block which wraps around the list of pages (option to split table into separate tables has been added in Tables v2.1)

Here is an example of CSS changing the table layout:

div.swp-table {
	clear: both;
	padding-top: 12px;
	padding-bottom: 8px;
table.swp-table-table tr td, table.swp-table-table tr th {
	border-spacing: 1px;
	padding: 3px;
.swp-table tr.swp-table-head {
	background-color: #c0c0c0;
.swp-table tr.swp-table-odd-row {
	background-color: #efefef;

If your theme supports the “Customize” option, then you can add the css via “Add your CSS” option:
Customize theme

Here is the output:
custom table output

CSS is not the only way to customize the table layout. You can also use the power of concrete5 and build your own custom templates for the table block. In Tables 2.1.1 we added 2 custom templates: Blue and Green. You can find it in ‘packages/swp_tables/blocks/swp_table/templates/’ directory. You can use a template as a base for your own one. The Blue and Green templates generate the following output:

Blue and green templates

The Tables addon at concrete5 marketplace:

Please also check this cool review (with video and css example) by Steven Braun:

  1. No comments yet.
  1. May 6th, 2014 at 23:17 | #1
  2. May 8th, 2014 at 08:42 | #2
  3. May 21st, 2014 at 10:28 | #3
  4. August 12th, 2014 at 02:05 | #4
  5. October 27th, 2014 at 04:37 | #5