Let’s face it—the default settings on a table are nothing special. Tables often need several properties applied for them to look well-designed.  Like with lists and list items, however, you need to understand which properties work best, where to put them, and what the results will look like.

For example, if a background color is applied to a table, it will fill the whole table. But if the rows or cells have a background color applied, that color will override the table’s background color.

Part of the reason for this behavior is CSS’s priority system, which will give priority to the target involving the most elements. So a CSS style applied to a <tr> tag will overtake one applied to the <table> tag. As far as nesting is concerned, a table row involves two elements —table and table row. Take it a step further, and table cells trump table rows as well, because now we’re diving in three elements deep—table, table row, and table cell. So your target will largely depend on how much content in the table you want to be affected.

The most common properties to apply to a <table> tag are margin:auto (to center a table), width, height, background-color, border, and any font or text-related styles.

Width, height, background-color, border, and font and text properties can all be applied to a <td> tag as well when considering styles unique to the table. Padding and vertical-align are properties that function best when put directly on a table cell, and not on the <table> tag.

Table rows can take on the properties that table cells can. When applying a property to a table row, all of the cells in that particular row will be affected.