HTML 테이블 태그 및 관련 줄 바꿈에 대한 심층 분석

테이블이란 무엇입니까?

테이블은 데이터를 전달하는 HTML 테이블입니다.
다음은 테이블 코드를 작성하는 비교적 표준적인 방법입니다.

<table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <th>Month</th>
    <th>Date</th>
  </tr>
  <tr>
    <td>AUG</td>
    <td>18</td>
  </tr>
</table>

간단한 HTML 테이블은 table 요소와 하나 이상의 tr, th 또는 td 요소로 구성됩니다. tr 요소는 테이블 행을 정의하고, th 요소는 헤더 셀을 정의하고, td 요소는 테이블 셀을 정의합니다. border 속성은 테이블 테두리의 너비를 지정하고, cellpadding은 셀 가장자리와 내용 사이의 공간을 지정하며, cellpacing은 셀 사이의 공간을 지정합니다. 일반적으로 브라우저 차이를 피하기 위해 이 세 가지 속성을 수동으로 0으로 설정합니다. width 속성은 테이블의 너비를 지정합니다. 왜냐하면 테이블의 너비는 내부 요소의 너비에 따라 변경되기 때문입니다. 일반적인 상황에서는 테이블의 너비가 외부 컨테이너와 동일하기를 원하므로 기본 너비가 설정되는 경우가 많습니다. 100%로 컨테이너를 채웁니다.

table-layout:fixed 속성
table-layout: auto(기본값) |
매개변수:
auto: 기본 자동 알고리즘. 레이아웃은 각 셀의 내용을 기반으로 합니다. 각 셀을 읽고 계산할 때까지 테이블이 표시되지 않으므로 속도가 매우 느립니다.
고정: 고정 레이아웃 알고리즘. 이 알고리즘에서 가로 레이아웃은 테이블 너비, 테이블 테두리 너비, 셀 간격, 열 너비만을 기준으로 하며 테이블 내용과는 아무런 관련이 없습니다. 파싱 ​​속도가 빠릅니다.
고정 레이아웃 모델의 작업 단계:
1. 너비 속성 값이 auto가 아닌 모든 열 요소는 너비 값에 따라 열 너비를 설정합니다.
2. 테이블의 첫 번째 행에 있는 이 열의 셀 너비는 셀 너비에 따라 이 열의 너비를 설정합니다. 셀이 여러 열에 걸쳐 있는 경우 너비는 열 전체에 균등하게 나누어집니다.
3. 위의 두 단계 후에도 열의 너비가 여전히 자동인 경우 너비가 최대한 동일하도록 크기가 자동으로 결정됩니다. 이때, 테이블의 너비는 테이블의 너비 값과 컬럼 너비의 합(둘 중 큰 쪽)으로 설정됩니다. 테이블 너비가 열 너비의 합보다 큰 경우 그 차이를 열 수로 나누고 결과 너비를 각 열에 더합니다.
이 방법은 모든 열 너비가 테이블의 첫 번째 행에 의해 정의되므로 빠릅니다. 첫 번째 행 이후의 모든 행에 있는 셀의 크기는 첫 번째 행에서 정의한 열 너비에 따라 조정됩니다. 이후 행의 셀은 열 너비를 변경하지 않습니다. 이는 해당 셀에 지정된 너비 값이 무시됨을 의미합니다.
일반적으로 복잡한 표 HTML을 만들 때 첫 번째 행의 각 열 너비를 어떻게 조정하더라도 열 너비가 여전히 예기치 않게 변경되는 경우가 있습니다(예: 영어 텍스트의 긴 문자열, 중간에 공백이 없으면 이 열의 너비를 제한하여 긴 텍스트가 표를 깨지 않고 강제로 줄바꿈되도록 하고, 결과적으로 어떻게 시도해도 적절한 너비를 조정할 수 없는 경우가 많습니다.) 이때 절실히 table-layout:fixed를 사용하시면 됩니다.

