HTML 表格背景-html教學-PHP中文網

HTML 表格背景範例

範例 #3

結論

首頁

web前端

html教學

HTML 表格背景

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:48 PM

html html5 HTML Tutorial HTML Properties HTML tags

與其他 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 表格背景