표는 과거 웹표준이전인 html4에서 레이아웃의 방법으로 표현하던 예인데, 기본이 테두리가 없어서 T자형 구조에 원하는 대상을 배치할때 주로 사용하였습니다. 현재 html5에서는 레이아웃이 아닌 '일정표'등 일반적인 표사용에 대해서 소개하겠습니다.
HTML Tables를 종합해서 배울 수 있는 w3schools.com
표는 table tr td 3개를 기본으로하여,줄(가로 행,row), 칸(세로 열,column)으로 구분된다. 필요시 td대신에 맨위에 머릿글표현을 위해서 th를 사용하기도 한다. th는 상단외에 좌측에도 표현가능하다.
HTML Tables
HTML Tables HTML tables allow web developers to arrange data into rows and columns. Example Company Contact Country Alfreds Futterkiste Maria Anders Germany Centro comercial Moctezuma Francisco Chang Mexico Ernst Handel Roland Mendel Austria Island Trading
www.w3schools.com
본문인 body에 삽입된 기본 table과 하부 구성요소인 tr, td, th
Head에 들어가는 테이블 관련스타일입니다.
Table 태그관련되어 head문에 삽입되는 CSS스타일은 아래와 같다.
Body에 들어가는 테이블 태그입니다.
배경색상과 글자색상을 체계적이로 구분해서 사용할 수 있는 HTML 컬러픽커(Color Picker)를 활용하면 편리합니다.
HTML Color Picker (w3schools.com)
HTML Color Picker
www.w3schools.com
위 배운내용 전체가 포함된 html 폴더를 업데이트 올려드리면서 공유합니다.
Table의 셀을 병합하는 Colspan & Rowspan
table관련 태그 중 아주 복잡한 HTML Table Colspan & Rowspan는 아래 어디서나 복잡한 여러 셀로 구성된 표의 셀 병합관련된 태그인 Row, Column은 어려운 데, 아래 Online HTML5 Editor를 통해서 태그소스를 구해서 적용할 수 있습니다.
Online HTML5 Editor
HTML5 Editor - Free Online Content Composer
Free online web content composer with HTML source editor and rich text WYSIWYG editor preview. It works without downloading and installing any program.
html5-editor.net
워드프로세에서 표를 추가하고 셀이라는 표 내부의 박스영역들을 편집하는 것은 어려운 일이다. 웹문서에서도 표는 table태그를 사용하는데, table내에 tr로 가로행인 로(row), 세로열인 컬럼(column)를 기본으로 한다.
'UI UX(Web)' 카테고리의 다른 글
| CSS3 background 색상과 이미지의 배경처리(포터블-컬러픽커와 다크네이머) (0) | 2021.10.12 |
|---|---|
| HTML+CSS 중급 - 하이퍼링크 기본과 이미지맵 쉽게 코딩하기 (0) | 2021.10.11 |
| W3C vs Fontawesome (0) | 2021.10.04 |
| HTML+CSS 기초 - 글씨관련 태그들 (0) | 2021.09.30 |
| 반응형웹 플러그인 - 부트스트랩과 제이쿼리 (0) | 2021.05.27 |
