(HTML) Table Tag

- Tabe 태그 : 표를 출력하는 부모 태그

<table style="border-collapse:collapse; text-align: center;"></table>

※ border(경계선)은 겹치면 합치고, 그 안의 텍스트들은 가운데 정렬 하겠다는 style 속성 설정

thead 태그

table head, 테이블의 제일 위 목록에 관한 태그, Table 태그 안에서 사용할 수 있는 자식 태그

tr 태그

table row, 행, 가로 줄을 뜻 한다.

th 태그

table head의 하나의 cell.

<thead>
	<tr>
		<th style="border: 1px solid black">번호</th>
		<th style="border: 1px solid black">이름</th>
		<th style="border: 1px solid black">나이</th>
		<th style="border: 1px solid black">성별</th>
		<th style="border: 1px solid black">국적</th>
		<th style="border: 1px solid black">출석</th>
		<th style="border: 1px solid black">마스크</th>
	</tr>
</thead>

tbody 태그

table body, 테이블의 목록에 관한 태그, Table 태그 안에서 사용할 수 있는 자식 태그

td 태그

table body, 테이블의 body의 하나 cell

<tbody>
	<tr>
		<td>
		</td>
	</tr>
</tbody>

tfoot 태그

table foot, 테이블의 목록에 제일 아래 끝 영역을 표시하는 태그, Table 태그 안에서 사용할 수 있는 자식 태그

<tfoot>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</tfoot>

※ table 행, 열 합치기(병합)

rowspan : 세로 줄을 수만큼 합친다. 혹은 수만큼 차지한다
colspan : 가로 줄을 수만큼 합친다. 혹은 수만큼 차지한다

ex) colspane = "3" , rowspan="2"

※ col, colgroup : column의 줄임말, 열, 세로줄

col은 테이블 열의 스타일을 공통적으로 정의한다. 다만, 하나의 열 씩
colmn의 스타일을 한번에 여러 열을 적용하기 위해서 사용하는 명령어가 colgroup

<col style="width: 50px"  />
<col style="width: 150px" />
<col style="width: 50px" />
<col style="width: 50px" />
<colgroup span="2" style="width: 80px"></colgroup>

※ body 쪽 전체코드

 <body>
    <table style="border-collapse: collapse">
      <col style="width: 50px" />
      <col style="width: 150px" />
      <col style="width: 50px" />
      <col style="width: 50px" />
      <colgroup span="2" style="width: 80px"></colgroup>
      <thead>
        <tr>
          <th style="border: 1px solid black">번호</th>
          <th style="border: 1px solid black">이름</th>
          <th style="border: 1px solid black">나이</th>
          <th style="border: 1px solid black">성별</th>
          <th style="border: 1px solid black">국적</th>
          <th style="border: 1px solid black">출석</th>
          <th style="border: 1px solid black">마스크</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th style="border: 1px solid black">1</th>
          <th style="border: 1px solid black">홍길동</th>
          <th style="border: 1px solid black">18</th>
          <th style="border: 1px solid black">남</th>
          <th style="border: 1px solid black">대한민국</th>
          <th style="border: 1px solid black">O</th>
          <th style="border: 1px solid black">O</th>
        </tr>
      </tbody>
    </table>
  </body>

'HTML&CSS' 카테고리의 다른 글

(HTML) Input 태그 (0)	2023.01.09
(HTML) form Tag (0)	2023.01.09
(HTML) Tags(2) (0)	2023.01.09
(HTML) Tags (0)	2023.01.09
HTML이란?(2) (0)	2023.01.09

(HTML) Table Tag

'HTML&CSS' 카테고리의 다른 글

관련글

티스토리툴바