{"id":633,"date":"2007-03-11T15:40:47","date_gmt":"2007-03-11T15:40:47","guid":{"rendered":"http:\/\/www.stevepugh.net\/VTT\/2007\/03\/11\/html-tables-for-the-post-css-generation\/"},"modified":"2007-03-11T15:40:47","modified_gmt":"2007-03-11T15:40:47","slug":"html-tables-for-the-post-css-generation","status":"publish","type":"post","link":"https:\/\/stevepugh.net\/VTT\/2007\/03\/html-tables-for-the-post-css-generation\/","title":{"rendered":"HTML tables for the post-CSS generation"},"content":{"rendered":"<p>Recently I had a conversation with a web developer who had never used <abbr title=\"HyperText Markup Language\">HTML<\/abbr> tables. They&#8217;d come into the business after the web standards movement had established itself and had never learnt to use tables. As a consequence they were using divs and <abbr title=\"Cascading Style Sheets\">CSS<\/abbr> floats, etc. to lay out things that could (or even should) have been done with tables and running into the sort of issues you might expect when you use a generic tool to do a specialised job.<\/p>\n<p>So I was wondering if there were other people like this out there, and if so would they benefit from a short tutorial explaining HTML tables from a CSS perspective? Such a tutorial might prove useful for others as well &#8211; it might provide an alternative way of approaching the tables-to-CSS transition that some people are still struggling with, and it might help explain just how CSS and tables interact. After all the <a href=\"http:\/\/www.w3.org\/TR\/CSS21\/tables.html\">table elements have their own layout model in the CSS specification<\/a> and it&#8217;s not the easiest thing to grasp.<\/p>\n<p>If I were to write such a tutorial I guess it would fall into two halves. The first half would look at the &#8220;simple&#8221; table model (<code>table<\/code>, <code>tr<\/code>, <code>td<\/code> and <code>th<\/code> elements) used for simple data tables and *gasp* layout tables and how their default behaviour compares with the standard CSS box model; whilst the second half would look at the &#8220;advanced&#8221; table model (<code>caption<\/code>, <code>col\/colgroup<\/code> and <code>thead\/tbody\/tfoot<\/code> plus the accessibility enhancing attributes) and how to build complex data tables.<\/p>\n<p>Anyone interested in seeing this?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Recently I had a conversation with a web developer who had never used HTML tables. They&#8217;d come into the business after the web standards movement had established itself and had never learnt to use tables. As a consequence they were using divs and CSS floats, etc. to lay out things that could (or even should) [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[15],"tags":[74],"class_list":["post-633","post","type-post","status-publish","format-standard","hentry","category-www","tag-css"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1fxq5-ad","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/posts\/633","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/comments?post=633"}],"version-history":[{"count":0,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/posts\/633\/revisions"}],"wp:attachment":[{"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/media?parent=633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/categories?post=633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/tags?post=633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}