요소- 표 콘텐츠& 양식

<table>, <tr>, <th>, <td>

데이터 표(<table>)의 행(줄 / <tr>)과 열(칸, 셀(Cell) / <th>, <td>)을 생성.

1. 먼저 table로 표 영역 표시

2. 줄(행) 먼저 <tr>

3. 칸(열) 설정 <th>나 <td>

 

<th>

‘머리글 칸’을 지정

abbr	열에 대한 간단한 설명

scope

자신이 누구의 ‘머리글 칸’인지 명시

col: 자신의 열 colgroup: 모든 열 row: 자신의 행 rowgroup: 모든 행 auto

auto

colspan: 옆으로 병합

rowspan: 밑으로 병합

 

<td>

‘일반 칸’을 지정

 

<caption>

표의 제목을 설정.

• 열리는 TABLE 태그 바로 다음에 작성해야 함.
• <table> 당 하나의 <caption>만 사용 가능

<colgroup><col>

표의 열들을 공통적으로 정의하는 컬럼(<col>)과 그의 집합(<colgroup>).(Column, Column Group)

 

<thead>, <tbody>, <tfoot>

표의 머리글(<thead>), 본문(<tbody>), 바닥글(<tfoot>)을 지정.

• 기본적으로 테이블의 레이아웃에 영향을 주지 않음.

<form>

웹 서버에 정보를 제출하기 위한 양식 범위를 정의.

• <form>이 다른 <form>을 자식 요소로 포함할 수 없음.

<label>

• for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함.(for 와 id값 match)
• 라벨 가능 요소: <button>, <input>, <progress>, <select>, <textarea>

<input type="checkbox" id="user-agreement" />
<label for="user-agreement">동의하십니까?</label>

 

<fieldset><legend>

같은 목적의 양식을 그룹화(<fieldset>)하여 제목(<legend>)을 지정.

 

 

list 값과 datalist id 값 서로 매칭시켜야

<input type="text" list="fruits">
<datalist id="fruits">

 

출처. heropy.blog/