HTML 수업

표 - table

예제

<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
    <tr>
        <td>이름</td>     <td>성별</td>   <td>주소</td>
    </tr>
    <tr>
        <td>최진혁</td>  <td>남</td>      <td >청주</td>
    </tr>
    <tr>
        <td>최유빈</td>  <td>여</td>      <td>청주</td>
    </tr>
</table>
</body>
</html>

예제

<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
    <thead>
        <tr>
            <th>이름</th>     <th>성별</th>   <th>주소</th> <th>회비</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>최진혁</td>  <td>남</td>      <td >청주</td> <td>1000</td>
        </tr>
        <tr>
            <td>최유빈</td>  <td>여</td>      <td>청주</td> <td>500</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>합계</td>  <td></td>      <td></td> <td>1500</td>
        </tr>
    </tfoot>
</table>
</body>
</html>

예제

<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
    <thead>
        <tr>
            <th>이름</th>     <th>성별</th>   <th>주소</th> <th>회비</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>최진혁</td>  <td>남</td>      <td rowspan="2">청주</td> <td>1000</td>
        </tr>
        <tr>
            <td>최유빈</td>  <td>여</td>      <td>500</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">합계</td>      <td>1500</td>
        </tr>
    </tfoot>

</table>
</body>
</html>

등장시기

html2

댓글

