HTML 테이블 태그 데이터를 표 형식(행 * 열)으로 표시하는 데 사용됩니다. 한 행에 여러 개의 열이 있을 수 있습니다.

다음을 사용하여 테이블 형식으로 데이터를 표시하는 테이블을 만들 수 있습니다.

각 테이블에서 테이블 행은 다음과 같이 정의됩니다.태그, 테이블 헤더는 다음으로 정의됩니다., 테이블 데이터는 다음과 같이 정의됩니다.태그.

HTML 테이블은 페이지 레이아웃을 관리하는 데 사용됩니다. 헤더 섹션, 네비게이션 바, 본문 내용, 바닥글 섹션 등. 그러나 페이지 레이아웃을 관리하려면 테이블 위에 div 태그를 사용하는 것이 좋습니다.

HTML 테이블 태그

HTML 테이블 예

HTML 테이블 태그의 예를 살펴보겠습니다. 출력은 위에 나와 있습니다.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

산출:

이산 수학 부정

위의 html 테이블에는 5개의 행과 3개의 열 = 5 * 3 = 15개의 값이 있습니다.

테두리가 있는 HTML 테이블

HTML 테이블의 테두리를 지정하는 방법에는 두 가지가 있습니다.

1. HTML 테이블의 테두리 속성별
2. CSS의 테두리 속성으로

1) HTML 테두리 속성

HTML에서 테이블 태그의 테두리 속성을 사용하여 테두리를 지정할 수 있습니다. 하지만 지금은 권장하지 않습니다.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

산출:

2) CSS 테두리 속성

이제 CSS의 border 속성을 사용하여 테이블에 테두리를 지정하는 것이 좋습니다.

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

border-collapse 속성을 사용하면 하나의 테두리에 있는 모든 테두리를 축소할 수 있습니다. 국경을 하나로 축소합니다.

if-else 문 자바

 table, th, td { border: 2px solid black; border-collapse: collapse; } 

산출:

셀 패딩이 포함된 HTML 테이블

다음 두 가지 방법으로 테이블 헤더 및 테이블 데이터에 대한 패딩을 지정할 수 있습니다.

1. HTML에서 테이블의 cellpadding 속성을 사용하여
2. CSS의 패딩 속성으로

HTML 테이블 태그의 cellpadding 속성은 이제 더 이상 사용되지 않습니다. CSS를 사용하는 것이 좋습니다. 그럼 CSS 코드를 살펴보겠습니다.

 table, th, td { border: 1px solid pink; border-collapse: collapse; } th, td { padding: 10px; } 

산출:

HTML 테이블 너비:

다음을 사용하여 HTML 테이블 너비를 지정할 수 있습니다. CSS 너비 재산. 픽셀 또는 백분율로 지정할 수 있습니다.

우리는 요구 사항에 따라 테이블 너비를 조정할 수 있습니다. 다음은 너비가 있는 테이블을 표시하는 예입니다.

 table{ width: 100%; } 

예:

 table table{ border-collapse: collapse; width: 100%; } th,td{ border: 2px solid green; padding: 15px; } <table class="table"> <tr> <th>1 header</th> <th>1 header</th> <th>1 header</th> </tr> <tr> <td>1data</td> <td>1data</td> <td>1data</td> </tr> <tr> <td>2 data</td> <td>2 data</td> <td>2 data</td> </tr> <tr> <td>3 data</td> <td>3 data</td> <td>3 data</td> </tr> </table> 

산출:

colspan이 포함된 HTML 테이블

셀 범위를 두 개 이상의 열로 만들려면 colspan 속성을 사용할 수 있습니다.

하나의 셀/행을 여러 열로 나누며, 열 수는 colspan 속성 값에 따라 달라집니다.

두 개의 열에 걸쳐 있는 예제를 살펴보겠습니다.

CSS 코드:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } 

HTML 코드:

 <table class="table"> <tr> <th>Name</th> <th>Mobile No.</th> </tr> <tr> <td>Ajeet Maurya</td> <td>7503520801</td> <td>9555879135</td> </tr> </table> 

산출:

k-nn 알고리즘

행 범위가 있는 HTML 테이블

셀 범위를 둘 이상의 행으로 만들려면 rowspan 속성을 사용할 수 있습니다.

셀을 여러 행으로 나눕니다. 분할된 행 수는 rowspan 값에 따라 달라집니다.

두 행에 걸쳐 있는 예제를 살펴보겠습니다.

CSS 코드:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } 

HTML 코드:

 <table class="table"> <tr><th>Name</th><td>Ajeet Maurya</td></tr> <tr><th>Mobile No.</th><td>7503520801</td></tr> <tr><td>9555879135</td></tr> </table> 

산출:

캡션이 포함된 HTML 테이블

HTML 캡션이 테이블 위에 표시됩니다. 테이블 태그 뒤에만 사용해야 합니다.

 <table class="table"> Student Records <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr> <tr><td>Mike</td><td>Warn</td><td>60</td></tr> <tr><td>Shane</td><td>Warn</td><td>42</td></tr> <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr> </table> 

HTML 테이블 짝수 및 홀수 셀 스타일 지정

CSS 코드:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } table#alter tr:nth-child(even) { background-color: #eee; } table#alter tr:nth-child(odd) { background-color: #fff; } table#alter th { color: white; background-color: gray; } 

산출:

참고: 테이블의 다양한 CSS 속성을 사용하여 다양한 유형의 테이블을 만들 수도 있습니다.

지원 브라우저

요소	크롬	즉	파이어폭스	오페라	원정 여행
	예	예	예	예	예