티스토리 뷰

Front-End-Web/html+css

제7강_HTML 필수_Table

jsBae 2022. 10. 8. 00:13 

<table>
  <caption>colgroup 연습</caption>
  <colgroup>
    <col style="width:100px;">
    <col span="2" style="background-color:blue;width:100px;">
    <col style="background-color:yellow;width:100px;">
  </colgroup>
  <tr>
    <td>1</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>2</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

HTML Table

  • HTML 테이블을 사용하면 웹 개발자가 데이터를 행과 열로 정렬할 수 있습니다.
  • HTML에서 테이블을 만들기 위해서는 <table> tag를 사용한다. 이제 <table> tag를 자세히 살펴보자.

HTML 테이블 정의

<table border="1">
    <thead>
        <tr>
            <th>이름</th>
            <th>전화번호</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>배정수</td>
            <td>010-1234-5678</td>
        </tr>
        <tr>
            <td>홍길동</td>
            <td>010-4544-1234>
        </tr>
    </tbody>
</table>

 

테이블 셀

  • 각 테이블 셀은 <td>및 </td>태그로 정의됩니다.
  • 참고: 테이블 셀에는 텍스트, 이미지, 목록, 링크, 기타 테이블 등 모든 종류의 HTML 요소가 포함될 수 있습니다.

테이블 행

  • 각 테이블 행은 태그로 시작 <tr>하고 태그로 끝납니다 </tr>
  • 테이블에 원하는 만큼의 행을 가질 수 있습니다. 각 행의 셀 수가 동일한지 확인하십시오.

테이블 헤더

  • th 테이블 헤더를 나타냅니다.
  • 셀이 표 머리글 셀이 되기를 원할 수 있습니다. 이러한 경우 <th>태그 대신 태그를 사용합니다 <td>
<table border="1">
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

HTML 테이블 태그

TagDescription

<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

HTML 테이블 Colspan 및 Rowspan (행 / 열 합치기)

  • HTML 테이블에는 여러 행 및/또는 열에 걸쳐 있는 셀이 있을 수 있습니다.

HTML 테이블 - Colspan

참고:colspan 속성 값은 확장할 열 수를 나타냅니다.

<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>tom</td>
    <td>57</td>
  </tr>
</table>

HTML 테이블 - 행 범위rowspan

  • 여러 행에 걸쳐 셀을 만들려면 다음 rowspan속성 을 사용하십시오.
  • 참고: 속성 값은 rowspan확장할 행 수를 나타냅니다.
<table>
  <tr>
    <th>Name</th>
    <td>Jill</td>
  </tr>
  <tr>
    <th rowspan="2">Phone</th>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
</tr>
</table>

HTML Table Width & height

<table style="width:100%">
  <tr>
    <th style="width:70%">Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td height="100px">Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

colgroup 연습

  • 테이블의 첫 번째 두 열에 스타일을 지정하려면 <colgroup> 및 <col> 요소를 사용합니다.
  • 요소 는 <colgroup>열 사양의 컨테이너로 사용해야 합니다.
  • 각 그룹은 <col>요소로 지정됩니다.
  • 속성 은 span스타일을 가져오는 열의 수를 지정합니다.
  • style속성은 열에 제공할 스타일을 지정합니다 .
  • 참고: colgroups에 대한 법적 CSS 속성 은 매우 제한적으로 선택되어 있습니다 .
    • width속성
    • visibility속성 :visibility: collapse속성 을 사용하여 열을 숨길 수 있습니다 .
    • background속성
    • border속성
<table>
  <caption>colgroup 연습</caption>
  <colgroup>
    <col style="width:100px;">
    <col span="2" style="background-color:blue;width:100px;">
    <col style="background-color:yellow;width:100px;">
  </colgroup>
  <tr>
    <td>1</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>2</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

연습

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>테이블 복습</title>
	<style type="text/css">
		table {border:1px solid red;border-collapse: collapse;}
		tr {border:1px solid blue}
		td {border:1px solid blue}
	</style>
</head>
<body>
<table>
<caption>기본정보</caption>
  <colgroup>
    <col style="width:100px;">
    <col style="width:300px;">
    <col style="width:100px;">
    <col style="width:300px;">
  </colgroup>
  <tr>
    <th>이름</th>
    <td></td>
    <th>연락처</th>
    <td></td>
  </tr>
  <tr>
    <th>주소</th>
    <td colspan="3"></td>
  </tr>
  <tr>
    <th rowspan="2">자기소개</th>
    <td colspan="3">취미:</td>
  </tr>
    <tr>
    <td colspan="3">특기:</td>
  </tr>
</table>
</body>
</html>

연습 : 열차 시간표를 만들어 보자

728x90
반응형
저작자표시 비영리 동일조건 (새창열림)
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
반응형