어떻게 해야 너를 구할 수 있을까, 나의 식탁 (하이유 블로그)_HTML/Xhtml

테이블은 한때 웹 개발에서 중요한 위치인 레이아웃을 차지했습니다. Web2.0에서도 여전히 레이아웃을 볼 수 있습니다. 그러나 기술은 지속적으로 개선되고 있으며 Div CSS 조합 방법은 마침내 구식 레이아웃의 문을 두드리고 새로운 레이아웃의 물결을 시작했습니다. 테이블에 대한 의견이 있든 없든 많은 사람들은 테이블이 부풀어 오른 코드, 의미 없는 태그, 복잡한 작성 방법 등을 비판하기 시작했습니다. 테이블은 원래 레이아웃을 위해 만들어진 것이 아니라 데이터를 표시하기 위해 만들어졌다는 점을 기억하세요. 테이블 레이아웃을 버린다고 해서 테이블 자체를 버리는 것은 아닙니다. 내 테이블, 당신을 구하기 위해 무엇을 할 수 있습니까?

테이블이란 무엇인가요?

테이블은 데이터 전달자인 HTML 테이블이기도 합니다.

다음은 비교적 표준적인 테이블 코드 작성 방법입니다.

코드 복사

코드

;일>월

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

table-layout:fixed 속성을 언급해야 합니다

테이블 레이아웃: 자동(기본값) |

매개변수:

auto: 기본 자동 알고리즘입니다. 레이아웃은 각 셀의 내용을 기반으로 합니다. 각 셀을 읽고 계산할 때까지 테이블이 표시되지 않으므로 속도가 매우 느립니다.
고정: 고정 레이아웃 알고리즘. 이 알고리즘에서 가로 레이아웃은 테이블 너비, 테이블 테두리 너비, 셀 간격, 열 너비만을 기준으로 하며 테이블 내용과는 아무런 관련이 없습니다. 파싱 속도가 빠릅니다.

고정 레이아웃 모델의 작업 단계:
1. 너비 속성 값이 auto가 아닌 모든 열 요소는 너비 값에 따라 열 너비를 설정합니다.
2. 테이블의 첫 번째 행에 있는 이 열의 셀 너비는 셀 너비에 따라 이 열의 너비를 설정합니다. 셀이 여러 열에 걸쳐 있는 경우 너비는 열 전체에 균등하게 나누어집니다.
3. 위의 두 단계 후에도 열 너비가 여전히 자동인 경우 너비가 최대한 동일하도록 크기가 자동으로 결정됩니다. 이때, 테이블의 너비는 테이블의 너비 값과 컬럼 너비의 합(둘 중 큰 쪽)으로 설정됩니다. 테이블 너비가 열 너비의 합보다 큰 경우 그 차이를 열 수로 나누고 결과 너비를 각 열에 더합니다.
이 방법은 모든 열 너비가 테이블의 첫 번째 행에 의해 정의되므로 빠릅니다. 첫 번째 행 이후의 모든 행에 있는 셀의 크기는 첫 번째 행에서 정의한 열 너비에 따라 조정됩니다. 이러한 나중 행의 셀은 열 너비를 변경하지 않습니다. 이는 해당 셀에 지정된 너비 값이 무시됨을 의미합니다.

일반적으로 복잡한 표 HTML을 만들 때 첫 번째 행의 각 열 너비를 어떻게 조정하더라도 열 너비가 여전히 예기치 않게 변경되는 경우가 있습니다(예: 영어 텍스트의 긴 문자열, 중간에 공백이 없으면 이 열의 너비를 제한하여 긴 텍스트가 표를 깨지 않고 강제로 줄바꿈되도록 하고, 결과적으로 어떻게 시도해도 적절한 너비를 조정할 수 없는 경우가 많습니다.) 이때 절실히 table-layout:fixed를 사용하시면 됩니다.

어려운 테이블 문제에 대한 줄 바꿈

