Now we’ll go all-out, with styles on rows in the header and body areas both, including alternating row colors, cells with different colors depending on position within a row, and so forth. Let’s take a look at the result first this time.
Result
Here’s what the final table will look like:
You are viewing: Which Of These Elements Are All Table Elements
There is no change to the HTML again. See what proper preparation of the HTML structure can do?
CSS
The CSS is much more involved this time. It’s not complicated, but there’s a lot going on. Let’s break it down.
Read more : Which Decaf Coffee Has The Least Caffeine
Here the border-collapse and border-spacing properties are added to eliminate spacing between cells and collapse borders that touch one another to be a single border instead of winding up with double borders. Additionally, the <caption> is placed at the bottom of the table using the caption-side property:
Next, the padding property is used to give all the table cells space around their content. The vertical-align property aligns the content of the header cells to the bottom of the cell, which can be seen on the cells in the head that span two rows:
The next CSS rule sets the background-color of all <tr> elements in the table’s head (as specified using <thead>). Then the bottom border of the head is set to be a two-pixel wide line. Notice, however, that we’re using the :nth-of-type selector to apply the border-bottom property to the second row in the head. Why? Because the head is made of two rows that are spanned by some of the cells. That means there are actually two rows there; applying the style to the first row would not give us the expected result:
Let’s style the two header cells “Joined” and “Canceled” with green and red hues to represent the “good” of a new member and the “bummer” of a canceled membership. Here we dig into the last row of the table’s head section using the :last-of-type selector and give the first header cell in it (the “Joined” header) a greenish color, and the second header cell in it (the “Canceled” header) a reddish hue:
Read more : Which Tokyo Ghoul Character Are You
Since the first column should stand out as well, some custom styling is added here too. This CSS rule styles the first header cell in each row of the table’s body with the text-align property to left-justify the member names, and with a somewhat different background-color:
It’s common to help improve the readability of table data by alternating row colors—this is sometimes referred to as “zebra striping”. Let’s add a bit of background-color to every even row:
Since it’s standard practice to right-justify currency values in tables, let’s do that here. This just sets the text-align property for the last <td> in each body row to right:
Finally, some styling similar to the head is applied to the foot section of the table to make it stand out as well:
Source: https://t-tees.com
Category: WHICH
