HTML의 중첩 테이블-HTML 튜토리얼-php.cn

'Nested Table'은 HTML 코딩에서 테이블을 사용할 때 가장 중요한 개념 중 하나입니다. 중첩된 테이블, 즉 '테이블 내의 테이블'은 더 크고 복잡한 테이블을 만들 때 사용되는 개념입니다. 대부분의 복잡하고 큰 테이블에는 코딩을 더 잘 제어할 수 있도록 기본 테이블 내에 테이블 중첩이 포함될 수 있습니다. 중첩된 표를 사용하면 아름답고 흥미로운 모양과 시각적 효과를 만드는 데 도움이 될 수 있지만 느슨한 종료 오류가 발생할 수 있습니다.

물론, 테이블 내에 테이블을 만드는 동안 코딩하고 유지 관리하고 처리해야 하는 모든 태그와 요소 때문에 중첩 테이블을 사용하기 시작하면 더 까다로워집니다. 하지만 일단 이러한 개념을 파악하고 복잡성을 다루면 태그를 저글링하는 것이 훨씬 쉬워집니다.

테이블 안에 테이블을 만드는 방법은 무엇인가요?

, , ….

내부에 중첩된 테이블은

닫기에 대한 모든 표준 규칙에 따라 완전히 닫혀야 합니다. 그리고

등과 같은 테이블 태그를 사용하여 중첩 테이블을 생성하면 다른 테이블 내에 테이블을 생성할 수 있습니다. 중첩 테이블은 더 높은 복잡성 수준으로 이어질 수 있으므로 동일한 셀 내에서 중첩 테이블을 시작하고 끝내는 것을 잊지 마십시오. 여러 수준으로 중첩된 테이블을 만들 수 있습니다. 동일한 셀 안에 내부 테이블을 생성하는 것을 잊지 마세요.

아래는 중첩된 테이블의 해석입니다. 아래 이미지는 '파란색' 색상이 가장 바깥쪽에 있는 테이블의 5단계 중첩 또는 흰색, 빨간색, 노란색, 녹색 색상으로 표현된 중첩 테이블이 있는 컨테이너 테이블을 보여줍니다.

HTML의 중첩 테이블

이번에는 중첩 테이블의 또 다른 예를 단계별로 만들어 보겠습니다.

먼저 둥지를 틀기 위해서는 메인 테이블과 컨테이너가 필요합니다.
두 번째로, 다른 테이블을 어느 행이나 열 또는 셀에 추가할지 결정하세요. 결정 후 다음 단계로 이동

완전히 새로운 테이블이 생성될 요소입니다. 계층적으로 ….

(여기에 중첩된 테이블이 있음)

요소.

중첩 테이블의 형식 지정은 HTML의 다른 요소와 마찬가지로 간단하고 유사합니다.

위의 예에는 두 개의 열이 포함된 테이블과 두 개의 행과 두 개의 열이 포함된 중첩 테이블이 있는 기본 컨테이너가 있습니다.

이제 아래의 중첩 테이블 예를 살펴보세요. 위에서 중첩 수준에 대한 해석으로 논의한 내용을 아래 코딩을 통해 만들어 보겠습니다.

코드:

<body>
<table border="10" bordercolor = "#0B1941">
<tr>
<td>
<table border="10" bordercolor = "#F8F3F3">
<tr>
<td>
<table border="10" bordercolor = "#C74D4F">
<tr>
<td>
<table border="10" bordercolor = "#DCE127">
<tr>
<td>
<table border="10" bordercolor = "#3CAB16">
<tr> <td> </td> </tr>
</table> </td> </tr>
</table> </td> </tr>
</table> </td> </tr>
</table> </td> </tr>
</table>

로그인 후 복사

위 코드는 서로 다른 색상으로 구별되는 테이블의 5단계 중첩을 보여주는 다음 디스플레이를 출력합니다. 테이블이 서로 내부에 위치하는지, 즉 테이블이 중첩되는지 관찰하세요.

HTML의 중첩 테이블

프로그래머가 전체 웹페이지 형식을 지정하기 위해 표를 사용할 때 표 내 중첩 개념은 시각적으로 더욱 흥미로워집니다. 그런 다음 테이블은 프로그래머가 중첩할 수 있는 다른 테이블 및 기타 HTML 요소와 같은 형식을 지정할 수 있습니다.

HTML의 중첩 테이블 예

다음은 언급된 예시입니다.

예시 #1

기본 테이블 내에 하나의 테이블만 있는 중첩 테이블의 아래 예를 살펴보세요. 메인 테이블과 그 안에 중첩된 테이블을 구분하기 위해 테이블의 테두리 반경과 테두리 색상을 다르게 사용했습니다.

코드:

<body>
<table border="5px" bordercolor="#8707B0">
<tr>
<td>Left side of the main table</td>
<td>
<table border="5px" bordercolor="#F35557">
<h4 align="center">Nested Table</h4>
<tr>
<td>nested table C1</td>
<td>nested table C2</td>
</tr>
<tr>
<td>nested table</td>
<td>nested table</td>
</tr>
</table>
</td>
</tr>
</table>

로그인 후 복사

출력:

HTML의 중첩 테이블

참고: 기본 컨테이너 테이블 내에 테이블이 중첩됩니다. 메인 테이블 내부에 중첩된 테이블은 빨간색 테두리가 있는 테이블입니다.

컨테이너 테이블의 요소입니다.

예시 #2

다음 코드는 기본 컨테이너 테이블 내부의 중첩 테이블 내에서 다른 HTML 요소의 중첩을 보여줍니다.

코드:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> NestedTables </title>
</head>
<body>
<caption title="Container Table"> Container Table </caption>
<table border="5px" bordercolor = "red">
<tr>
<td >
<table>
<tr> <th colspan="2"> Nested Table 2 </th> </tr>
<tr> <th> Column 1 </th> <th> Column 2 </th> </tr>
<tr> <td> Our First Table </td>
<td> Nested Within </td> </tr>
</table>
</td>
<td>
<table >
<tr> <th> Nested Table 2 </th> </tr>
<tr>
<td>
<ul>
<li> List Object 1 </li>
<li> List Object 2 </li>
<li> List Object 3 </li>
</ul>
</td>
</tr>
</table> </td> </tr>
<tr>
<td>
<table>
<tr> <th colspan="2" align="center"> Nested Table 3 </th> </tr>
<tr>
<td> <a href=""> Nested Table </a> </td>
<td> Demo Continued </td> </tr>
</table> </td>
<td>
<table>
<tr> <th> Nested Table 4 </th> </tr>
<tr>
<td> <img src="images.png" height="120px" width="120px" alt="Sorry Image could not be displayed"> </td> </tr> </table>
</td>
</tr>
</table>
</body>
</html>

로그인 후 복사

위 코드는 하나의 테이블에 여러 개의 다른 테이블이 포함될 수 있는 방법을 보여줍니다. 이 테이블에는 일반적으로 간단한 HTML 페이지에 추가하는 모든 유형의 콘텐츠가 포함될 수 있습니다. 위의 코드에는 테두리가 없습니다.

HTML의 중첩 테이블