테이블 셀의 목적
Table-Cell은 자신과 마찬가지로 여러 다른 셀로 구성된 테이블 내의 개별 항목입니다. 테이블 셀의 주요 목적은 데이터를 더 쉽게 이해하고 이해할 수 있도록 순서대로 기록하는 것입니다. 항목이 포함된 테이블 내의 특정 위치를 나타냅니다.
테이블 셀의 유형
HTML의 테이블에는 주로 두 가지 유형의 셀이 있습니다. 이것들은 ' 헤더 셀 ' 그리고 ' 데이터 셀 '. 차이점과 유사점에 대한 자세한 내용은 아래에 나와 있습니다.
헤더 셀
헤더 셀은 ' <일> ” HTML Tailwind CSS의 태그. 이들은 테이블의 열 제목을 구성합니다. 헤더는 특정 열의 모든 값이 무엇인지 정의합니다. 헤더의 예로는 이름, 이메일 주소, 연락처, 주민등록번호 등이 있습니다.
테이블의 머리글 셀은 열의 맨 위에 있고 아래 항목은 데이터 셀이 됩니다. 또한 이러한 셀에는 아래에 나오는 데이터 셀과 구분되는 특정 형식이 있습니다. 헤더 셀은 데이터 셀의 내용에 의미를 추가하기 위해 더 큰 글꼴 크기와 굵은 글자를 갖도록 지정됩니다.
예
아래 코드에서 '
< 테이블 >
< 머리 >
< 트 >
< 일 > 헤더 셀 01 < / 일 >
< / 트 >
< / 머리 >
< / 테이블 >
이 코드 블록에서:
- '
' 태그를 통해 테이블을 생성합니다.
' 태그를 각각 닫아 테이블 셀을 완성합니다.- 이제 '
' 태그를 사용하여 테이블 머리글 셀을 만듭니다. - 그런 다음 셀 항목 ' 헤더 셀 01 ” “
” 태그 내에서 “ ', '' 및 '” 태그를 사용합니다. - 마지막으로 '
- 이제 '
산출
보시다시피 헤더 셀은 기본적으로 굵게 표시됩니다.
데이터 셀
데이터 셀은 ' 데이터 셀에도 특정 서식이 있습니다. 이들은 헤더 셀보다 작은 글꼴 크기를 가지며 요구 사항에 따라 일반 텍스트 또는 숫자를 포함합니다. '이름' 헤더 셀 아래의 데이터 셀은 예를 들어 John, David, Michael 및 James와 같은 관련 개인의 이름을 갖게 됩니다. 예 다음 단계에서는 테이블 데이터 셀을 만드는 코드를 설명합니다. ” HTML Tailwind CSS의 태그. 이 셀에는 테이블 내의 모든 정보가 들어 있습니다. 이들은 헤더 셀 아래에 나열되며 특정 헤더의 모든 항목에 대한 데이터를 포함합니다. 예를 들어 헤더 셀의 제목이 '이름'인 경우 그 아래의 데이터 셀에는 데이터가 기록된 모든 직원의 이름이 포함됩니다.
'를 사용하여 테이블 데이터 셀을 생성하는 코드 ” 태그는 다음과 같습니다.
< 머리 >
< 스타일 >
테이블 {
border-collapse: 축소;
}
td {
국경 : 1px 솔리드 블랙;
패딩: 10px;
}
< / 스타일 >
< / 머리 >
< 몸 >
< 테이블 >
< 트 >
< td >테이블 셀< / td >
< / 트 >
< / 테이블 >