How to Create a Table with Rows of Alternating Colors using HTML and CSS



HTML


In this article, we show how to create a table with rows of alternating colors using HTML and CSS.

So, with HTML, we build the table. With CSS, we style the table, so that it can have any type of presentation.

So, in this article, we will create a table with the header (first row) of a gray color, and then alternating rows to be of orange and yellow colors.

This table is shown below.

Item Cost
Undershirt $12.00
Briefs $9.00
Boxers $9.00
Button-down shirt $35.00
Jeans $25.00
Jacket $100.00


So, you can see how we styled the table any way we want. We make the header of the table a gray color, then we have a alternating rows of orange and yellow colors for the table.

We will now go over how we did this.


HTML Code

We'll first go over the HTML code to build the table.

The key to creating a distinct style for a row is adding an attribute such as an id tag. We can then style this id tag any way we want to in the CSS file. We'll go over more of this.

Below is the HTML needed to build the table below.



So, we are building a table. Therefore, we place HTML table tag in the HTML file.

In order for the table to have borders and be delineated, we add, border="1" in the table tag. If we don't, there will be delineating in the table.

After this, we add our individual rows and columns. This table is very basic; it simply has 2 columns named Item and Price.

A new row is created with the <tr> tag. To this <tr> we add the attribute <tr id="grayrow"> for the first row. Later in our CSS code, we will style this grayrow attribute, so that the background is a gray color.

We next add our data to the tables.

We create another <tr> tag, this time we set the tr tag to an id value of orangerow. We will then style this orangerow attribute to have an orange background color.

We then create another <tr> tag, this time we set the tr tag to an id value of yellowrow. We will then style this yellowrow attribute to have a yellow background color.

Then for the next rows, we just alternate so that the id attribute to set to an id of orangerow, then yellowrow, orangerow, then yellowrow, etc. which gives us rows of alternating colors.

At the end, we simply close the table tag with <table>.


CSS Code

We will now go over the CSS code.

So, in the HTML code, we set various rows to an id attribute of grayrow, orangerow, and yellowrow.

In our CSS, we now need to add these attributes to the CSS file so that the grayrow has a background color of gray, the orange row has a background color of orange, and the yellowrow has a background color of yellow.

While we change the background row, we should also add the font attributes, so that the CSS can properly render fonts of data inside of the rows.

So, the following code below is the code needed.



So, whenever in HTML, we assign an id attribute to an element, we reference that id element with the symbol, #. # gives reference to an id attribute in an HTML file. So, we reference the grayrow attribute with #grayrow, the orangerow attribute with #orangerow, and the yellowrow attribute with #yellowrow.

The attribute to change the background color is background. To make the grayrow a gray attribute, we use the statement, background:gray;

Alternatively, you could use the CSS Hex number to specify the color. The Hex code for gray is #808080. However, this is not necessary.

To make the orangerow an orange background, we use the statement, background:orange;

To make the yellowrow a yellow background, we use the statement, background:yellow;

For all of these id attributes we define, we make the font black with a font of 17px in Times New Roman.

And this is all that is required to make a table with rows of alternating colors using HTML and CSS.

Armed with the knowledge that you no have, you could create any type of table. You can make a table with a gray row, followed by a blue row, followed by a purple row, followed by a pink row. You can style an HTML element such as a table in any way using CSS with the power of specific attributes.


Related Resources

How to Create a Definition List in HTML

How to Create a Table in HTML

How to Add a Class or ID to an Anchor Tag in HTML

How to Create a Reset Button in HTML

How to Create a Text Box that a User Cannot Type Inside Of

How to Create a List Box in HTML

How to Create a Multi-line Text Input (Textarea) in HTML

HTML Comment Box is loading comments...