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. 코딩혁명
    2021.11.12수강완료.감사합니다
  2. 드림보이
    2021.11.04. 표 -table 태그 파트 수강완료
  3. 황금아가리
    211002
  4. 김큼이
    20210914완료
  5. 20210914 완료
  6. overmatch
    20210821 완료
  7. 란찬
    =)
  8. 두드
    2021.07.20 완료
  9. 2021.07.16 완
  10. 옥이야
    백팩
  11. 오뉴오뉴
    2021.6.28
  12. 감자먹는넘
    감자
  13. barozaqu
    20210513.
  14. GelandeWagen
    210511 ok
  15. 갑자기 두배되서 깜짝놀랐자농
  16. 감사히 잘봣습니다
  17. <table>
    <tr>
    <td>이름</td><td>좋아하는 음식</td> <td>좋아하는색깔</td>
    </tr>
    <tr>
    <td>yogg</td> <td>밀크티</td> <td>파란색</td>
    </tr>
    </table>
  18. 21.02.26 완료
  19. 알고 있던거긴한데 설명으로 들으니까 더 머리에 쏙쏙 들어오고 좋네요
  20. 전예진
    20.02.15 완료
  21. loveahav
    완료!
  22. 2021-02-06
  23. Minint
    2021.02.04
  24. 이현수
    2021.02.02(화)
  25. 임태경
    완료했어요 감사해요
  26. 이오
    2021.1.31 감사합니다^^
  27. 비둘기의 깃털
    2021.01.30
  28. 스마일가이
    2021.01.24.완료 감사합니다
  29. 아루미
    1 22 금 완료 감사합니다!!!
  30. 엘리심
    1/20 완료
  31. 주니어개발자
    복잡한 예약 화면 등에서 특정 이벤트나 조건마다 옵션 메뉴 항목의
    rowspan, colspan 수치와 다른 속성들을 동적으로 변경해서 table이 짜부되지 않도록 해야할때 요령이 없어서 힘들었던 기억이 나네요. 회사가 작다보니 백단 개발자임에도 프론트, 디자인 가릴 거 없이 유지보수를 전담해야하는 슈퍼파워 잡부가 되야 할때... 일단 코딱지만한 프론트엔드 밑천과 지식으로 급한 불은 끄더라도 뭔가 알고 접근했다면 간단한 문제에 오랜 시간을 잡아먹지도, 이렇게 멍텅구리처럼 비효율적으로 자질구레하게 자바스크립트 코드를 만들진 않았을텐데 속상하던 기억이 많이 나네요 ㅎㅎ
  32. 201209
  33. 티치
    2020.12.07
  34. 김지원
    20.11.19
    -li태그와 비슷한데 테이블 상에서 항목을 묶어줄때는 td태그를 사용함 (table data의 약자)
    -행을 나누기 위해 각각의 행들에 tr태그로 묶기 (table row의 약자
    -마지막으로 테이블을 만들기 위해서는 테이블전체의 내용에 table태그를 걸어줘야함
    -그냥 table태그는 경계선?이안생김 따라서 table border태그를 걸어줘야함
    예) <table border="2">숫자에 따라 굵기가 달라짐
    이것 역시 그냥 html으로만 테이블을 만들경우 이쁘지 않음 따라서 css를 통해 만드는 것이 좋음
    -thead 와 tbody를 사용하여 제목과 내용의 정보를 알려주기!
    -이름,성별,주소의 경우 thead이기 때문에 td가 아닌 th(table head)를 주면 글씨가 진해지는것을 볼 수 있음
    -rtfoot태그는 제일밑에 데이터를 나타내줌
    -thead와 tfoot은 어디에 입력하는 전자는 제일 위에 후자는 제일 아래에 나타남
    -행을 병합하기 위해서는 <td rowspan="2">청주 라고 하면됨 이때 병합되는 부분에 td는 지워줘야함 숫자2는 행 2개를 병합한다는 뜻.
    -<td colspan="2">합계 이것은 열을 합칠때
  35. 켄드릭
    2020.10.28(수) 15:08 1차 학습완료
  36. 만듀
    10/27
  37. 10/22
  38. 1stclasscitizen
    2020.10.21
  39. sunny
    2020.10.20 완료
  40. 오석민
    완료
  41. 박병진
    감사합니다. 이고잉 프로그래머 선생님~
  42. 배고프다
    완료
  43. wndals20
    20.09.17 이번 강의도 잘 들었습니다. 감사합니다!
  44. 여니여니
    20200908 완료~
    colspan , rowspan 헷갈리지만 ㅎ 계속 합니다!
  45. 워니딴
    2020 08 21 완료!
  46. 김성곤
    20200713 감사합니다!
  47. 김준석
    완료
  48. 완료
  49. 김예훈
    완료
  50. 굴렁이
    table 태그 :테이블생성
    tr: 행 묶음
    td: 칸 하나씩 생성

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

    rospan="숫자" 세로칸 숫자만큼 병합
    colspan="숫자" 가로칸 숫자만큼 병합
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기