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中文網其他相關文章！