Fix: styles for tables in SQL lessons

[pbanaszkiewicz]

This PR addresses #9.

Previously

• table cells had no padding, which caused a visual collapse (cell content was too close to cell neighbors)
• table header rows had dark blue background and black letters
• tables had no space between them and following paragraphs.

BEFORE:

Changes

• added 5px padding to cell contents
• changed header row background to gray-ish (I considered switching text color to white, but it didn't look good)
• 15px margin on the bottom of the tables (similarly to bottom margin used by paragraph style).

AFTER:

[rgaiacs]

@pbanaszkiewicz What about use the same style from the table at our workshop template, see https://swcarpentry.github.io/workshop-template/? You should keep the change for the table head.

[pbanaszkiewicz]

@r-gaia-cs thanks for suggestion. I was considering a switch to Bootstrap styles, but I don't entirely like them:

1. they have huge horizontal padding
2. they tinker with :last-child and :first-child a lot

If you have specific styles in mind that we can borrow (big padding, no background for <thead>, striped rows) please let me know and I'll implement it.

[rgaiacs]

@pbanaszkiewicz I'm OK with the currently horizontal padding and agree to avoid playing a lot with :last-child and :first-child. What I'm suggesting is that we use

tbody > tr:nth-of-type(2n+1) {
    background-color: #F9F9F9;
}

and

tbody > tr > td {
    border-top: 1px solid #DDD;
}

This samples need improvements to be more robust.

[pbanaszkiewicz]

Hi @r-gaia-cs,

this is what I have now:

It's matching closely .table-bordered from Bootstrap. I decided to leave the header row background blank because it was too close in color to #F9F9F9 - our rule for even rows in the table.

I also increased horizontal padding by 5px on both sides, because now that we have vertical borders it was too cramped.