Zebra Striped Table How to create with CSS

Table Colors and Backgrounds

Tables can have outer border colors as well as cell border colors. They also can have background colors, patterns, and graphic images as backdrops for the full table or for selected rows and cells.

If you want to style the two first columns of a table, use the <colgroup> and <col> elements.

The <colgroup> The element should be used as a container for the column specifications.

Each group is specified with an <col> element.

The span the attribute specifies how many columns that get the style.

The style the attribute specifies the style to give the columns.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Colgroup</h2>
<p>Add the a colgroup with a col element that spans over two columns to define a style for the two columns:</p>

</body>
</html>

Colgroup

Add the a colgroup with a col element that spans over two columns to define a style for the two columns:

Cell1	Cell2	Cell3	Cell4	Cell5	Cell6	Cell7
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	32	33	34	35	36	37

Zebra Striped Table How to create with CSS tricks code?

A zebra-stripped table is a table that has alternating rows (or columns) in a different shade of color. The benefits of using zebra-striped tables are many, such as increasing the readability of rows (or columns), laying emphasis on a specific set of rows (or columns), etc. This article will tell you how to create a zebra-stripped table (rows or columns) in a webpage by using HTML and CSS only.

Table striped Html.

table striped CSS tricks.
zebra striping table.
zebra striping excels.
table striped CSS bootstrap 4.
table HTML.
table striped color.

Table with Zebra Striped rows:

Tap into the tr (table row) element is CSS.

Use the nth-child() selector and add the background color of your choice to all odd (or even) table rows.

Example: Alternate rows get a different background color, thus creating a table with zebra-striped rows.

If you add background color on every other table row, you will get a nice zebra stripes effect.

For Example:

tr:nth-child(even) {

background-color: #c1c6e7;

}

Zebra Striped Table

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:

Output:

First Name	Last Name	Earn
Jhon	Arthur	$50
Emma	Alin	$140
William	Anderson	$200
Sophia	Brown	$300

AR3school