HTML 테이블 배경

다른 HTML 요소와 마찬가지로 HTML 테이블과 관련된 작업이 많습니다. 따라서 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 테이블에 이미지와 색상 형태의 배경을 설정할 수도 있습니다. 전체 테이블이나 테이블 헤드, 테이블 행 또는 테이블 열과 같은 특정 테이블 속성에 이미지나 색상을 설정할 수 있습니다. 코드에서 테이블 배경 속성을 사용하는 것도 가능합니다.

위 내용은 HTML 테이블 배경의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!