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. 아루미
    1 22 금 완료 감사합니다!!!
  2. 엘리심
    1/20 완료
  3. 주니어개발자
    복잡한 예약 화면 등에서 특정 이벤트나 조건마다 옵션 메뉴 항목의
    rowspan, colspan 수치와 다른 속성들을 동적으로 변경해서 table이 짜부되지 않도록 해야할때 요령이 없어서 힘들었던 기억이 나네요. 회사가 작다보니 백단 개발자임에도 프론트, 디자인 가릴 거 없이 유지보수를 전담해야하는 슈퍼파워 잡부가 되야 할때... 일단 코딱지만한 프론트엔드 밑천과 지식으로 급한 불은 끄더라도 뭔가 알고 접근했다면 간단한 문제에 오랜 시간을 잡아먹지도, 이렇게 멍텅구리처럼 비효율적으로 자질구레하게 자바스크립트 코드를 만들진 않았을텐데 속상하던 기억이 많이 나네요 ㅎㅎ
  4. 201209
  5. 티치
    2020.12.07
  6. 김지원
    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">합계 이것은 열을 합칠때
  7. 켄드릭
    2020.10.28(수) 15:08 1차 학습완료
  8. 만듀
    10/27
  9. 10/22
  10. 1stclasscitizen
    2020.10.21
  11. 2020.10.20 완료
  12. 오석민
    완료
  13. 박병진
    감사합니다. 이고잉 프로그래머 선생님~
  14. 배고프다
    완료
  15. wndals20
    20.09.17 이번 강의도 잘 들었습니다. 감사합니다!
  16. 여니여니
    20200908 완료~
    colspan , rowspan 헷갈리지만 ㅎ 계속 합니다!
  17. 워니딴
    2020 08 21 완료!
  18. 김성곤
    20200713 감사합니다!
  19. 김준석
    완료
  20. 완료
  21. 김예훈
    완료
  22. 굴렁이
    table 태그 :테이블생성
    tr: 행 묶음
    td: 칸 하나씩 생성

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

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

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

    속성 - table태그 뒤에 border를 이용해 표 완성 지정값에 따라 테두리 달라짐
  29. Charlie Kwon
    완료
  30. opper
    2020.1.6 수업완료
  31. Blanc
    2020.01.02
  32. dsadsa
    테이블 어려운거같은데 많이 중요한가요 ? 별로 안 쓰이는거같은데
  33. 제시카
    유익했습니다.
  34. table
    설명도 잘 해주시고 내용도 잼있어요.잘 보고 가요
  35. Grigo
    완료
  36. 재로
    <tr colspan ="3">
    <tr rowspan ="2">
  37. FIRE
    20190803 완료
  38. 김세종
    2019-07-11 수강완료
  39. creed
    190630 감사합니다
  40. 제2지대
    완료
  41. 띤뚜
    감사합니다!
  42. 김주엽
    공부완료
  43. 코코코
    완료
  44. steal
    20190124 완료
  45. 한승민
    190115 완료
  46. 릴라야
    190111_완료
  47. 미완성
    20190107완료
  48. 김진욱
    완료!
  49. Gihoon Pomme Ryu
    완료. 고맙습니다.
  50. shcd
    clear
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기