HTML 표는 행과 열의 기본 사항을 이해하면 쉽게 만들 수 있습니다. 또한 표를 사용할 때와 이해하지 못할 때를 이해하면 HTML 표를 쉽게 만들 수 있습니다.
테이블과 웹 디자인에 대한 간략한 역사
수년 전에 CSS 와 웹 표준을 수용하기 전에 웹 디자이너는 HTML
요소를 사용하여 사이트의 페이지 레이아웃을 만들었습니다. 웹 사이트 디자인은 퍼즐처럼 작은 조각으로 "슬라이스"된 다음 HTML 표와 결합되어 브라우저에서 의도 한대로 렌더링됩니다. 그것은 매우 복잡한 프로세스 였고 많은 HTML 마크 업을 만들었고 오늘날 웹 사이트가 살아있는 다중 스크린 세계 에서 결코 쓸모 없을 것 입니다 . CSS가 웹 페이지의 비주얼 및 레이아웃을 위해 허용 된 방법이됨에 따라이 테이블을 사용하는 것은 잊혀졌고 많은 웹 디자이너는 실수로 "테이블이 좋지 않습니다"라고 믿었습니다. 그건 사실이 아니야. 레이아웃 테이블은 좋지 않지만 웹 디자인 및 HTML, 즉 열차 일정과 같은 테이블 형식의 데이터를 표시 할 수있는 위치를 여전히 가지고 있습니다. 그 내용의 경우 표를 사용하는 것은 여전히 받아 들일 수있는 좋은 접근 방법입니다.
그러면 테이블을 어떻게 레이아웃합니까? 간단히 2x2 테이블을 만들어 보겠습니다. 2 열 (수직 블록)과 2 행 (수평 블록)을 갖습니다. 2x2 테이블을 작성한 후에는 추가 행 또는 열을 추가하여 원하는 모든 크기 테이블을 작성할 수 있습니다.
난이도 : 평균
소요 시간 : 10 분
방법은 다음과 같습니다.
- 먼저 테이블
- tr 태그
를 사용하여 첫 번째 행을 엽니 다. - td 태그가있는 첫 번째 열 열기
- 셀 내용 쓰기
- 첫 번째 셀을 닫고 두 번째 셀을 엽니 다.
- 두 번째 셀의 내용을 작성하십시오.
- 두 번째 셀을 닫고 행을 닫습니다.
- 두 번째 행을 첫 번째
와 똑같이 작성하십시오. - 그런 다음 테이블을 닫으십시오.
| 요소를 사용하여 테이블 헤더를 테이블에 추가하도록 선택할 수도 있습니다. 이 테이블 헤더는 다음과 같이 첫 번째 테이블 행에있는 "테이블 데이터"조각을 대체합니다.
Jeremy | 디자이너 td> Jennifer | 개발자 | 이 페이지를 브라우저에서 렌더링하면 표 머리글이있는 첫 번째 행이 기본적으로 굵은 텍스트로 표시되고 표 셀이 표시되는 표 셀의 가운데에 배치됩니다.
그렇다면 HTML로 테이블을 사용할 수 있습니까? 예 - 레이아웃 용도로 사용하지 않는 한 그렇습니다. 표 정보를 표시해야하는 경우 표가이를 수행하는 f}입니다. 사실이 합법적 인 HTML 요소를 피하기 위해 잘못된 순도 때문에 테이블을 피하는 것은이 요일과 시간대의 레이아웃을 위해 HTML 요소를 사용하는 것과 반대입니다.
글 작성자 : Jennifer Kyrin 제레미 지라드 편집 : 8/11/16
| |