与其他 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中文网其他相关文章!