In this tutorial I will show you how to create a responsive table for your website using Google's free 'Code Playground'. The end result will be a JavaScript interactive table you can insert into your website, WordPress or Tumblr. JavaScript knowledge isn't required to complete this tutorial.

Create a responsive table using Google Code Playground

1. Open a browser to Google Code Playground 'table' creation page.
2. You will start off with a sample table and sample data to mess with.Note: the 'Edit HTML' button toggles editing modes between JavaScript and Google Code markup. Toggle the mode so that you're in Google Code markup view.  
3. Manipulate the table data by altering the code in the 'Edit HTML' field while viewing in 'markup mode'.
4. Click the 'Run Code' button to refresh the interactive table in the 'Output' field.
5. When you're done creating your interactive table, click the 'Edit HTML' button. You should now be viewing the html/JavaScript version of your interactive table.
6. Highlight and copy all the JavaScript code, i.e. all code starting with the

    Javascript | 
    copy code |
   ?
    
   1
   <script

   tangs and ending with the

    Javascript | 
    copy code |
   ?
    
   1
   </script>

   tags and paste them into the header of your website.
7. Highlight and copy the div

    Javascript | 
    copy code |
   ?
    
   1
   <div id='table_div'></div>

   and paste it into the body of of your website or CMS content fields.
8. Save your changes.

Useful links

How to edit the header section of your WordPress website.

How to edit the header section of your Tumblr website.

For more documentation on the interactive table created by Google code.