{"id":674,"date":"2010-01-07T19:28:13","date_gmt":"2010-01-07T19:28:13","guid":{"rendered":"http:\/\/salientsoft.co.uk\/?p=674"},"modified":"2011-11-17T13:28:53","modified_gmt":"2011-11-17T13:28:53","slug":"setting-table-borders-in-css","status":"publish","type":"post","link":"https:\/\/salientsoft.co.uk\/?p=674","title":{"rendered":"Styling tables with CSS"},"content":{"rendered":"<p>Rather than use the <strong>border<\/strong> keyword in HTML, it is better to style tables in CSS as this localises all the styling in the style sheet and promotes automatic\u00a0re-use across different tables.<\/p>\n<p><a title=\"http:\/\/www.somacon.com\/p141.php\" href=\"http:\/\/www.somacon.com\/p141.php\"><strong>This<\/strong><\/a><strong> <\/strong>page from <strong>Somacon<\/strong> is an easy-to-use\u00a0&#8216;what if&#8217; tool for tweaking all the properties for tables and instantly seeing the effect.<\/p>\n<p>The <strong>w3schools<\/strong> reference page for tables may be found <strong><a title=\"http:\/\/www.w3schools.com\/tags\/tag_table.asp\" href=\"http:\/\/www.w3schools.com\/tags\/tag_table.asp\">here<\/a>.<\/strong><\/p>\n<p><a title=\"http:\/\/www.w3schools.com\/Css\/pr_tab_border-collapse.asp\" href=\"http:\/\/www.w3schools.com\/Css\/pr_tab_border-collapse.asp\"><strong>This<\/strong><\/a> page also from <strong>w3schools<\/strong> describes the use of the\u00a0<strong>border-collapse<\/strong> property, which causes the <strong><a title=\"http:\/\/www.w3schools.com\/css\/pr_tab_border-spacing.asp\" href=\"http:\/\/www.w3schools.com\/css\/pr_tab_border-spacing.asp\">border-spacing<\/a><\/strong> and <strong><a title=\"http:\/\/www.w3schools.com\/Css\/pr_tab_empty-cells.asp\" href=\"http:\/\/www.w3schools.com\/Css\/pr_tab_empty-cells.asp\">empty-cells<\/a><\/strong> properties to be ignored, and for all borders to be collapsed to a single border. This is very useful when you want complete control yourself and to prevent some of these other\u00a0properties getting in the way, for example when you want a minimal flat solid border.<\/p>\n<p>Note that as is often the case, incorrect HTML can give rise to strange behaviour. For example if you mistakenly set <strong>colspan<\/strong> to greater than the number of columns (as I did when I subsequently deleted a column after creating a table and forgot to reduce <strong>colspan<\/strong>) you may get a partial double border effect on the right hand side.<\/p>\n<p><strong><a title=\"http:\/\/salientsoft.co.uk\/examples\/TableSample.html\" href=\"http:\/\/salientsoft.co.uk\/examples\/TableSample.html\" target=\"_blank\">Here<\/a><\/strong> is an example page with a table illustrating these points, together with all its CSS and HTML.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rather than use the border keyword in HTML, it is better to style tables in CSS as this localises all the styling in the style sheet and promotes automatic\u00a0re-use across different tables. This page from Somacon is an easy-to-use\u00a0&#8216;what if&#8217; tool for tweaking all the properties for tables and instantly seeing the effect. The w3schools [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[79],"tags":[86,189,78,85],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/674"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=674"}],"version-history":[{"count":7,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/674\/revisions"}],"predecessor-version":[{"id":676,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/674\/revisions\/676"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=674"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=674"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}