與其他 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程式碼與輸出如下:
代碼:
<!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程式碼和輸出如下:
代碼:
<!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>
輸出:
這是另一個場景,我們將添加圖像和顏色作為背景,但添加到特定的單元格。
代碼:
<!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 Table。可以為特定表格屬性(例如整個表格或表格標題、表格行或表格列)設定圖像或顏色。這也可以在程式碼中使用表格背景屬性。
以上是HTML 表格背景的詳細內容。更多資訊請關注PHP中文網其他相關文章!