Table과 div의 도입과 사용법에 대한 간략한 분석

웹 프런트엔드 1

양식의 구성 요소:

제목 머리글 본문 바닥글

테이블은 테이블을 정의합니다.

 <table border="1" cellpacing="0" cellpadding="0" align="center">
</table>

캡션은 테이블의 제목을 정의합니다.

 <caption>웹 앞부분/캡션>끝 1<

Thead는 헤더 부분을 정의합니다.

 <머리>
				<tr>
					<th>학생번호</th>
					<th>이름</th>
					<th>성별</th>
					<th>나이</th>
				</tr>
			</thead>

Tbody는 테이블의 본문을 정의합니다.

 <본체>
				<tr>
					<td>01</td>
					<td>장산</td>
					<td>남성</td>
					<td>20</td>
				</tr>
				<tr>
					<td>02</td>
					<td>이영</td>
					<td>여성</td>
					<td>21</td>
				</tr>
				<tfoot>
					<tr>
						<td colspan="3">총 인원:</td>
						<td>60</td>
					</tr>
				</tfoot>
			</tbody>

Tfoot은 일반적으로 요약 정보를 표시하기 위해 테이블의 바닥글을 정의합니다.

 <tfoot>
					<tr>
						<td colspan="3">총 인원:</td>
						<td>60</td>
					</tr>
				</tfoot>

Tr은 라인을 정의합니다

 <tr>
					<th>학생번호</th>
					<th>이름</th>
					<th>성별</th>
					<th>나이</th>
				</tr>

Th td는 일반적으로 테이블 헤더에 사용되는 데이터 항목(셀)을 정의하며 굵은 스타일을 갖습니다.

Td는 일반적으로 굵은 스타일 없이 주요 부분에 사용됩니다.

 <tr>
					<td>01</td>
					<td>장산</td>
					<td>남성</td>
					<td>20</td>
				</tr>

Td rowspan 및 colspan은 각각 셀이 걸쳐 있는 행과 열의 수를 정의합니다.

 <td colspan="3">총 인원:</td>

Cellspacing은 테이블의 간격을 정의합니다.

Cellpadding은 테이블의 여백을 정의합니다.

 <table border="1" cellpacing="0" cellpadding="10">

Div는 부서를 정의합니다.

 <div 스타일="너비: 200px;높이: 200px;배경색:하늘색";>

기능: 새 줄에 블록 수준 레이블 표시

블록 수준 태그와 인라인 태그의 차이점:

블록 수준 태그는 전체 행을 차지합니다. 인라인 태그는 왼쪽에서 오른쪽 순서로 정렬됩니다.

블록 수준 태그: h1-h6 p ul ol li div table dl form

인라인 라벨: BR 라벨을 확장합니다. I em

블록 수준 요소의 특성: 표시:블록

각 블록은 새 줄에서 시작하고, 후속 요소는 요소의 너비, 높이, 줄 높이, 내부 및 외부 여백을 모두 설정 가능합니다. 높이를 설정하지 않는 한 상위 컨테이너의 100%

인라인 요소의 특징: 디스플레이: 인라인

요소의 너비, 높이, 줄 높이, 내부 및 외부 여백은 모두 다른 요소와 같은 줄에 있습니다. 요소의 너비는 포함된 텍스트 또는 이미지의 너비이며 변경할 수 없습니다. .

인라인 블록 요소의 특성: 표시: inline-block

및 기타 요소는 모두 같은 줄에 있습니다. 너비, 높이, 줄 높이, 내부 및 외부 여백을 모두 설정할 수 있습니다.

요약

이것으로 Table 및 div의 간략한 소개 및 사용법에 대한 기사를 마칩니다. Table 및 div의 소개 및 사용법에 대한 자세한 내용을 보려면 downcodes.com에서 이전 기사를 검색하거나 다음 관련 기사를 계속 탐색하시기 바랍니다. 앞으로 더 많이 com!