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. 김지원
    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">합계 이것은 열을 합칠때
  2. 켄드릭
    2020.10.28(수) 15:08 1차 학습완료
  3. 만듀
    10/27
  4. 10/22
  5. 1stclasscitizen
    2020.10.21
  6. 2020.10.20 완료
  7. 오석민
    완료
  8. 박병진
    감사합니다. 이고잉 프로그래머 선생님~
  9. 배고프다
    완료
  10. wndals20
    20.09.17 이번 강의도 잘 들었습니다. 감사합니다!
  11. 여니여니
    20200908 완료~
    colspan , rowspan 헷갈리지만 ㅎ 계속 합니다!
  12. 워니딴
    2020 08 21 완료!
  13. 김성곤
    20200713 감사합니다!
  14. 김준석
    완료
  15. 완료
  16. 김예훈
    완료
  17. 굴렁이
    table 태그 :테이블생성
    tr: 행 묶음
    td: 칸 하나씩 생성

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

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

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

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