HTML-Tabellenhintergrund

Wie bei anderen HTML-Elementen gibt es auch bei HTML Table viele Dinge, die man tun kann. So können wir den Tabellenhintergrund auch in der HTML-Tabelle mit verschiedenen Stilen festlegen. Der HTML-Tabellenhintergrund kann verwendet werden, um die Kontrolle über den Hintergrund der Tabelle festzulegen. Dies kann in Form von Farben oder Bildern erfolgen, die als Hintergrund für die Tabelle dienen. In diesem Thema lernen wir den HTML-Tabellenhintergrund kennen.

Mit diesem Code können Benutzer Änderungen am Hintergrund der HTML-Tabelle vornehmen. Der CSS-Code legt mithilfe einer Eigenschaft namens „Hintergrund“ den Stil für den Hintergrund der Tabelle fest. Je nach Breite der Tabelle können wir auch ein bestimmtes Bild als Hintergrund für die Tabelle festlegen. Dies wird sich jedoch in der Tabellengröße wiederholen. Um diesen Fall zu vermeiden, können wir eine Eigenschaft namens „background-repeat“ verwenden.

Syntax

Es gibt mehrere Möglichkeiten, den Hintergrund der Tabelle in HTML festzulegen. Sehen wir uns nacheinander alle Möglichkeiten und die Syntax für dasselbe an:

Die grundlegende Syntax zum Festlegen des Hintergrunds für ein beliebiges HTML-Element lautet wie folgt:

Dasselbe können wir auch als Hintergrund für die Tabelle festlegen. In diesem Szenario werden wir

festlegen

Farbe als Hintergrund für die Tabelle.

Man kann in HTML auch ein Bild als Hintergrund für die Tabelle festlegen. Dies kann mithilfe einer CSS-Eigenschaft namens Hintergrundbild erfolgen. Dieses Bild wird automatisch als Tabellenhintergrund festgelegt. Falls dieses Bild kleiner als die Tabellenbreite ist, wird es wiederholt angezeigt.

Im obigen Fall können wir diesen Zustand der wiederholten Anzeige von Bildern vermeiden, indem wir die CSS-Eigenschaft wie folgt verwenden:

background-repeat: no-repeat;

Es ist auch möglich, ein Bild als Hintergrund für einen bestimmten Verkauf festzulegen. Dies kann wie folgt erfolgen:

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

Wie bei einem Bild für eine bestimmte Zelle kann man die Farbe für die bestimmte Zelle auch wie folgt festlegen:

content	content
content	content

ODER

td.classname {
background-color:color-name;
}

Wir können die Farbe für eine bestimmte Zeile auch mithilfe der folgenden Syntax festlegen:

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

Das Definieren einer Klasse für die Tabelle und das Anwenden der CSS-Eigenschaft auf diese bestimmte Klasse ist auch hilfreich, um den Hintergrund für die Tabelle festzulegen. Die Syntax hierfür lautet wie folgt:

<style>
.tableclassname {
width:100%;
background-color:color-name;
}
.tableclassname  th{
width:100%;
background-color:color-name;
}
.tableclassname td{
background-color:color-name;
}
</style>

Beispiele für HTML-Tabellenhintergrund

Hier sind die folgenden Beispiele:

Beispiel #1

In diesem Beispiel wird der Hintergrund als Farbe festgelegt. So können Sie die Farbe für den Tabellenhintergrund entsprechend Ihrer Wahl festlegen.HTML-Code und geben Sie ihn wie folgt aus:

Code:

<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

Ausgabe:

 Beispiel #2

In diesem Beispiel wird der Hintergrund als Bild festgelegt. So kann man je nach Wunsch ein Bild als Tabellenhintergrund festlegen. Bild befindet sich im Wiederholungsmodus als Ausgabe, HTML-Code und Ausgabe dafür wie folgt:

Code:

<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

Ausgabe:

Beispiel #3

Dies ist ein weiteres Szenario, in dem wir sowohl ein Bild als auch eine Farbe als Hintergrund hinzufügen, jedoch zu einer bestimmten Zelle.

Code:

<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

Ausgabe:

Fazit

Wie bei anderen Elementen ist es auch bei der HTML-Tabelle möglich, den Hintergrund in Form eines Bildes und einer Farbe festzulegen. Man kann ein Bild oder eine Farbe für bestimmte Tabellenattribute festlegen, beispielsweise für die gesamte Tabelle oder für den Tabellenkopf, die Tabellenzeile oder die Tabellenspalte. Dies ist auch mithilfe der Tabellenhintergrundeigenschaft im Code möglich.

Das obige ist der detaillierte Inhalt vonHTML-Tabellenhintergrund. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!