On October 29, 2011 In User interface with , , , tags

Responsive and SEO Friendly Data Tables

There was a time when we all used tables to design whole layout, later we started using div to style the layout.

It is because of search engine robot. As it divides the table into three parts like header, content and footer and only follows the data inside the content. That’s what I learned when I was using tables to create layouts.

Even though usage of tables is still a need to maintain data sheets, we have come up with simple table design. Which creates a table without using html elements like table, td, tr etc.

Responsive and SEO Friendly CSS Data Tables

SEO Friendly Table

You might be thinking what element we would be using. It’s div element styled by CSS.

Before creating a table we need to know the basic CSS styling of the table elements.

Default CSS for table and its elements

table{
	display:table;				/* --- Defines a table --- */
}
tr{
	display:table-row;			/* --- Defines a table row --- */
}
thead{
	display:table-header-group;	/* --- Defines a table header group --- */
}
tbody{
	display:table-row-group;	/* --- Defines a table row group --- */
}
tfoot{
	display:table-footer-group;	/* --- Defines a table footer group --- */
}
col{
	display:table-column;		/* --- Defines a table column --- */
}
colgroup{
	display:table-column-group;	/* --- Defines a table column group --- */
}
td,
th{
	display:table-cell;			/* --- Defines a table cell --- */
}
caption{
	display:table-caption;		/* --- Defines a table caption --- */
}

Now from the above code we will be using table, tr, td and thead to create few classes

.table{ 
	display:table;
}
.table-head{
 	display:table-header-group;
}
.row{
	display:table-row;
}
.column{
	display:table-cell;
}

By using the classes we will be creating tables which are SEO friendly.

Sleek CSS table

.table{
	display:table;			/* Defines a Table */
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	border-bottom:2px solid #dddddd;
	color:#8d8d8d;
	margin:10px 0;
}
.table-head{
	 display: table-header-group; /* Defines a table header group */
}
.table-head .column{			/* Column inside the table-head */
	background:#333333;
	color:#7d7d7d;
	border-right:1px solid #5d5d5d;
	border-bottom:none;
}
.table-head .column:hover{		/* Column hover inside the table-head */
	background:#222222;
}
.row{
	display:table-row;		/* Defines a table row */
}
.row .column:nth-child(1){		/* First column in a row */
	border-left:1px solid #eeeeee;
}
.row:last-child .column{		/* column in a last row */
	border-bottom:none;
}
.column{
	display:table-cell;		/* Defines a table cell */
	padding:10px 20px;
	border-bottom:1px solid #eeeeee;
	border-right:1px solid #eeeeee;
	line-height:1.8em;
}
.column:hover{
	background:#f9f9f9;
}

Bare bone mark up for the table

<div class="table">
    <div class="table-head">
        <div class="column" data-label=""></div>
    </div>
    <div class="row">
        <div class="column" data-label=""></div>
     </div>
</div>

Bare bone markup consists of

  1. .table which defines a table.
  2. .table-head which defines a table header group not necessary unless you have some headings for your table.
  3. .column which defines a table cell.
  4. .row which defines a table row.
  5. Here we have assigned a new attribute called data-label, which defines the label for the current column (will be discussed later in responsive tables)

Complete markup for the table. In this case we will create a data sheet for employer information.

