{"id":1530,"date":"2012-07-16T23:21:43","date_gmt":"2012-07-16T23:21:43","guid":{"rendered":"http:\/\/cssreset.com\/?p=1530"},"modified":"2012-07-16T23:21:43","modified_gmt":"2012-07-16T23:21:43","slug":"styling-tables-with-css-made-easy","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/styling-tables-with-css-made-easy\/","title":{"rendered":"Styling Tables with CSS Made Easy"},"content":{"rendered":"

This CSS tutorial covers the basics of styling a table, including dealing with the border-collapse:<\/code> property and properly aligning your elements.<\/p>\n

This video does a really good job of moving through the essential steps necessary, starting with looking at the borders and margins and making sure to use CSS shorthand where possible to keep things clean and tidy.<\/p>\n

Now while the border-collapse:<\/code> and margin<\/code> properties deal with the table {}<\/code> declaration as a whole, padding<\/code> adjustments are in relation to the individual table cells under the td, th {}<\/code> declarations. The text-align:<\/code> property is also relevant to these cells.<\/p>\n

Adding a visible border element to a table can help it fit better aesthetically on a page and can also keep things looking more professional. Now adding a border-bottom:<\/code> property to the td, th {}<\/code> declaration will add a visible line under each cell, but you will still need to call out the th {}<\/code> border on it’s own to have a border more definitive under the header cell.<\/p>\n

One last thing that you can add to a simple table like this one is a tr: hover {}<\/code> declaration and insert a slight color change when someone hovers their mouse over a cell. This is done through the use of a background:<\/code> property which dictates color.<\/p>\n

If you liked this quick tutorial on styling tables with CSS, you may also enjoy this recent post on understand and clearing floats with CSS<\/a>. Thanks for stopping by!<\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

This CSS tutorial covers the basics of styling a table, including dealing with the border-collapse: property and properly aligning your elements.<\/p>\n

Share and Enjoy !0Shares0<\/p>\n

0<\/p>\n

[…]<\/p>\n

Watch Video<\/a><\/p>\n","protected":false},"author":18,"featured_media":1531,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,13],"tags":[67,57,79,73,105,118,102,130],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1530"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1530"}],"version-history":[{"count":4,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1530\/revisions"}],"predecessor-version":[{"id":1562,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1530\/revisions\/1562"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/1531"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}