HTML의 테이블 테두리

HTML의 표 테두리는 표 내용 주위에 테두리를 표시하는 데 사용됩니다. 표 셀 주위에 테두리가 표시되지 않도록 0과 같은 값을 지정하여 표 주위에 설정할 수 있으며, 값 1은 표 셀 주위에 테두리를 표시하도록 설정됩니다. 테이블 너비는 사용자가 테이블 주위에 제공하려는 두꺼운 테두리의 양을 정의하기 위해 숫자 값으로 설정할 수 있습니다. 전체 테이블이나 특정 행이나 열 또는 테이블 헤드에만 테두리를 설정할 수 있습니다. 모든 것이 가능합니다.

HTML의 테이블 테두리 구문

테이블 테두리를 정의하는 방법에는 여러 가지가 있습니다. 구문을 하나씩 살펴보겠습니다.

1. 일반 테이블 테두리: 이는 일반적으로 다음과 같이 테이블 주위에 간단한 테두리를 정의하는 데 사용됩니다.

예:

table, th, td{
border:1px solid blue;
}

2. 접을 수 있는 테이블 테두리: 이 속성은 border-collapse 속성을 사용하여 테이블 주위에 한 줄로 접을 수 있는 테두리를 설정하는 데 사용됩니다.

table{
border-collapse: collapse;
}

예:

table{
border-collapse: collapse;
}
table, th, td{
border:0px;
}

3. 테이블 주위의 테두리: 이 속성을 사용하면 다음과 같이 각 개별 테이블 셀이 아닌 외부 가장자리에만 테이블 테두리를 추가할 수 있습니다.

table {
border : 1px;
}

4. 점선 표 테두리: 다음과 같은 구문을 사용하여 표에 점선 테두리를 간단히 추가할 수 있습니다. 

table{
border : 1px; dotted color-name;
}

5. 점선 표 테두리: 점선처럼 표나 표 셀 주위에 점선 테두리를 설정할 수 있습니다. 값을 설정하여 사용자 선택에 따라 얇거나 두꺼워질 수 있습니다.

table{
border : 3px; dashed color-name;
}

6. 이중 표 테두리: 표에 이중 윤곽선을 추가하려면 CSS 코드 내에서 속성을 설정하고 표 주위에 이중 테두리를 지정하면 됩니다.

table{
border : 1px; double color-name;
}

7. 표 셀 주변의 표 테두리: 이 구문은 개별 셀이나 특정 표 셀 주위에 선호하는 색상 코드로 테두리를 제공하는 데 도움이 됩니다. 이 구문에서는 각 셀에 테두리 코드 값을 별도로 추가하려고 합니다.

table{
border : 1px; dotted color-name;
}
th{
border : 1px; color-name;
}
td{
border : 2px; color-name;
}

8. CSS 클래스를 사용한 표 테두리: 각 개별 표 셀에 테두리를 설정하는 대신 CSS 클래스를 사용하면 표에 공통 테두리 코드를 제공할 수 있습니다. 이는 다음 구문을 사용하여 수행할 수 있습니다:

<style>
table{
background-color: color-name;
}
table th{
CSS code
}
table td{
CSS code
}
</style>

9. 테이블 하단 테두리: 테이블 테두리의 이 속성은 다음과 같이 테이블의 th 및 td 태그 사이에 가로 구분선을 제공하는 데 사용됩니다.

th, td{
border-bottom: value color-name;
}

10. 둥근 테이블 테두리: 테이블 테두리에 둥근 모서리를 표시합니다.

table{
border-radius: value;
border: value color-name;
}

HTML의 표 테두리 예

다음은 Table Border의 예시입니다

예시 #1

다음 예에서는 테두리가 다른 두 개의 테이블을 보여줍니다. 첫 번째 표는 표 주위에 일반 테두리를 표시한 반면, 두 번째 표는 접을 수 있는 표 테두리 형식의 예입니다.

HTML 코드:

<style>
.collapsetable{
border-collapse: collapse;
border: 3px solid blue;
}
</style>

Genral Table Border

SR.NO	NAME	Education	AGE
1	Dinesh	BCA	26
2	Raj	CA	30
3	Deepti	ME	28
4	Akhilesh	B.com	21
5	Sara	MBA	26

Collapsible Table Border

Emp Code	Emp Name	Job Title	Salary(LPA)
911	Zoya Shaikh	Developer	3.6
912	Lisa Dev	Tester	2.8
913	Deepak Jadeja	Digital Marketing	5.2
914	Aditi Yewale	Developer	4
915	Simren Rao	HR	5.6

출력:

예시 #2

이 예는 테이블 테두리 유형이 다른 테이블 외부 부분에만 테두리를 설정하는 방법을 보여줍니다.

HTML 코드:

<style>
table{
border: 1px solid red;
border-collapse: collapse;
}
</style>


<h4 id="Table-with-outside-border">Table with outside border</h4>

Index	Seasons	Durations
1	Summer	4 months
2	Rainy Seasons	4 months
3	Winter	4 months

Table with dotted border

Index	Seasons	Durations
1	Summer	4 months
2	Rainy Seasons	4 months
3	Winter	4 months

Table with dashed border

Index	Seasons	Durations
1	Summer	4 months
2	Rainy Seasons	4 months
3	Winter	4 months

Table with double border

Index	Seasons	Durations
1	Summer	4 months
2	Rainy Seasons	4 months
3	Winter	4 months

출력: 이 출력은 테이블 외부에 점선, 점선 및 이중 테두리가 있는 테이블을 보여줍니다.

예시 #3

다른 색상의 개별 테두리로 둘러싸인 표 셀을 보여주는 예:

HTML 코드:

<style>
table{
border: 3px solid red;
}
th{
border: 2px solid blue;
}
td{
border: 2px solid black;
}
</style>


<h4 id="Table-border-around-Cell">Table border around Cell</h4>

First Name	Last Name	City
Rita	Mishra	Mumbai
Rashmi	Patil	Nagpur
Kartik	Dev	Pune

출력:

예시 #4

가로 구분선으로 테두리가 있는 또 다른 테이블 둥근 테두리

HTML 코드:

<style>
.round{
border-radius: 15px;
border: 2px solid purple;
padding: 5px;
}
th, td {
border-bottom: 1px solid black;
}
</style>


<h4 id="Table-border-around-Cell">Table border around Cell</h4>

Cake	Weight	Price
Chocalate	1/2 kg	400/-
Rasmalai	1 kg	850/-

출력:

결론

• HTML의 표 테두리는 표 주위에 테두리를 표시하려면 값 1을 할당하고 표 주위에 테두리를 숨기려면 0 값을 할당하여 설정됩니다.
• 테이블 주위에 단순한 테두리, 두꺼운 테두리, 얇은 테두리, 접을 수 있는 테두리, 점선 테두리, 이중 테두리, 점선 테두리 등 다양한 유형으로 테두리를 설정할 수 있습니다.

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