일반적이고 낯선 테이블 태그
thead, tfoot 및 tbody
이 세 가지 태그는 소위 xhtml의 산물이며 주로 테이블 편집을 가능하게 합니다. 의 행 테이블을 생성할 때 머리글 행, 데이터가 포함된 일부 행, 하단에 총계 행을 두고 싶을 수도 있습니다. 이 분할을 통해 브라우저는 표 머리글 및 바닥글과 별도로 표 본문 스크롤을 지원할 수 있습니다. 긴 표를 인쇄할 때 표 머리글과 바닥글은 표 데이터가 포함된 각 페이지에 인쇄될 수 있습니다. 개인적으로 저는 그 주요 목적이 매우 긴 테이블의 디스플레이 최적화에 적합하다고 생각합니다.
thead 태그는 HTML 테이블 헤더
테이블의 헤드 헤드를 나타냅니다. 별도의 스타일을 사용하여 테이블 헤더를 정의할 수 있으며, 테이블 헤더를 상단에 인쇄할 수 있습니다. 인쇄할 때 페이지.
thead 태그는 HTML 바닥글
테이블의 바닥글을 나타냅니다. 바닥글(각주 또는 테이블 노트)은 별도의 스타일을 사용하여 정의할 수 있으며, 페이지는 다음 위치에 인쇄될 수 있습니다. 인쇄할 때 페이지 하단 부분.
tbody 태그는 HTML 테이블 본문을 나타냅니다.
브라우저는 테이블을 표시할 때 일반적으로 테이블을 완전히 다운로드한 후 전체를 표시합니다. tbody를 사용하여 세그먼트로 표시합니다.
참고: thead, tfoot 및 tbody 요소를 사용하는 경우 해당 요소를 모두 사용해야 합니다. 표시되는 순서는 thead, tfoot, tbody이므로 브라우저는 모든 데이터를 수신하기 전에 머리글과 바닥글을 렌더링할 수 있습니다. 테이블 요소 내에서 이러한 태그를 사용해야 하며, thead에는 내부에 tr 태그가 있어야 합니다. 따라서 테이블을 작성하는 보다 표준적인 방법은 다음과 같은 코드입니다.

<table border="0" cellspacing="0" cellpadding="0" width="100%">
  <thead>
    <tr>
      <th>Month</th>
      <th>Date</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Month Lists</th>
      <th>Date Lists</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>AUG</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

개인적으로 이건 쓸모도 없고 쓸모도 없고 버리기엔 안타까운 코드라고 생각합니다. 소규모 프로젝트에서는 일부 의미를 추가할 수 있지만 동일한 테이블에 여러 개의 서로 다른 헤더가 표시되어 향후 개발이 제한되는 딜레마에 직면했기 때문에 공식 프로젝트에서는 확장성 관점에서 이러한 태그를 주의해서 사용합니다.

col과 colgroup
역시 xhtml의 제품이며 강력하고 호환됩니다.
col 태그는 테이블에 있는 하나 이상의 열에 대한 속성 값을 정의합니다.
colgroup 태그는 형식 지정을 위해 테이블의 열을 그룹화하는 데 사용됩니다.
주요 기능은 셀 너비를 제어하는 ​​것이므로 각 셀을 별도로 정의하는 수고를 덜었습니다. 과거에는 각 열의 너비를 지정하기 위해 첫 번째 행에서 너비를 정의하는 경우가 많았습니다. 및 col은 너비를 정의할 수 있을 뿐만 아니라 동시에 다른 속성도 정의할 수 있습니다. 예를 들어 col을 사용하여 여러 열의 너비의 합을 제어할 수 있으며 이 열의 배경색도 제어할 수 있습니다. 그러나 이상은 가득하고 현실은 백본입니다. 앞서 언급했듯이 기능이 클수록 호환성도 높아집니다. 기존 테스트에 따르면 col 및 colgroup과의 호환성을 보장할 수 있는 애플리케이션은 두 가지뿐입니다. 너비와 배경. 너비의 경우 개인적으로 기존 방법을 사용하는 것을 선호하며 첫 번째 행에 너비를 설정하고 열 너비를 보장합니다. 배경의 경우 실제로 테이블이 넓은 영역에서 다른 배경을 사용하는 경우는 거의 없습니다. 그러므로 저는 개인적으로 가능한 한 많이 사용하지 않는 것이 좋다고 생각합니다.

