HTML의 테이블 너비 및 높이 정렬 문제를 해결하는 세 가지 방법

많은 프로그래머들은 웹사이트를 만들 때 표를 정렬할 수 없는 문제에 직면하게 됩니다. 그렇다면 HTML에서 표의 셀 너비와 높이를 어떻게 설정해야 할까요? HTML에서 테이블 너비와 높이 정렬을 설정하는 세 가지 방법을 요약해 보겠습니다.

프로그래머가 웹 페이지를 만들 때 표 너비가 잘못 정렬되는 문제에 자주 직면합니다. HTML에서 테이블 태그의 높이와 너비 설정에 대해 자세히 살펴보았는데 다음과 같이 정리했습니다.

1. 테이블의 너비와 높이 설정 및 해당 기능: 테이블에 설정된 높이 실제로는 최소값을 설정합니다. 즉, 테이블의 내용이나 행 높이가 이 설정 값을 초과하면 테이블의 내용이나 행 높이가 이 값에 도달하지 않을 때 테이블의 높이 값이 자동으로 확장됩니다. 자동으로 이 값으로 확장됩니다. 테이블에 설정된 너비 값은 일반적으로 테이블 너비의 최대값이며, 내부 콘텐츠 너비가 이를 초과하더라도 변경할 수 없습니다. (내부 내용이 그림인 경우 표 너비는 변경될 수 있습니다.)

2. tr 태그의 너비 및 높이 설정과 해당 기능: tr 태그의 너비 설정은 효과가 없습니다. 첫 번째 점 테이블의 너비는 변경할 수 없으며 tr 태그는 물론 작동하지 않음을 알 수 있습니다. 따라서 tr의 높이 설정에 대해서만 논의할 수 있습니다. tr의 높이 설정은 여러 tr 간의 설정과 관련이 있습니다. 여러 개의 tr에 특정 높이 값을 설정한 경우, 각 tr의 높이는 설정된 값에 비례하여 전체 높이 값에 할당됩니다. 여러 TR이 특정 높이 값을 설정하지 않으면 전체 높이 값이 고르게 분포됩니다. 일부 TR이 특정 값으로 설정되고 일부 TR이 특정 값으로 설정되지 않은 경우 기본값으로 먼저 각 TR의 기본 요구 사항을 확인한 다음 나머지는 특정 값이 설정된 TR을 충족시킨 다음 모든 TR을 충족시킵니다. 특정 값이 없는 TR이 설정됩니다. 마지막 경우에는 tr의 전체 설정 값에 비해 전체 너비가 충분하지 않다는 점을 고려해야 하며, 충분하지 않은 경우 tr의 기본 요구 사항을 충족해야 합니다. 여기서 테이블의 높이는 자동으로 확장됩니다. 그런 다음 높이가 설정된 tr을 고려하고, 마지막으로 높이가 설정되지 않은 tr을 고려합니다.

3. td 태그의 너비와 높이 설정 및 해당 기능: td 태그의 너비와 높이는 모두 유효합니다. 먼저 TD의 너비를 살펴보겠습니다. 특정 TD의 너비는 열의 각 TD의 너비와 관련이 있습니다. 그 중 가장 큰 너비가 이 열의 각 TD의 너비로 간주됩니다. 대부분의 경우 전역 관점에서 특정 TD의 너비를 파악해야 합니다. 이 너비 설정에서는 너비를 결정할 수 없습니다. 각 열의 너비를 파악하면 작업이 더 쉬워집니다. 이때 각 TD 간의 너비 분포는 두 번째 기사의 각 tr의 높이 분포 규칙을 기반으로 합니다. 한 가지 차이점은 기본적으로 각 TD의 너비가 균등하게 분포되지 않고 실제에 따라 비례한다는 것입니다. 콘텐츠를 배포합니다. td의 높이 설정을 살펴보겠습니다. 이것은 비교적 간단합니다. 그러나 각 td의 높이는 이 행의 각 td의 높이를 결정하기 위해 td가 위치한 행의 최대 높이에 따라 달라집니다. 각 행의 높이는 tr의 높이에 따라 결정됩니다. 높이 할당 원리는 동일합니다. 주목해야 할 또 다른 사항은 td 높이와 tr 높이 사이의 관계입니다. 우선, 내용의 필요에 따라 결정되어야 하며, 이를 기준으로 설정값이 더 큰 쪽이 사용되며, 다른 쪽은 설정값이 없을 경우 사용됩니다. 설정값이 있으면 설정값이 사용됩니다.

1, 전통적인 방법을 사용하세요

 <table width="400"> 
<tr> 
<td width="100"></td> 
<td width="100"></td> 
<td width="100"></td> 
<td width="100"></td> 
</tr> 
<table>

2, CSS를 사용하세요

<style>
.td{width:100px;}
</style>
<table width="400"> 
<tr> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
</tr> 
<table>

위의 두 가지 방법에서 발생할 수 있는 문제는 이미지 너비가 100보다 큰 등 콘텐츠가 설정을 초과하면 자연스럽게 확장하면 테이블이 자동으로 조정됩니다. 3, CSS를 사용하여 정렬

<style>
.td{width:100px;overflow:hidden}
</style>
<table width="400"> 
<tr> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
</tr> 
<table>

이 방법을 사용하면 초과 부분을 숨길 수 있습니다. 엄격한 제어가 필요한 경우 이 방법을 사용할 수 있습니다. 스크롤 또는 자동으로 설정된 경우 이 방법을 사용할 수 있습니다. 오버플로 속성 값을 스크롤 또는 자동으로 설정하면 제한을 초과할 때 스크롤 막대를 사용하여 조정할 수 있습니다.

위 내용은 HTML의 테이블 너비 및 높이 정렬 문제를 해결하는 세 가지 방법에 대한 전체 소개입니다. HTML 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트에 주목하세요.

위 내용은 HTML의 테이블 너비 및 높이 정렬 문제를 해결하는 세 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!