HTML 수업

웹의 신체

HTML 수업 웹의 신체

표란?

table, 표는 데이터를 일목요연하게 표현하기 위한 방법이다.

문법(Syntax)

<table>
    <tr>
       <th>제목</th>
    </tr>
    <tr>
       <td>데이터</td>
    </tr>
</table>

설명(Description)

  • 데이터를 구조화할 때 사용됨
  • 레이아웃으로도 활용되나, 불가피한 경우를 제외하면 div와 css등을 이용
  • th는 데이터 그룹의 제목에 해당함 (header cells)
  • td는 th에 속하는 데이터 그룹 (standard cells)

예제(Example)

example1.html - 테이블은 행(tr) 안에 열(td)가 포함되는 형식을 가지고 있다. 아래 예제에서 tr은 3행을 의미하고, 각각의 행은 3개의 td를 가지면서 3개의 열을 표현하고 있다. (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<table border="1">
			<tr>
				<td>이름</td><td>성별</td><td>나이</td>
			</tr>
			<tr>
				<td>최진혁</td><td>남</td><td>6</td>
			</tr>
			<tr>
				<td>최유빈</td><td>여</td><td>2</td>
			</tr>
		</table>
	</body>
</html>

example2.html - <th>는 제목을 의미한다. 아래 예제는 이름, 성별, 나이를 제목으로 표현하는 방법을 보여준다. (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<table border="1">
			<tr>
				<th>이름</th><th>성별</th><th>나이</th>
			</tr>
			<tr>
				<td>최진혁</td><td>남</td><td>6</td>
			</tr>
			<tr>
				<td>최유빈</td><td>여</td><td>2</td>
			</tr>
		</table>
	</body>
</html>

example3.html - 행을 병합하고 싶다면 rowspan 속성을 사용한다. (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<table border="1">
			<tr>
				<th>이름</th><th>성별</th><th>나이</th>
			</tr>
			<tr>
				<td>최진혁</td><td>남</td><td rowspan="2">비공개</td>
			</tr>
			<tr>
				<td>최유빈</td><td>여</td>
			</tr>
		</table>
	</body>
</html>

example4.html - 열을 병합하고 싶다면 colspan을 사용한다. (jsfiddle, github)

<!DOCTYPE html>
<html>
	<body>
		<table border="1">
			<tr>
				<th>이름</th><th>성별</th><th>나이</th>
			</tr>
			<tr>
				<td>최진혁</td><td colspan="2">비공개</td>
			</tr>
			<tr>
				<td>최유빈</td><td>여</td><td>2</td>
			</tr>
		</table>
	</body>
</html>

참고

댓글

댓글 본문
작성자
비밀번호
  1. NAMO
    감사합니다!
  2. JustStudy
    고맙습니다
  3. kbt1004kr
    열심히 하고있는데
    머리용량이 딸리나봐요
    듣고 열심히 따라하는데 돌아서면 기억이 안나요,,, ㅜㅜ
  4. 통조림
    <th> table head; <tr> table row; <td> table data;
  5. 통조림
    이고잉님 목소리에서 꿀떨어진다.. 목소리는 못배웁니까. ㅋㅋ
  6. 이승훈
    다행히 이해했습니다

    어려울 줄 알았는데 "그래봤잡니다"에서 힘을 받았습니다 ㅎㅎ
  7. 김다혜
    감사합니다!!!
  8. 보현
    좋은강의 잘 보고있숩니다 ~~^_^
  9. 김준영
    이고잉씨 사랑합니다
  10. jerry
    좋은강의 감사합니다.
  11. 쿤잇
    <body>태그까지 잘 공부하고 이해했습니다. 감사합니다.

    내일은 <head> 태크 공부할께용 ㅋㅋ
  12. 어부바
    감사합니다.
  13. YellowBall
    잘 들었습니다. 2015/4/27
  14. 김진렬
    계속 잘 듣고 있어요. 역시 강의 재미있네요.
  15. zyavermi
    <head>태그 안에 <meta charset="utf-8"> 태그를 넣으시면 되지 않을까요~?
    인코딩 문제이지 않을까 싶습니다
    대화보기
    • egoing
      tr => table row로 행을 의미 합니다.
      대화보기
      • 와~ 정말.. 감사합니다! 주행중..
      • egoing
        div는 레이아웃에
        table은 정보를 표로 보여줄 때!
        대화보기
        • Frank
          이렇게 정리해서 배우니, 깔끔하게 이해 됩니다. ^^ 고맙습니다.
        • old 막내
          잘보고 갑니다. 그런데 div 강의도 필요 한 것 같아요. 표준 코딩 으로써 div 많이 사용 하지 않을까요?
        • 유형찬
          감사합니다. 명품강의 덕분에 막힘없이 바로바로 이해되네요!
        • 크리스리
          가로로 표를 두개 만드려면 어떻게 해야하나요?

          소스로 자세하게 설명좀 부탁드립니다.
        • 엠제이
          실제적으로 div 태그도 많이 사용되는거 같은데 body 부분에 항목으로 설명되지 않네요. 다소 아쉬운 부분입니다;

          http://knowledgenomad.tistory.com/49
        • 캥캥
          2013.10.10
        • 비트윈
          감사합니다. 오늘도 수업은 이어지네요^^ 점점 빼먹는 횟수가 줄어들고 있습니다 ㅋㅋ
          오늘 동영상 강의는 못보던 편집이 있더군요^^ 퀄리티가 좋아요 ㅎ
        • mimiandchopa
          너무 잘 봤습니다. 감사합니다.
        • 오동진
          초반부에 행과 열을 영어로 언급하셨는데 제가 알기론 행이 로우이고 열이 컬럼으로 압니다. 그런데 강의에서는 거꾸로 언급하신 듯합니다. 옥의 티 같아요. 확인 부탁드립니다. 그리고 좋은 강의에 감사드립니다.
        • AhnJoonSul
          ,,,<thaed>,</thaed>,<table summary=""><tbody></tbody> 등은 html5 이전부터 존재하던 태그 및 속성 이었나요?? 궁금해서 여쭤봅니다..</table>
        • 앙칼진츄잉껌
          가로 방향 → row : 행 / rowspan : 행 2개 이상이 합쳐진 것!세로 방향 ↓ column :열 / colspan : 열 2개 이상이 합쳐진 것!
          예전에 테이블 관련 책 봤을 때 좀 헷갈렸는데, 이곳 설명 영상 보고 신세경을 본 듯했씸!! +_+)b
        • manorgass
          좋은 맨션 감사해요 :D
          대화보기
          • Sksjwk3630
            잘 봤고 많은 도움이 되었습니다.
          • roopy
            tr - table rowth - table headertd - table data의 약자입니다.
          • Egoing Lee
            동의 합니다. 다음 개편 때 반영하도록 하겠습니다. 고맙습니다
            대화보기
            • roopy
              또한 '데이터를 구조화할 때 사용됨' 이라는 말이 다소 어렵게 들립니다. 구조화라는 것이 무엇인지 초보자들은 잘 모를 것 같습니다.그냥 직관적으로 표를 만들 때 사용이라고 하면 무리가 없을 것 같습니다.
            • roopy
              이용자들이 오해의 여지를 줄이기 위해 이 부분을 수정해 주셨으면 합니다.레이아웃으로도 활용되나, 불가피한 경우를 제외하면 div와 css등을 이용
              -> 과거에는 Layout으로도 활용되었으나, 현재는 W3C 표준안 권고에 따라 CSS를 통해 <div> 등을 사용함. 현재는 표를 만드는 데만 사용.</div>
            • Jae Sung So
              10여년 전, 처음 html 공부하다가 항상 표 만드는 지점에서 멈추고는 했었어요.
              이제 그 단계를 넘어섭니다. 고맙습니다.
            • Jmogoon
              잘 봤습니다~
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기