테이블을 사용하여 데이터를 표시하는 것은 때때로 골치 아픈 일입니다. 즉, 특히 가장 많이 사용되는 헤더에서 특정 텍스트를 줄 바꿈 없이 표시하는 것입니다. 사실, 여러분이 겪고 있는 골칫거리는 줄 바꿈이 아니지만 그 뒤에 있는 브라우저 호환성으로 인해 줄 바꿈이 훨씬 더 어려워집니다. 여기에서 줄 바꿈 강제 및 줄 바꿈 금지 가이드를 통해 다양한 상황에서 줄 바꿈을 해결하는 방법을 자세히 설명합니다.

일반적으로 테이블에서 줄 바꿈하는 방법은 다음과 같습니다. 먼저 테이블 레이아웃을 설정합니다. 기본적으로 이 속성을 설정한 후에는 테이블에서 td 없이 기본 줄 바꿈 문제를 해결할 수 있습니다. Th 내부의 각 컨텐츠의 양으로 인해 다른 td와 th의 너비를 놓고 경쟁하는 상황이 발생합니다. 이때 여전히 강제 줄 바꿈 문제가 있는 경우 td 내부에 div 레이어를 추가한 다음 두 가지 CSS 메서드 word-wrap:break-word;를 사용하여 문제를 해결하세요. 줄바꿈 문제.

흔하지만 생소한 테이블 태그 몇 가지

머리, 발, 몸

이 세 가지 태그는 xhtml이라는 제품이며 주로 테이블의 행을 그룹화하는 기능을 제공합니다. 테이블을 생성할 때 머리글 행, 데이터가 포함된 일부 행, 하단에 총계 행을 두고 싶을 수도 있습니다. 이 분할을 통해 브라우저는 표 머리글 및 바닥글과 별도로 표 본문 스크롤을 지원할 수 있습니다. 긴 표를 인쇄할 때 표 머리글과 바닥글은 표 데이터가 포함된 각 페이지에 인쇄될 수 있습니다. 개인적으로 저는 그 주요 목적이 매우 긴 테이블의 디스플레이 최적화에 적합하다고 생각합니다.

thead 태그는 HTML 테이블 헤더
테이블의 헤드 헤드를 나타냅니다. 별도의 스타일을 사용하여 테이블 헤더를 정의할 수 있으며, 테이블 헤더를 상단에 인쇄할 수 있습니다. 인쇄할 때 페이지.

thead 태그는 HTML 바닥글을 나타냅니다.
테이블의 바닥글 tfoot은 별도의 스타일을 사용하여 바닥글(각주 또는 테이블 메모)을 정의할 수 있으며, 인쇄 시에는 페이지 나누기 발 하단의 페이지.

tbody 태그는 HTML 테이블 본문을 나타냅니다.
브라우저는 테이블을 표시할 때 일반적으로 테이블을 완전히 다운로드한 다음 전체를 표시합니다. tbody를 사용하여 세그먼트로 표시합니다.

참고: thead, tfoot 및 tbody 요소를 사용하는 경우 해당 요소를 모두 사용해야 합니다. 표시되는 순서는 thead, tfoot, tbody이므로 브라우저는 모든 데이터를 수신하기 전에 머리글과 바닥글을 렌더링할 수 있습니다. 테이블 요소 내에서 이러한 태그를 사용해야 하며, thead에는 내부에 tr 태그가 있어야 합니다. 따라서 테이블을 작성하는 보다 표준적인 방법은 다음 코드입니다.

코드 복사

코드

AUG

18< /td>

;tr>
월일>

<일>월 목록
🎜>

/tbody>
< ;/table>

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

col 및 colgroup

이 두 태그 역시 xhtml의 산물이므로 기능은 강력하지만 호환성은 매우 낮습니다.

col 태그는 테이블에 있는 하나 이상의 열에 대한 속성 값을 정의합니다.

colgroup 태그는 형식 지정을 위해 테이블의 열을 그룹화하는 데 사용됩니다.

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

테이블 사용처

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

위는 공통 테이블 지식 포인트에 대한 리뷰와 일반적으로 사용되는 여러 장소를 분석하고 정리한 것입니다. 이 글을 읽으신 후에는 올바른 자세로 테이블을 보고 사용하실 수 있기를 바랍니다. 이 글을 통해 내 테이블이 조금이나마 절약되길 바랍니다. 감사해요.