댓글 본문
작성자
비밀번호
  1. 호잇
    궁금한게 있는데 표 아래에 글을 쓰고싶은데
    글이 표 위로 올라가네요ㅠㅠ 어떻게 하나요
  2. nomad코딩
    저두요 ㅠㅠ
    대화보기
    • 171231 감사합니다!
      +한 가지 질문을 드리고 싶습니다.
      내용대로 표를 만들어서 브라우저(크롬)에서 열어봤더니 강의와는 다르게 제 화면에서는
      <td>태그 안의 내용이 한글기준 2글자에서 줄바꿈하여 나타납니다. 예를들어

      최진


      이런식으로요.
      별도로 width값을 주거나 style을 입력한 것도 아니며 브라우저는 최대창인데도 이런 현상이 나오네요.
      이부분은 왜 그렇게 된건지 궁금합니다.ㅠ
    • 바실로마첸코
      어렵지도 않고 이해도 잘됩니다 선생님 허허
    • 푸른하늘
      6
    • Migyeong Kang
      설명이 쉽네요~ 감사합니다~
    • 바람과 나무
      감사합니다.
    • 김지원
      테이블의 행렬 모양에 영향을 미칩니다.
      정확히 말하자면 같은 태그 안에 있는 열과 행을 병합할 수 있는것이 바로 rowspan과 colspan입니다.
      그렇기 때문에 사용하시기 위해서는 tfoot태그를 제거하고 tbody로 모두 묶어주면 원하시는 결과를 얻을 수 있을 겁니다.
      대화보기
      • 이성준
        태그 자체의 가독성을 높이기 위해 헤드 부분은 <thead>, 주내용 부분은 <tbody>, 그 외의 내용 부분은 <tfoot>으로 감싸준다. 이것은 위치를 결정하기도 한다. ->
        <table border="1">
        <thead>
        <tr>
        <td>1X1</td>
        <td>1X2</td>
        <td>1X3</td>
        </tr>
        </thead>
        <tbody>
        <tr>
        <td rowspan="2">2X1</td>
        <td>2X2</td>
        <td rowspan="2">2X3</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
        <td>3X1</td>
        </tr>
        </tfoot>
        </table>

        여기서 <thead>, <tbody>, <tfoot> 태그를 지워야 제가 원하는 모양이 나오는데, 해당 태그들의 영향이 가독성 만이 아니라 테이블 행열 모양까지 미치는 거 아닌가요? 이거 알아내는 거 2년이 걸렸어요 ㅜㅜ
      • 오빠는다르다
        감사합니다~!!
      • gridshim
        170829

        table border=""

        th,tr,td

        thead, tbody, tfoot

        td rowspan
        td colspan
      • gridshim
        170829
      • protester
        예전 테이블코딩이 생각이 나네요~!^^
      • Ji-Hoon Lee
        170804 완료!
      • 용녀
        행과 열을 반대로 말하셨어요.
      • zl존인수123
        굳잡입니다
        대화보기
        • 당당비
          감사해요
        • php가 첫취업?
          이거 조금만 잘못되도 모양 잘못나오는...
        • 공삼이육
          ㅋㅋㅋ 2배속도 재밌고 테이블도 재밌어용~
        • 14번째
          4.27.
        • 최은지
          collgroup이나 caption이나 웹표준 같은 그런거는 따로 설명이 없나요??
          예전에 배웠는데 잘 기억이 안나서 ㅠㅠ
        • 푸른하늘
          감사합니다
          170324
        • 무중력고양이
          170315 완료
        • 노노재노재노창
          갑자기 2배속해서 깜짝놀랐어요ㅋㅋㅋ 제 컴퓨터가 잘못된줄 알았네ㅋㅋㅋㅋㅋ
          수업 잘들었습니다
        • forever6690
          1.18일 다시시작 완료~
        • 임지호
          table - 표를 입력하는 태그.
          전체 표를 <table>로 감싸고 제목에 해당되는 부분은 <th>, 내용에 해당되는 부분은 <td>로 항목 하나하나 감싸준다.
          표 테두리 두께를 지정할 때는 border 속성을 이용한다.
          태그 자체의 가독성을 높이기 위해 헤드 부분은 <thead>, 주내용 부분은 <tbody>, 그 외의 내용 부분은 <tfoot>으로 감싸준다. 이것은 위치를 결정하기도 한다.
          표를 병합할 때는 병합하고자 하는 첫 번째 td에 속성 rowspan, colspan을 넣어준다.
          rowspan은 수직병합(행과 행을 병합), colspan은 수평병합(컬럼과 컬럼을 병합)이다.
          <table>은 표를 삽입하기 위한 태그이지만 옛날에는 웹페이지 레이아웃을 짤 때에도 쓰였다.
        • 카구
          th는 table header를 의미하는거 아니였나요
          대화보기
          • D.JA
            DONE!
          • bak.ha
            표1만 수강
          • 심외무별법
            감사합니다.
          • html어려워
            오타네요 ㅎ 두번째랑 세번째에서 td를 th로 바꿔쓰는 경우가 계셨네여
          • hongseok-kim
            0914 수강완료
          • rowspan 이 2가아닌 3이되어야 2칸이 병합되는데요... 왜일까요???
          • 김종엽
            2016.08.12 완료!
          • 장미언니
            완료 감사~
          • Ian Si Mong Seong
            수강완료
            2016.08.01
          • 녹색이
            쉬운 설명 덕분에 1일만에 다 봤습니다
            친절한 강좌 감사합니다^^
          • JustStudy
            2016.07.19 화
            고맙습니다 3.
          • 곰돌이 푸
            첫번째 동영상에서 갑자기 7분 50초 쯤에 2배속으로 말하셔서 놀랐습니다.
          • PhypheNP
            감사합니다!! 2배속 놀랐네요 ;ㅎ
          • 이승민
            정보 감사합니다 ㅎ center 태그 쓸 때 td태그 안으로 넣어야 작동되네요.
            대화보기
            • sy.baek
              감사합니다!
              대화보기
              • 천하제일탈세왕
                <center> </center>
                를 쓰시면 됩니다.
                대화보기
                • sy.baek
                  표 안에 있는 데이터가 표칸의 중간에 오도록 할려면 어떻해야 하나요??
                • openarms
                  Table 태그가 조금 헷갈렸는데 깔끔하게 이해가 됐네요.
                • 좋은 강의 잘 들었습니다.
                  감사합니다.
                • 검사무운
                  잘 봤습니다.
                • SK Kim
                  도장 쾅!
                  강의 도중 2곳이 갑자기 빨라져서 순간 당황했다는..
                • HTML초보
                  설명,전략,방식 전부 다 진짜 쩌씨네여.....
                  지금까지 수많은 인터넷강의를 들었지만 이렇게 완벽한 강의는 처음입니다.
                  대단하세요
                • 감사합니다.
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기