WDS44 - Style the Tables

In the last article, we learned about customising lists with CSS properties and also created one cool looking list. Now in today's article, we will style tables in HTML using CSS.
Let's begin...

Table Borders

To give borders to the table using CSS, we have to use border property which is same as we used till now. The only catch is which elements, will you select to apply border for?
To get the outer border to table, select table element.
To get the border to all headings, select th element.
To get the border to all elements, select td element.
Final Syntax:

table, th, td {
    border: 1px solid black;
}

If you run the above syntax if you notice our table is looking pretty bad(admit it...). The reason behind this is that there are double borders everywhere. This is because <th> and <td> elements have separate borders. What to do remove this double borders? 
There is CSS property named border-collapse. Apply this property to the table and set its value to collapse to get single borders.

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

Table Width and Height

Select any one element of the table, tr or th for the complete table, element or headings respectively and give whatever value of width and height you want in any valid units.
Example:

table {
    width: 100%;
}

Align Text

The text-align property sets horizontal alignment of the content of any text content element. By default, <th> elements are center-aligned and the content of <td> elements are left-aligned. 
The vertical-align property sets vertical alignment of text with values top, bottom or middle of the content in <th> or <td>.

That's all for today. In the next article, we will continue customising tables using CSS.
Till then #keepCoding.