HTML 表格背景

与其他 HTML 元素一样，HTML Table 可以做很多事情。所以我们也可以在HTML表格中设置不同样式的表格背景。 HTML 表格背景可用于设置对表格背景的控制。它可以采用颜色或图像的形式设置为表格的背景。在本主题中，我们将学习 HTML 表格背景。

此代码允许用户更改 HTML 表格的背景。 CSS 代码使用名为“background”的属性将样式设置为表格的背景。根据表格的宽度，我们还可以设置特定的图像作为表格的背景。但这会在表大小上重复。为了避免这种情况，我们可以使用一个名为background-repeat的属性。

语法

有多种方法可以在 HTML 中设置表格的背景。让我们一一看看相同的所有方法和语法如下：

为任何 HTML 元素设置背景的基本语法如下：

我们可以将同样的东西设置为表格的背景。在这种情况下，我们将设置

颜色作为表格的背景。

还可以将图像设置为 HTML 表格的背景。这可以使用称为背景图像的 CSS 属性来完成。该图像将自动设置为表格背景。如果此图像的尺寸小于表格宽度，则会显示重复和重复。

在上述情况下，我们可以通过使用 CSS 属性来避免显示图像重复和重复的情况，如下所示：

background-repeat: no-repeat;

还可以将图像设置为特定销售的背景。可以按如下方式完成：

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

就像特定单元格的图像一样，也可以为特定单元格设置颜色，如下所示：

content	content
content	content

或者

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

我们还可以使用以下语法将颜色设置为特定行：

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

通过为表格定义类并将 CSS 属性应用于该特定类也有助于为表格设置背景。其语法如下：

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

HTML 表格背景示例

以下是下面提到的示例：

示例#1

此示例用于将背景设置为颜色。因此可以根据自己的选择设置表格背景的颜色。HTML代码和输出如下：

代码：

<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

输出：

 示例#2

此示例是将背景设置为图像。因此，人们可以根据自己的选择将图像设置为表格背景。图像以重复模式作为输出，其 HTML 代码和输出如下：

代码：

<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

输出：

示例 #3

这是另一种场景，我们将添加图像和颜色作为背景，但添加到特定的单元格。

代码：

<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

输出：

结论

与其他元素一样，也可以将背景以图像和颜色的形式设置到 HTML Table。可以为特定表格属性（例如整个表格或表格标题、表格行或表格列）设置图像或颜色。这也可以在代码中使用表格背景属性。

以上是HTML 表格背景的详细内容。更多信息请关注PHP中文网其他相关文章！