<div class="table">
    <div class="table-head">
        <div class="column" data-label="Employee No">Employee No</div>
        <div class="column" data-label="User Name">User Name</div>
        <div class="column" data-label="Real Name">Real Name</div>
        <div class="column" data-label="Age">Age</div>
        <div class="column" data-label="Profession">Profession</div>
        <div class="column" data-label="Contact">Contact</div>
    </div>
    <div class="row">
        <div class="column" data-label="Employee No">2311</div>
        <div class="column" data-label="User Name">Lorem</div>
        <div class="column" data-label="Real Name">Ipsum dolor</div>
        <div class="column" data-label="Age">22</div>
        <div class="column" data-label="Profession">Web designer</div>
        <div class="column" data-label="Contact">1234567890</div>
    </div>
    <div class="row">
        <div class="column" data-label="Employee No">4542</div>
        <div class="column" data-label="User Name">Viverra</div>
        <div class="column" data-label="Real Name">Nam non viverra</div>
        <div class="column" data-label="Age">22</div>
        <div class="column" data-label="Profession">Web developer</div>
        <div class="column" data-label="Contact">2345678901</div>
    </div>
    <div class="row">
        <div class="column" data-label="Employee No">5643</div>
        <div class="column" data-label="User Name">Sed</div>
        <div class="column" data-label="Real Name">Donec sed volutpat</div>
        <div class="column" data-label="Age">25</div>
        <div class="column" data-label="Profession">Editor</div>
        <div class="column" data-label="Contact">3456789012</div>
    </div>
    <div class="row">
        <div class="column" data-label="Employee No">5464</div>
        <div class="column" data-label="User Name">Orci</div>
        <div class="column" data-label="Real Name">Phasellus eu orci nunc</div>
        <div class="column" data-label="Age">32</div>
        <div class="column" data-label="Profession">User Interface</div>
        <div class="column" data-label="Contact">4567890123</div>
     </div>
</div>

Seo friendly CSS Table

Responsive Table

We will use @media of CSS3 to convert our table into responsive. When screen is resized the mobile friendly table is turned on.

/* Responsive table */
@media all and (max-width: 640px){
	.table,
	.row,
	.column,
	.column:before{
		display:block;	/* Converts a table, table row, table column and table column:before into a block element */
	}
	.table,
	.row .column:last-child{
		border-bottom:none;
	}
	.table-head{
		position:absolute;	/* Hides table head but not using display none */
		top:-1000em;
		left:-1000em;
	}
	.row{
		border:1px solid #eeeeee;
		border-top:2px solid #dddddd;
		border-bottom:2px solid #dddddd;
		margin:20px 0;
	}
	.row .column:nth-child(1){ /* first column of the row */
		border-left:none;
	}
	.row .column:last-child{ /* last column of the row */
		border-right:none;
	}
	.row:last-child .column,
	.column{ /* Column in the last row and column */
		border-bottom:1px solid #eeeeee;
	}
	.column:before{ /* prints the value of data-label attribute before the column data */
		font-weight:bold;
		padding-right:20px;
		font-size:12px;
		content:" "attr(data-label)" //";	/* call the attribute value of data-label and adds a string // */
	}
}

Responsive CSS Table and supports mobile devices

Everything setup hope you enjoyed our tutorial.Grab the source and feel free to check out the demo

