In the last article, we learned basics about customising tables in web pages using CSS. There are some more things about customising tables.
Let's begin...
Table Padding
To set the space between content and borders, use padding property on <td> and <th> elements.
td, th {
padding: 5px;
}
Horizontal Dividers
Sometimes instead of the complete box like tables, horizontal lines make look tables great. You can add horizontal lines after each element and heading by using border-bottom property to <th> and <td> elements.
th, td {
border-bottom: 2px solid black;
}
Color the Headings
th {
background-color: black;
color: white;
}
Striped Tables
Make alternate rows look different by using color on either on even or odd rows.
tr:nth-child(even) {
background-color: gray;
}
Let's make one cool table with CSS...
First, see the output and then try to code yourself. There is one thing in code that I didn't tell you in articles. Let's see you can do it or not...
In the next article, we will learn about some more properties of CSS to customise web pages.
Till the #keepCoding.
Comments
Post a Comment