테이블 사용처
개인적으로 데이터가 매우 조밀하고 직렬화되어 있는 컨테이너에서는 테이블을 사용하는 것이 맞다고 생각합니다. 가장 일반적인 예는 당사의 일반적인 쇼핑 주문 정산 페이지로, 제품명, 단가, 구매 수량, 소계 금액, 배송비 등 주문 세부 정보가 나열되어 있습니다. 마지막으로 최종 주문 금액에 대한 결과가 다음 사이트에 표시됩니다. 바닥, 테이블 여기는 물 속의 물고기와 같다고 할 수 있으며 데이터 매체의 마법적인 효과를 얻었습니다.

복잡한 테이블 줄 바꿈
때때로 테이블을 사용하여 데이터를 표시할 때, 즉 특정 텍스트를 줄 바꿈 없이 표시할 때(특히 헤더에서) 머리가 아플 때가 있습니다. th 에서 가장 자주 사용됩니다. 사실, 여러분이 겪고 있는 골칫거리는 줄 바꿈이 아니지만 그 뒤에 있는 브라우저 호환성으로 인해 줄 바꿈이 훨씬 더 어려워집니다.
일반적으로 테이블에서 줄 바꿈하는 방법은 다음과 같습니다. 먼저 테이블 레이아웃을 설정합니다. 기본적으로 이 속성을 설정한 후에는 테이블에서 td 없이 기본 줄 바꿈 문제를 해결할 수 있습니다. Th 내부의 각 컨텐츠의 양으로 인해 다른 td와 th의 너비를 놓고 경쟁하는 상황이 발생합니다. 이때 여전히 강제 줄 바꿈 문제가 있는 경우 td 내부에 p 레이어를 추가한 다음 두 가지 CSS 메서드 word-wrap:break-word;를 사용하여 문제를 해결하세요. 줄바꿈 문제.

강제 줄 바꿈과 강제 비라인 줄 바꿈에 대한 지침
한때 줄 바꿈 문제와 강제 비라인 줄 바꿈 문제를 만날 때마다 괴로웠던 적이 있습니다. 포장, 그것은 아픈 기억의 시작이었습니다. 이제 마침내 나는 경험을 통해 배우고 이 오랜 고질적인 문제를 해결하기 위해 열심히 노력했습니다.
줄 바꿈을 강제하고 줄 바꿈을 강제하지 않는 데 사용되는 속성
우리는 일반적으로 줄 바꿈을 제어하기 위해 세 가지 CSS 속성인 word-wrap; 이 세 가지 속성은 텍스트 줄 바꿈을 위해 특별히 생성되었다고 할 수 있습니다. 먼저 다음 세 가지 속성이 무엇에 사용되는지 알아야 합니다.

word-wrap 구문
word-wrap: Normal(기본값) | 각 브라우저는
매개변수를 인식합니다.
normal: 콘텐츠가 지정된 컨테이너 경계를 지나도록 허용합니다.
break-word: 콘텐츠가 경계 내에서 중단됩니다. 단어 분리는 필요할 때 실행됩니다(참고: 단어 분리와 분리 단어는 서로 다른 것이며 하나는 속성이고 다른 하나는 매개변수라는 점을 명확하게 구별하십시오).
설명:
word-wrap은 "단어 줄 바꿈" 여부를 제어하고 현재 줄이 지정된 컨테이너의 경계를 초과할 때 줄 바꿈 여부를 설정하거나 검색합니다. 중국어도 문제 없고, 영어 문장도 문제 없습니다. 그러나 긴 영어 문자열의 경우에는 작동하지 않습니다.
예:
congratulation이라는 단어는 긴 영어 단어 문자열에 속합니다. word-wrap:break-word는 줄 끝이 전체 단어를 표시할 만큼 넓지 않은 경우 전체 단어를 전체적으로 처리합니다. , 단어를 자르지 않고 자동으로 전체 단어를 다음 줄에 배치하므로 긴 텍스트 문자열에서는 작동하지 않습니다. word-wrap:normal이 기본값이며, 영어 단어는 분리되지 않습니다.
결론:
작업 범위는 p와 같은 표준 블록 수준 요소뿐입니다. th 및 td와 같은 테이블 요소는 인식되지만 효과가 없습니다(td인 경우 th와 너비 word-wrap이 작동할 수 있음). IE에서 효과적이지만 완전한 호환성과 편리한 메모리의 관점에서 이전 결론이 우선합니다).

