Zebra Strips Table in HTML & CSS

on

 ZEBRA STRIPS TABLE IN HTML & CSS



Table
HTML tables allow web developers to arrange data into rows and columns.

Table Rows
Each table row starts with a <tr> and end with a </tr> tag.
tr stands for table row.

Table Columns
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table cell.

Table Headers
Sometimes you want your cells to be headers, in those cases use the <th> tag instead of the <td> tag.
By default, the text in <th> elements are bold and centered, but you can change that with CSS.

Simple Structure of Table:

Simple Structure of Table
Simple Structure of Table

Zebra Strips Table Code:


Code is also Available on Github: Click Here!



Here, In this code section the code is applied on all the table formet, we have defined the font family to arial, sans-serif to all fonts inside the table, another property is border-collapse is set to collapse so only single border is displayed and at the and width is set to 100% so table can cover the screen width.


In this Section we have applied the css property to the <td> (perticular cell ) & <th> table header tags. We applied border size to 0.5px and light gray color to border , all the text are aligned left as you can see and at the end padding is applied to all the cells of table where <td> and <th> tag is applied.






:nth-child selector:

The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.

n can be a number, a keyword, or a formula.

in tr:nth-child(even) it will select all the even numbers of table if we select odd it will select all the odd number of the table column.


Attribute:

instagram : @codedesignerworld



Comments

Post a Comment