{"id":7651,"date":"2010-10-07T12:44:04","date_gmt":"2010-10-07T19:44:04","guid":{"rendered":"http:\/\/css-tricks.com\/"},"modified":"2015-02-25T20:04:21","modified_gmt":"2015-02-26T03:04:21","slug":"92-drawing-table","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/92-drawing-table\/","title":{"rendered":"#92: Code Walkthrough of Drawing Table"},"content":{"rendered":"
The Drawing Table is in essence a mini one-page jQuery application. It has one primary function, creating a colored design by changing the colors of cells in an HTML table. However it has many features to make this as easy and useful as possible. In this screencast we walk through the existing code looking at the finished example, the markup, and the JavaScript powering that it – feature by feature.<\/p>\n
Links from Video:<\/strong><\/p>\n The Drawing Table is in essence a mini one-page jQuery application. It has one primary function, creating a colored design by changing the colors of cells in an HTML table. However it has many features to make this as easy and useful as possible. In this screencast we walk through the existing code looking at […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":16296,"url":"https:\/\/css-tricks.com\/video-screencasts-6\/","url_meta":{"origin":7651,"position":0},"title":"Video Screencasts","date":"February 13, 2012","format":false,"excerpt":"#100: Let\u2019s Write Semantic Markup Running time: 01:02:07 We look at a Photoshop design and write HTML5 markup that describes it as semantically as we can. #99: Overview of HTML5 Forms Types, Attributes, and Elements Running time: 38:33 We'll talk about the new features of HTML5 that relate to making\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2610,"url":"https:\/\/css-tricks.com\/video-screencasts\/61-basic-table-styling\/","url_meta":{"origin":7651,"position":1},"title":"#61: Basic Table Styling with CSS","date":"April 22, 2009","format":false,"excerpt":"Tables are great. They are perfectly suited for use on the web. That is, for displaying tabular data! In this screencast we'll cover what that actually means, take a look at a table, the markup that creates it, quirks and things-you-should-know. Then we start styling it up with CSS and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6474,"url":"https:\/\/css-tricks.com\/video-screencasts-5\/","url_meta":{"origin":7651,"position":2},"title":"Video Screencasts","date":"May 28, 2010","format":false,"excerpt":"#80: Regarding Wheel Invention Running time: 19:09 Sometimes \"reinventing the wheel\" is the right way to go. You get control and all the learning that goes into it. Sometimes it is a waste of time and an existing solution will save you time, money, frustration, and it may do a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4038,"url":"https:\/\/css-tricks.com\/snippets\/html\/empty-table-markup\/","url_meta":{"origin":7651,"position":3},"title":"Empty Table Markup","date":"September 11, 2009","format":false,"excerpt":"","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":150364,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/table-of-contents\/","url_meta":{"origin":7651,"position":4},"title":"Learning jQuery From Scratch","date":"September 17, 2013","format":false,"excerpt":"","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3298,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/open-external-links-in-new-window\/","url_meta":{"origin":7651,"position":5},"title":"Open External Links In New Window","date":"August 10, 2009","format":false,"excerpt":"$('a').each(function() { var a = new RegExp('\/' + window.location.host + '\/'); if(!a.test(this.href)) { $(this).click(function(event) { event.preventDefault(); event.stopPropagation(); window.open(this.href, '_blank'); }); } }); You can do this straight with HTML, but that is invalid markup, this takes care of business without invalid code and unnecessary markup. Or, you can still avoid\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/7651"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=7651"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/7651\/revisions"}],"predecessor-version":[{"id":7654,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/7651\/revisions\/7654"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=7651"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=7651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n