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. 김성곤
    20200713 감사합니다!
  2. 김준석
    완료
  3. 완료
  4. 김예훈
    완료
  5. 굴렁이
    table 태그 :테이블생성
    tr: 행 묶음
    td: 칸 하나씩 생성

    thead로 제목(th)
    tbody로 내용
    tfoot으로 마지막 작성 가능

    rospan="숫자" 세로칸 숫자만큼 병합
    colspan="숫자" 가로칸 숫자만큼 병합
  6. 한강
    테이블 수업 잘 들었습니다~!!!
    200519
  7. 열심히사는사람
    완료
  8. Mongsil
    2020.03.31 완료 감사합니다 :)
  9. 김선경
    2020-03-21 완료
  10. 최강최고
    20/3월13일 완료
  11. 표를 만들 수 있는 <table>태그

    각 항목마다 <td></td>
    같은 행을 원하는 항목끼리 <tr></tr>
    전체 <table></table>태그로 묶어 완성시키기
    but 테두리 X

    속성 - table태그 뒤에 border를 이용해 표 완성 지정값에 따라 테두리 달라짐
  12. Charlie Kwon
    완료
  13. 2020.1.6 수업완료
  14. 2020.01.02
  15. dsadsa
    테이블 어려운거같은데 많이 중요한가요 ? 별로 안 쓰이는거같은데
  16. 제시카
    유익했습니다.
  17. 설명도 잘 해주시고 내용도 잼있어요.잘 보고 가요
  18. 완료
  19. 재로
    <tr colspan ="3">
    <tr rowspan ="2">
  20. FIRE
    20190803 완료
  21. 김세종
    2019-07-11 수강완료
  22. creed
    190630 감사합니다
  23. 제2지대
    완료
  24. 띤뚜
    감사합니다!
  25. 김주엽
    공부완료
  26. 코코코
    완료
  27. steal
    20190124 완료
  28. 한승민
    190115 완료
  29. 릴라야
    190111_완료
  30. 미완성
    20190107완료
  31. 김진욱
    완료!
  32. Gihoon Pomme Ryu
    완료. 고맙습니다.
  33. shcd
    clear
  34. 김민영
    완료
  35. 신비
    쉬운설명 감사드립니다^^
  36. yuchacha
    yeah
  37. clear
  38. 내가 알려드림
    th는 table theme의 약자입니다
    즉, 테이블 제목의 약자로 굵게표시되는 기능입니다~
    대화보기
    • 홍승민
      감사합니당~!
    • ㅅㅈㅎ
      감사합니다! 정말 도움 많이 돼요!
    • 스페이스몽키
      감사합니당~!
    • 호잇
      궁금한게 있는데 표 아래에 글을 쓰고싶은데
      글이 표 위로 올라가네요ㅠㅠ 어떻게 하나요
    • nomad코딩
      저두요 ㅠㅠ
      대화보기
      • JN87
        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년이 걸렸어요 ㅜㅜ
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기