HTML 表格背景-html教程-PHP中文网

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

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

语法

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

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

<HTML element background-color:color-name>
<HTML element background:"Image URL">

登录后复制

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

颜色作为表格的背景。

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

登录后复制

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

<table background:" Image URL">

登录后复制

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

<table background:" Image URL">

登录后复制

background-repeat: no-repeat;

登录后复制

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

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

登录后复制

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

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

登录后复制

或者

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代码和输出如下：

代码：

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<table class="tabledemo">
<tr>
<th>Place Name</th>
<th>To do Things</th>
<th>Distance from Pune</th>
<th>Best Time to visit</th>
</tr>
<tr>
<td>Sinhgad</td>
<td>Trekking, photography</td>
<td>30 km</td>
<td>All seasons</td>
</tr>
<tr>
<td>Lohgad fort</td>
<td>Pawana lake, Visapur fort</td>
<td>65 km</td>
<td>Mansoon</td>
</tr>
<tr>
<td>Pawana Lake</td>
<td>Night campaing</td>
<td>50 km</td>
<td>All seasons</td>
</tr>
<tr>
<td>lonvala</td>
<td>Rajmachi Fort, Bushi dam</td>
<td>66 km</td>
<td>Mansoon</td>
</tr>
<tr>
<td>Kamshet</td>
<td>Paragliding</td>
<td>47.5 km</td>
<td>All seasons</td>
</tr>
<tr>
<td>Khandala</td>
<td>Karla Hills</td>
<td>71.1 km</td>
<td>Rainy days</td>
</tr>
<tr>
<td>Alibaug</td>
<td>Colabo Fort, Kihim Beach</td>
<td>143 km</td>
<td>All Seasons</td>
</tr>
<tr>
<td>Tarkarli</td>
<td>Scuba Diving</td>
<td>388 km</td>
<td>All Seasons</td>
</tr>
<tr>
<td>Rajgad fort</td>
<td>Suvela machi, Balekilla</td>
<td>54 km</td>
<td>Mansoon</td>
</tr>
<tr>
<td>Kolad</td>
<td>River raffting</td>
<td>194 km</td>
<td>Mansoon, Winter</td>
</tr>
</table>
</body>
</html>

登录后复制

输出：

HTML 表格背景

示例#2

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

代码：

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<table class="imgbg">
<tr>
<th>Front End Languages</th>
<th>Backend Languages</th>
<th>Databases</th>
<th>OS</th>
</tr>
<tr>
<td>HTML </td>
<td>.NET</td>
<td>SQL</td>
<td>Windows 10</td>
</tr>
<tr>
<td>CSS</td>
<td>.NET</td>
<td>MYSQL</td>
<td>Windows 10</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>angular JS</td>
<td>PL/SQL</td>
<td>Ubuntu</td>
</tr>
<tr>
<td>Javascript</td>
<td>.NET</td>
<td>Mongo DB</td>
<td>Windows 10</td>
</tr>
<tr>
<td>Jquery</td>
<td>Core java</td>
<td>Mariya DB</td>
<td>Windows 10</td>
</tr>
<tr>
<td>React JS</td>
<td>Python</td>
<td>Maria DB</td>
<td>ubuntu</td>
</tr>
<tr>
<td>Vue JS</td>
<td>Php</td>
<td>PL-SQL</td>
<td>Windows 10</td>
</tr>
<tr>
<td>Angular 8</td>
<td>Java</td>
<td>Maria DB</td>
<td>Ubuntu</td>
</tr>
<tr>
<td>RWD</td>
<td>Ruby</td>
<td>Mongo DB</td>
<td>Windows 10</td>
</tr>
<tr>
<td>React JS</td>
<td>ASP .NET</td>
<td>Maria DB</td>
<td>Windows 10</td>
</tr>
</table>
</body>
</html>

登录后复制

输出：

HTML 表格背景

示例 #3

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

代码：

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<table class="imgno">
<tr style="background-color: chartreuse;">
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Location</th>
</tr>
<tr>
<td>ketki </td>
<td>Patil</td>
<td>28</td>
<td style="background-image: url(BG1.jpg)">Mumbai</td>
</tr>
<tr>
<td>Devendra</td>
<td>Gupta</td>
<td>35</td>
<td>Delhi</td>
</tr>
<tr>
<td style="background-color: aquamarine;">Nikhil</td>
<td>Sabnis</td>
<td>49</td>
<td>Neral</td>
</tr>
<tr >
<td style="background-color: darkgoldenrod;">Snehal</td>
<td>Wagh</td>
<td>29</td>
<td>Nashik</td>
</tr>
<tr>
<td>Gitu</td>
<td>Rathi</td>
<td>34</td>
<td>Pune</td>
</tr>
<tr style="background-image: url(BG1.jpg)">
<td>Pooja</td>
<td>Lohiya</td>
<td>26</td>
<td>Nanded</td>
</tr>
<tr style="background-image: url(BG1.jpg)">
<td>Dipti</td>
<td>Roy</td>
<td>22</td>
<td>Parbhani</td>
</tr>
<tr>
<td>Prem</td>
<td>Jadu</td>
<td>67</td>
<td>Kolkata</td>
</tr>
<tr>
<td>Aditi</td>
<td>Jain</td>
<td>23</td>
<td>Nagpur</td>
</tr>
<tr>
<td>Raj</td>
<td>Sohani</td>
<td>25</td>
<td>Latur</td>
</tr>
<tr>
<td>Sai</td>
<td>Jain</td>
<td>56</td>
<td style="background-image: url(BG1.jpg)">Mumbai</td>
</tr>
</table>
</body>
</html>

登录后复制

输出：

HTML 表格背景