Skip to main content

2x2 테이블 만들기 - HTML 테이블 사용시 알아두기

공간활용도 최고!! 비밀 책장 만들기 !! | 마인크래프트 - 생존기 44화 (4 월 2025)

공간활용도 최고!! 비밀 책장 만들기 !! | 마인크래프트 - 생존기 44화 (4 월 2025)
Anonim

HTML 테이블은 행과 열의 기본 사항을 이해하고 테이블을 사용하는 것이 좋을 때와 사용하지 않아야하는 경우를 이해하면 쉽게 생성 할 수 있습니다.

테이블과 웹 디자인에 대한 간략한 역사

수년 전에 CSS와 웹 표준을 수용하기 전에 웹 디자이너는 HTML을 사용했습니다.

요소를 사용하여 사이트의 페이지 레이아웃을 만듭니다. 웹 사이트 디자인은 퍼즐처럼 작은 조각으로 "슬라이스"된 다음 HTML 표와 결합되어 브라우저에서 의도 한대로 렌더링됩니다. 이것은 CSS가 웹 페이지의 비주얼과 레이아웃을 위해 받아 들여지는 방법이되어 감에 따라, 오늘날 많은 웹 사이트에서 사용할 수없는 HTML 마크 업을 많이 만들어내는 매우 복잡한 과정이었습니다. 피하고 많은 웹 디자이너들은 실수로 "테이블이 나빴다"고 믿었다. 그건 사실이 아니야. 레이아웃 테이블은 좋지 않지만 웹 디자인 및 HTML, 즉 캘린더 또는 기차 일정과 같은 테이블 형식의 데이터를 표시 할 수있는 위치가 여전히 있습니다. 그 내용의 경우 표를 사용하는 것은 여전히 ​​받아 들일 수있는 좋은 접근 방법입니다.

그러면 테이블을 어떻게 레이아웃합니까? 간단히 2x2 테이블을 만들어 보겠습니다. 2 열 (수직 블록)과 2 행 (수평 블록)을 갖습니다. 2x2 테이블을 작성한 후에는 추가 행 또는 열을 추가하여 원하는 모든 크기 테이블을 작성할 수 있습니다.

방법은 다음과 같습니다.

  1. 먼저 테이블을 엽니 다.

  • tr 태그를 사용하여 첫 번째 행 열기

  • td 태그가있는 첫 번째 열을 엽니 다.

  • 셀 내용 쓰기

  • 첫 번째 셀을 닫고 두 번째 셀을 엽니 다.

  • 두 번째 셀의 내용을 작성하십시오.

  • 두 번째 셀을 닫고 행을 닫습니다.

  • 두 번째 행을 첫 번째 행으로 정확하게 쓰십시오

  • 그런 다음 테이블을 닫으십시오.

  • 그게 다야!

  • 또한 테이블 헤더를 테이블에 추가하도록 선택할 수도 있습니다.

    요소. 이러한 테이블 헤더는 다음과 같이 첫 번째 테이블 행에있는 "테이블 데이터"조각을 대체합니다.

    이름역할
    제레미디자이너
    제니퍼개발자

    이 페이지를 브라우저에서 렌더링하면 표 머리글이있는 첫 번째 행이 기본적으로 굵은 텍스트로 표시되고 표 셀이 표시되는 표 셀의 가운데에 배치됩니다.

    그렇다면 HTML로 테이블을 사용할 수 있습니까?

    네, 레이아웃 용도로 사용하지 않는 한 테이블을 사용해도됩니다. 표 정보를 표시해야하는 경우 표가이를 수행하는 f}입니다. 사실 합법적 인 HTML 요소를 피하기 위해 순도를 잘못 판단해서 테이블을 사용하지 않는 것은이 날과 그 시대의 레이아웃 목적으로 사용하는 것보다 후진 적입니다.

    글 작성자 : Jennifer Kyrin 제레미 지라드 편집.