찾다
웹 프론트엔드CSS 튜토리얼DIV와 TABLE의 공존에 대한 간략한 논의

우리는 div와 table이 프론트엔드 디자인에 있어서 필수적인 태그라는 것을 알고 있습니다. 그들의 기능은 대부분 동일하지만, 이번 글에서는 DIV와 TABLE의 공존에 대해 간략하게 이야기하겠습니다.

테이블에 대하여

웹 표준을 사용한다고 해서 테이블의 사용이 배제되는 것은 아니지만, 오히려 CSS 레이아웃에 관한 많은 글에서 "테이블이 잔치"라고 자주 언급되는 이유도 있습니다. 왜 레이아웃에 테이블을 사용하는가?" 이 문장은 모두가 잘못 이해하고 있기 때문일 수 있습니다. "레이아웃에 테이블을 사용하세요"는 "unwise"라는 뜻입니다. 테이블은 궁극적으로 "data"를 표시하는 방법입니다. 때로는 정보가 이 목적으로 사용되는 경우도 있습니다. 그래서 우리는 회사 직원 문의 양식, 제품 및 모델 대응표 등의 표를 사용합니다. 소위 테이블 잔치에 대해서는 실제로 의견이 더 높은 수준으로 올라갔습니다. 즉, 전문 시장 분석 회사처럼 테이블을 유연하게 활용하여 표시할 수 있다면, 고객 데이터, 설문 조사 데이터 등의 정보를 수집할 때 테이블의 장점이 제대로 활용될 수 있다는 것입니다.
그래서, 그 문장에 관해서는. 오랫동안 사용했으니 " 표를 웹페이지 레이아웃 및 레이아웃 페이지 요소로 사용하는 것은 무리입니다. 표는 데이터를 표시하는 데 사용됩니다"라고 바꿔야 합니다.

다른 요소에 대하여

제 경험에 의하면 , 나는 XHTML 표준의 일부 요소를 세 가지 주요 범주로 나눕니다.
첫 번째 범주는 보조 레이아웃이라고 부르는 것입니다. 디자인 요소: 여기서는 p, SPAN 등을 참조합니다. 이러한 요소의 주요 기능은 전체 페이지를 레이아웃하는 것입니다. 이러한 요소들의 다양한 속성을 유연하게 활용하면 페이지 성능을 풍부하고 다채롭게 만들 수 있습니다.
두 번째 카테고리 I 구조화된 요소 또는 정보 요소라고 합니다. 여기서는 TABLE, UL, PRE 및 CODE 유형 요소를 의미합니다. 예를 들어 TABLE은 분명히 테이블 정보를 표시하는 데 사용되고 UL은 열화를 표시하는 데 사용됩니다. 정보용으로 테이블이나 목록이 필요한 경우 이 두 가지 방법으로 표시하는 것이 좋습니다
세 번째 범주는 다음과 같습니다. META 키워드를 키워드로 채우는 것과 같은 일부 기능을 구현하기 위한 A 메타에 링크 A도 있습니다. 그러면 올바른 표준 준수 디자인 아이디어는 다음과 같습니다. p와 같은 레이아웃 요소를 사용하여 디자인 레이아웃을 만듭니다. 페이지의 위치 지정, 컬러 블록, 그림 등. TABLE, UL 등의 요소를 사용하여 페이지에 표시해야 할 내용을 표시합니다. 물론 p는 ID를 사용하여 데이터를 구성하는 역할도 합니다. p의 속성은 p를 사용자가 명명한 데이터 블록으로 쉽게 사용할 수 있습니다. 따라서 WEB 표준을 사용하여 웹 사이트를 만드는 것은 실제로 정보를 합리화하고 통합하는 과정입니다. 테이블을 레이아웃 도구로 사용하지 마십시오.

관련 권장 사항:

DIV 및 CSS를 사용하여 탐색 모음을 만드는 방법

HTML에서 table 태그를 사용하는 방법

DIV 및 TABLE이 CSS의 너비를 초과할 때 자동 줄 바꿈 분석 웹페이지 레이아웃_html/css_WEB -ITnose

위 내용은 DIV와 TABLE의 공존에 대한 간략한 논의의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
CSS에 랜덤 숫자가 있습니까?CSS에 랜덤 숫자가 있습니까?Apr 15, 2025 am 09:37 AM

CSS를 사용하면 웹에서 동적 레이아웃과 인터페이스를 만들 수 있지만 언어로서는 정적입니다. 값이 설정되면 변경할 수 없습니다. 아이디어

단락 중간에 플로트 요소단락 중간에 플로트 요소Apr 15, 2025 am 09:36 AM

이미지 (또는 다른 요소)가 시각적으로 텍스트 단락으로 떠 다니고 싶다고 가정 해 봅시다. 하지만 ... 단락의 한가운데서, 옳지 않다

'는 화려하지만 복잡하지 않은 페이지 로더를 만들게하십시오'는 화려하지만 복잡하지 않은 페이지 로더를 만들게하십시오Apr 15, 2025 am 09:33 AM

요즘 사이트에서 로딩 상태를 보는 것이 일반적입니다. 특히 진보적 인 웹 앱과 반응성 사이트가 증가하고 있기 때문입니다. 그것은 한 가지 방법입니다

크로스 플랫폼 앱 개발의 환경크로스 플랫폼 앱 개발의 환경Apr 15, 2025 am 09:29 AM

나는이 것을 잘 추적하지는 않지만 그것을 얻는다. Android 및 iOS 용 기본 앱을 원한다면 오히려 한 번만 작성하면 좋을 것입니다.

Fusebox 사용은 React 용 Webpack에 대한 번들링 대안으로 사용Fusebox 사용은 React 용 Webpack에 대한 번들링 대안으로 사용Apr 15, 2025 am 09:26 AM

대체 번들러를 웹 팩으로 검색하는 경우 Fusebox를 살펴 보겠습니다. Webpack이 제공하는 것 (코드 분할, 뜨거운 것을 바탕으로합니다

Svelte와 함께 스타일을 쓰는 것에 대해 내가 좋아하는 것Svelte와 함께 스타일을 쓰는 것에 대해 내가 좋아하는 것Apr 15, 2025 am 09:25 AM

최근 Svelte 주변에는 많은 과대 광고가 있었으며 프로젝트는 24,000 개가 넘는 Github 스타를 축적했습니다. 아마도 가장 간단한 JavaScript

주간 플랫폼 뉴스 : CSS 칼럼 스팬 속성, ADA는 웹 사이트, 자동 생성 이미지 설명에 적용됩니다.주간 플랫폼 뉴스 : CSS 칼럼 스팬 속성, ADA는 웹 사이트, 자동 생성 이미지 설명에 적용됩니다.Apr 15, 2025 am 09:23 AM

이번 주에 Roundup : 멀티 컬럼 레이아웃은 광범위한 지원을 받고 ADA는 소매 업체의 경우 더 많은 A11Y를 의미하며 Google은 모든 빈 이미지에 대해 무언가를하고 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구