단어 분리 구문
단어 분리: 일반(기본값) | break-all | keep-all
매개변수:
일반: 아시아 언어에 따름 단어 내에서 줄 바꿈을 허용하는 아시아 언어에 대한 비텍스트 규칙입니다.
break-all: 이 동작은 아시아 언어의 일반적인 동작과 동일합니다. 비아시아 언어 텍스트 줄의 모든 단어 내에서의 구분도 허용됩니다. 이 값은 일부 비아시아 텍스트가 포함된 아시아 텍스트에 적합합니다.
모두 유지: 아시아 이외의 모든 언어에 대해 일반과 동일합니다. 중국어, 한국어, 일본어의 경우 단어 구분이 허용되지 않습니다. 소량의 아시아 텍스트가 포함된 비아시아 텍스트에 적합합니다.
설명:
word-break:break-all은 중단 단어입니다. 단어가 경계에 도달하면 다음 문자가 자동으로 다음 줄로 이동합니다. 이는 주로 긴 영어 문자열의 문제를 해결합니다(단지 긴 텍스트 문자열에서는 word-wrap:break-word가 작동하지 않는다는 위의 결함을 보완합니다).
예:
위에서 계속해서 congratulation이라는 단어는 영어 단어의 긴 문자열에 속합니다. Word-break:break-all은 단어를 자르고 줄의 끝은 conra(the 축하의 앞 부분) 다음 행동 tulation(conguatulation)의 백엔드 부분입니다.
word-break:keep-all은 중국어, 일본어, 한국어 연속어를 의미합니다. 즉, 줄 바꿈 없이 이번에만 사용하면 중국어는 줄 바꿈이 되지 않습니다. (영어 문장은 정상입니다.)
결론:
동작 범위는 p 등의 표준 블록 수준 요소뿐입니다. th, td 등의 테이블 요소는 인식되지만 효과는 없습니다(Chrome word-break에서 테스트). :break-all 효과적이지만 완전한 호환성과 편리한 메모리의 관점에서 보면 이전 결론이 우선합니다. Firefox와 Opera는 Firefox의 th 및 td에서 단어 분리를 사용하는 효과는 말할 것도 없고 단어 분리를 인식할 수 없습니다.

공백 구문
공백: 일반(기본값) | pre | nowrap
매개변수:
일반: 기본값. 브라우저는 공백을 무시합니다.
pre: 브라우저가 공백을 유지합니다. 이는 HTML의 pre 태그처럼 동작합니다.
nowrap: 텍스트는 br 태그를 만날 때까지 같은 줄에 계속 표시됩니다.
참고:
pre 속성의 경우 HTML의 여러 연속 공백 문자가 병합된 다음 병합을 방지하기 위해(가장 일반적인 경우는 코드 텍스트의 들여쓰기를 나타내는 경우임) 공백 문자는 들여쓰기와 줄 바꿈을 제어하기 위해 추가 스타일과 태그를 추가하지 않고도 계속 유지됩니다. pre 태그의 원리는 동일합니다. 기본적으로 공백이 있습니다.
nowrap 속성의 경우 줄 바꿈을 강제하지 않는 것이 핵심입니다. 일반적으로 이 속성은 줄 바꿈을 강제하지 않는 데 사용됩니다. Firefox의 p, td에서는 문제가 없고, IE의 p에서는 문제가 없습니다. 유일한 결함은 IE의 td에 문제가 있다는 것입니다. td가 너비를 지정하지 않으면 nowrap은 여전히 ​​유효합니다. td에 너비가 있고 텍스트에 구두점이나 공백이 없으면(예: 중국어 텍스트), nowrap은 더 이상 효율적으로 작동하지 않습니다. 해결책은 이 문제를 해결하기 위해 word-break:keep-all;을 추가하는 것입니다.