Reference : Css-tricks and Table Standards

  • http://twitter.com/chriscoyier Chris Coyier

    Hi Munawar,

    This is really neat, thanks for writing about it and expanding the thinking going on around responsive design and specific situations.

    This is similar-ish to some work I did: http://css-tricks.com/9096-responsive-data-tables/

    One difference is that you’ve used div’s where I used actual table markup. I played with it both ways, and ultimately decided that if it’s *really tabular data* then the correct markup to use is table markup. It also turns out that you can change the display values of table elements and have them behave like divs (for the narrow media queries) so I figured I might as well choose the most semantic choice.

    Another difference is that you’ve used data attributes for the labeling. I really like that. While it’s repetitive, it’s more flexible than hard coding the labels into CSS.

    As for all the “SEO” stuff here, I’m just not sure about that. I’m not an SEO guy. But I tend to think that just because you’re using div’s instead of table markup isn’t like “free SEO points”. I could be wrong though, just doesn’t seem logical and I don’t see any evidence either way.

    • http://www.mobifreaks.com Munawar Ahmed Mohammed

      i used div’s and made them behave like tables when the responsive thing is turned on. All div’s are converted into block’s and inline-block’s elements.

      Now about the SEO, Am not pretty sure as you are. but i belive using a div based table works for me.

      The idea of data-label was implemented after reading your comment on ” Responsive data tables”

      Thanks for the tips you wrote on css-tricks.com and i have read your book “Digging into WordPress” that was amazing.

      • http://paulirish.com Paul Irish

        afaik search engines don’t give much of a hoot what your tabular data is marked up in.. but other things do.

        And to help explain that.. How firefox determines if a table is for layout or actual data:
        http://asurkov.blogspot.com/2011/10/data-vs-layout-table.html

        I’d agree that actual table elements would be wiser here.

        • http://www.mobifreaks.com Munawar Ahmed Mohammed

          using tabular data is good. but my point is what are seo hooks related to table element.

          Am not sure, could use some help

      • http://s2-design.it/ Stefano Boccuti

        Hi Munawar,
        great article! I came here by reading Chris’s article, and I didn’t think of the SEO when making data-tables.
        I don’t know much about SEO and tables, but in any case: why do you use divs? Wouldn’t it be more semantically correct to use lists? A definition list would do the case, even if it’s repetitive.
        Another thing: do you think is it necessary to put a class on every element? Wouldn’t it be better to define the class of an ul (to behave like a table), and then style ul.table>li, ul.table>li:first-child, ul.table>li>ul>li (or ul.table>li>dl>dt) as rows, thead, and cells respectively?

        • http://www.mobifreaks.com Munawar Ahmed Mohammed

          Hi Stefano,
          first of all thanks for dropping by. Now, about the seo to say clearly i don’t have any proof. i just made an assumption of knowledge and am happy with that. We can’t say its a mistake.
          i didn’t thought of using a list, i should try this one. good thinking.while building div based table, its not really important to use repeated classes. if we could use nth-child.

  • Anonymous

    Hi Munawar, after reading your post (thank you) and also @Chris Coyier (thanks Chris) I’ve decided to try your approach on a responsive website that we are building… I have one question thought: in terms of usability and because i have huge amounts of data i will need to do some pagination and sorting (server side) but hiding table headers leaves me clueless about how to let my users sort this data. Do you have any advice or suggestion (sorry about my bad english)

    • http://www.mobifreaks.com Munawar Ahmed Mohammed

      We used data-label=”” to show the table header after hiding the real one. hope this give you an idea. how user get to know the data, what they are reading.

  • gmclelland

    This is the best solution I have seen so far.

    This would be perfect if you could somehow change existing tables on the fly with javascript.  Existing tables using table markup could be replaced with the markup you are using in this article.  We have some web apps built by external vendors where you can insert some js, but you can’t change their table markup.
    Anyone want to write a jquery plugin for this?

    • gmclelland

      Looks like someone did something similar to this with jquery 
      http://www.useyourfred.com/2012/01/js-in-my-sexy-responsive-data-tables/

      Though I prefer the way you linearized the labels on top.

      • http://www.mobifreaks.com Munawar Ahmed Mohammed

        we will be sure to look forward creating a js plugin

      • http://www.mobifreaks.com Munawar Ahmed Mohammed

        Yes we made a jquery plugin for you http://mobifreaks.com/coding/responsive-data-tables-jquery/

        • gmclelland

          Great, thank you.  I’m checking it out now.

  • http://twitter.com/frontendboss Parvez Ansari

    Hi Munawwar,

    With this approach we have to write separate code for sorting through the div’s as compared to code available for sorting in tabular data.

    Also, are we saying we are disabling the sort functionality for small device? Wouldn’t it be nice to display a drop down that list the column header and sorts it?

    What do u think?

  • http://www.facebook.com/jack.martin.357622 Jack Martin

    Hello, the solution here appears to be just what I need for my responsive website. However, I’m such a beginner that I’m having trouble linking the html to the css. Can someone provide me with some instruction? Do I put style.css and reset.css as external style sheets in the primary directory of my child-theme folder and then use the link or import function from the header in my wordpress page?

  • davort

    Thank you Munawar for sharing this very efficient technique!

    • http://www.mobifreaks.com Munawar Ahmed Mohammed

      Am glad i could help