HTML로 제품 카탈로그를 만드는 방법

테이블은 HTML로 온라인 카탈로그를 구축하는 가장 간단한 방법을 제공합니다. 3열 테이블은 제품 이미지, 설명 및 배송/주문 정보를 위한 공간을 제공합니다. 표에 정보를 삽입하면 텍스트를 정렬하는 데 필요한 시간이 줄어듭니다. 또한 표를 사용하면 페이지의 정보를 둘러싼 공백을 제어하여 웹 사이트의 모양과 선명도를 높일 수 있습니다.

1 단계

개구부를 사용하여 1픽셀 테두리가 있는 표 정의

꼬리표:

오늘의 비디오

2 단계

다음 코드를 사용하여 셀의 첫 번째 행과 해당 내용을 삽입하십시오.

3단계

다음 코드를 사용하여 셀의 두 번째 행과 해당 내용을 삽입하십시오.

4단계

종료 태그가 있는 테이블을 닫습니다.

첫 번째 항목에 대한 설명입니다. 이 항목은 현재 사용 가능합니다.
두 번째 항목에 대한 설명입니다. 이 항목은 이월 주문입니다.

이 간단한 예는 2개의 행과 3개의 열이 있는 테이블을 생성합니다. 첫 번째 열에는 태그를 사용하는 제품의 60x60픽셀 이미지가 표시됩니다. 두 번째 및 세 번째 열에는 제품 설명과 재고 정보가 표시됩니다. 각 행은 태그로 시작하고 끝나고 행의 각 항목은 태그로 시작하고 끝납니다. 제품을 설명하는 데 필요한 만큼의 열이나 행을 삽입하세요.

테이블 정의의 테두리 지정 바로 뒤에 cellpadding 명령을 삽입하여 테이블 테두리와 콘텐츠 사이의 공백을 늘립니다. 예를 들어,

테이블의 각 셀 내용 주위에 10픽셀의 공백을 만듭니다.

참조

  • W3Schools.com: HTML 테이블