HTML Table Background

Like other HTML elements, there are many things to do with HTML Table. So we can set the Table background with different styles in the HTML table too. HTML Table background can be used to set control over the table’s background. It can be in the form of colors or images set as a background to the table. In this topic, we are going to learn about HTML Table Background.

This code allows users to do changes to HTML Table’s background. CSS code sets style to the table’s background using a property called background. As per the table’s width, we can also set a particular image as a background to the table. But this will repeat in table size. To avoid this case, we can use a property called background-repeat.

Syntax

There are multiple ways to set the background to the Table in HTML. Let’s see all the ways and syntax for the same one by one as follows:

The basic syntax to set background to any HTML element is as follows:

Same thing we can set as background to the table. In this scenario, we are going to set

color as the background to the Table.

One can also set an image as a background to the Table in HTML. It can be done using a CSS property called a background image. This image will automatically set to the table background. In case this image is smaller in size than table width, then it will show repeat and repeat again.

In the above case, we are able to avoid this condition of showing image repeat and repeat by using CSS property as follows:

background-repeat: no-repeat;

It is also possible to set an image as a background to the one specific sell also. This can be done as follows:

.cellimg{
width: 100%;
border: 1px solid black;
}
.cellimg{
background-img: url("");
background-repeat: no-repeat;
}

Like an image to a specific cell, one can set the color to the specific cell also as follows:

content	content
content	content

OR

td.classname {
background-color:color-name;
}

We can set the color to the specific row also by using the following syntax:

<tr style="background-color:color-name;">
<th> </th>
<th> </th>
</tr>

By defining class to the table and apply CSS property to that specific class is also helpful to set background to the table. The syntax for this is as follows:

<style>
.tableclassname {
width:100%;
background-color:color-name;
}
.tableclassname  th{
width:100%;
background-color:color-name;
}
.tableclassname td{
background-color:color-name;
}
</style>

Examples of HTML Table Background

Here are the following examples mention below :

Example #1

This example is for setting the background as a color. So can set the color to the table background as per their choice.HTML code and output for it as follows:

Code:

<title>HTML Table Background</title>
<!-- CSS -->
<style>
.tabledemo {
width: 100%;
text-align: Center;
background-color:aquamarine;
border-collapse: collapse;
}
.tabledemo td, .tabledemo th {
border:2px solid brown;
padding:3px;
}
</style>

Place Name	To do Things	Distance from Pune	Best Time to visit
Sinhgad	Trekking, photography	30 km	All seasons
Lohgad fort	Pawana lake, Visapur fort	65 km	Mansoon
Pawana Lake	Night campaing	50 km	All seasons
lonvala	Rajmachi Fort, Bushi dam	66 km	Mansoon
Kamshet	Paragliding	47.5 km	All seasons
Khandala	Karla Hills	71.1 km	Rainy days
Alibaug	Colabo Fort, Kihim Beach	143 km	All Seasons
Tarkarli	Scuba Diving	388 km	All Seasons
Rajgad fort	Suvela machi, Balekilla	54 km	Mansoon
Kolad	River raffting	194 km	Mansoon, Winter

Output:

 Example #2

This example is for setting the background as an image. So one can set an image to the table background as per their choice. Image is in repeat mode as output, HTML code and output for it as follows:

Code:

<title>HTML Table Background</title>
<style>
.imgbg {
width: 100%;
text-align: left;
background-image: url(BG.jpg);
border-collapse: collapse;
}
.imgbg td, .imgbg th {
border:2px solid black;
padding:5px;
}
</style>

Front End Languages	Backend Languages	Databases	OS
HTML	.NET	SQL	Windows 10
CSS	.NET	MYSQL	Windows 10
Bootstrap	angular JS	PL/SQL	Ubuntu
Javascript	.NET	Mongo DB	Windows 10
Jquery	Core java	Mariya DB	Windows 10
React JS	Python	Maria DB	ubuntu
Vue JS	Php	PL-SQL	Windows 10
Angular 8	Java	Maria DB	Ubuntu
RWD	Ruby	Mongo DB	Windows 10
React JS	ASP .NET	Maria DB	Windows 10

Output:

Example #3

This is one more scenario in which we are going to add both image and color as a background but to the particular cell.

Code :

<title>HTML Table Background</title>
<style>
.imgno {
width: 100%;
border-collapse: collapse;
text-align: center;
}
.imgno td, .imgno th {
border:1px solid black;
padding:4px;
}
</style>

First Name	Last Name	Age	Location
ketki	Patil	28	Mumbai
Devendra	Gupta	35	Delhi
Nikhil	Sabnis	49	Neral
Snehal	Wagh	29	Nashik
Gitu	Rathi	34	Pune
Pooja	Lohiya	26	Nanded
Dipti	Roy	22	Parbhani
Prem	Jadu	67	Kolkata
Aditi	Jain	23	Nagpur
Raj	Sohani	25	Latur
Sai	Jain	56	Mumbai

Output:

Conclusion

Like other elements, it’s also possible to set the background in the form of an image and color to the HTML Table. One can set an image or color to the specific table attributes like the whole table or to the table head, table row or table column. This is also possible using table background property in code.

The above is the detailed content of HTML Table Background. For more information, please follow other related articles on the PHP Chinese website!