{"id":7536,"date":"2012-11-18T17:55:28","date_gmt":"2012-11-18T17:55:28","guid":{"rendered":"http:\/\/2slick.com\/web\/?p=7536"},"modified":"2012-12-20T22:12:31","modified_gmt":"2012-12-20T22:12:31","slug":"how-to-create-a-responsive-table","status":"publish","type":"post","link":"https:\/\/2slick.com\/web\/how-to-create-a-responsive-table\/affordablewebsitestips\/tutorials","title":{"rendered":"How to create a responsive table"},"content":{"rendered":"

In this tutorial I will show you how to create a responsive table for your website using Google's free 'Code Playground<\/a>'. 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.<\/p>\n

Create a responsive table using Google Code Playground<\/h3>\n
    \n
  1. Open a browser to Google Code Playground 'table' creation page.<\/a><\/li>\n
  2. You will start off with a sample table and sample data to mess with.Note:<\/strong> 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.  <\/li>\n
  3. Manipulate the table data by altering the code in the 'Edit HTML' field while viewing in 'markup mode'.<\/li>\n
  4. Click the 'Run Code' button to refresh the interactive table in the 'Output' field.<\/li>\n
  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.<\/li>\n
  6. Highlight and copy all the JavaScript code, i.e. all code starting with the 
     Javascript | <\/td><\/td> copy code |<\/td>?<\/td> <\/td><\/tr><\/tbody><\/table>
    1<\/td>
    <<\/span>script<\/pre><\/td><\/tr><\/table><\/div><\/pre> tangs and ending with the 
     Javascript | <\/td><\/td> copy code |<\/td>?<\/td> <\/td><\/tr><\/tbody><\/table>
    1<\/td>
    <\/<\/span>script><\/span><\/pre><\/td><\/tr><\/table><\/div><\/pre> tags and paste them into the header of your website.<\/li>\n
  7. Highlight and copy the div 
     Javascript | <\/td><\/td> copy code |<\/td>?<\/td> <\/td><\/tr><\/tbody><\/table>
    1<\/td>
    <<\/span>div id=<\/span>'table_div'<\/span>><\/<\/span>div><\/span><\/pre><\/td><\/tr><\/table><\/div><\/pre> and paste it into the body of of your website or CMS content fields.<\/li>\n
  8. Save your changes.<\/li>\n<\/ol>\n
    Useful links<\/h3>\n
    How to edit the header section of your WordPress website.<\/a><\/p>\n
    How to edit the header section of your Tumblr website.<\/a><\/p>\n
    For more documentation on the interactive table created by Google code<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
    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 […]<\/p>\n","protected":false},"author":1,"featured_media":7537,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,492],"tags":[614,615,385,613],"class_list":["post-7536","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-websites-2","tag-google-code","tag-google-code-playground","tag-javascript","tag-responsive-table"],"_links":{"self":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/7536","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/comments?post=7536"}],"version-history":[{"count":14,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/7536\/revisions"}],"predecessor-version":[{"id":7539,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/7536\/revisions\/7539"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/media\/7537"}],"wp:attachment":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/media?parent=7536"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/categories?post=7536"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/tags?post=7536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}