강제 줄 바꿈 요약:
p와 같은 표준 블록 수준 요소에서 강제로 줄 바꿈이 필요한 경우 가장 일반적인 해결 방법은 단어 줄 바꿈입니다. break-word; word-break:break-all; 이 방법의 단점은 줄의 끝이 영어 단어의 긴 문자열인 경우 어색한 방식으로 찢어진다는 것입니다(그리고 FF는 그렇지 않습니다). 단어 분리를 인식하지만 단어를 분리하지는 않습니다). 개인적으로, p에 URL과 유사한 주소의 긴 문자열을 넣으면 이 솔루션을 사용하는 것이 매우 좋은 선택이라고 생각합니다. (참고: FF는 단어 분리를 인식하지 않기 때문에 URL 단어가 각 줄의 끝을 깔끔하게 깨뜨려야 하지만 이 역시 무력한 선택입니다. URL처럼 끊어질 수 있는 긴 영어 문자열이 아닌 영어 문장을 배치하는 경우 word-wrap:break-word;를 사용합니다. 인터넷에서 본 word-wrap:break-word;overflow:hidden;은 IE, FF와 호환된다고 하는데, 개인적으로 테스트해본 결과 특별한 효과는 없는 것 같습니다.

줄 바꿈 없음 강제 적용 요약:
줄 바꿈 없음 강제 적용 문제는 위에서 설명한 것처럼 white-space:nowrap, Firefox의 p 및 There를 사용하여 비교적 쉽게 분석할 수 있습니다. IE의 td와 p에서는 문제가 없습니다. 유일한 결함은 IE의 td에 문제가 있다는 것입니다. td가 너비를 지정하지 않으면 nowrap은 여전히 ​​유효합니다. td에 너비가 있고 텍스트에 구두점이나 공백이 없으면(예: 중국어 텍스트), nowrap은 더 이상 효율적으로 작동하지 않습니다. 해결책은 이 문제를 해결하기 위해 word-break:keep-all;을 추가하는 것입니다. 요약하자면, 더 안전한 방법은 텍스트와 td 사이에 p의 또 다른 레이어를 배치한 다음 줄 바꿈을 강제하지 않는 nowrap을 사용하는 것입니다. 이때 너무 많은 텍스트가 컨테이너에 오버플로될 가능성이 매우 높으므로 컨테이너가 오버플로되는 것을 방지하기 위해 Overflow:hidden을 추가해야 다양한 브라우저와 호환될 수 있습니다.
너무 많이 요약해 보니 브라우저의 다양한 호환성을 균형있게 유지하는 것은 단지 몇 가지 속성일 뿐인 것 같습니다. 우리가 할 수 있는 한 모든 브라우저와 완전히 호환될 수 있는 완벽한 솔루션은 없는 것 같습니다. 브라우저 디스플레이를 최대한 일관되게 유지하려고 노력하세요. 여전히 모든 브라우저와 호환되어야 한다고 생각한다면 최종 해결책은 JS를 사용하는 것입니다. 향후 기사에서는 최소한의 JS 비용으로 이 요구 사항을 충족하는 것을 고려할 것이지만 이는 이 기사의 범위에 포함되지 않습니다.

HTML 테이블 태그 및 관련 줄바꿈 문제에 대한 더 자세한 분석을 보려면 PHP 중국어 웹사이트를 주목하세요!