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. 원지영
    table > tr > td
    w3c 웹표준 정보 등
  2. 다겸란
    감사합니다.
  3. DreamBoy
    2023.09.06. HTML - 주요태그 - 표 - table 파트 완료했습니다.
  4. 코린이
    퇴출될 속성이라서 그럴겁니다. ide에서 경고 표시를 해주는 이유는 사용하시는 편집기마다 다르겠지만 보통 아래 경고를 해주는 이유도 같이 설명해줍니다.
    대화보기
    • 소윤호
      비주얼 스튜디오 코드를 이용하는데요. border 이라는 단어가 빨간색으로 표시가 되는데 문제 없는건가요? 퇴출된 font 태그도 빨간색으로 뜨던데 무슨 문제가 있나요?
    • AgainstartJH
      2022년 11월 09일 수요일 학습완료!
    • yuyu
      220922
    • 헤밍웨이
      220822 테이블 재미있네요 :)
    • vigorously27
      2022년 7월 9일 학습완료!
    • 이슬유치원
      22.6.20 완료
    • eunbee
      22-05-04
    • G.I.R.O
      22.04.05 완료
    • INJE
      22.03/04
    • 강수빈
      21.1.15 수강완료
    • jjy_lee2468
      21.12.28수강완료
    • syh712
      2021-12-21
    • 코딩혁명
      2021.11.12수강완료.감사합니다
    • 드림보이
      2021.11.04. 표 -table 태그 파트 수강완료
    • 황금아가리
      211002
    • 김큼이
      20210914완료
    • evian
      20210914 완료
    • overmatch
      20210821 완료
    • 란찬
      =)
    • 두드
      2021.07.20 완료
    • 2021.07.16 완
    • 옥이야
      백팩
    • 오뉴오뉴
      2021.6.28
    • 감자먹는넘
      감자
    • barozaqu
      20210513.
    • GelandeWagen
      210511 ok
    • SHOWU
      갑자기 두배되서 깜짝놀랐자농
    • 짜rr
      감사히 잘봣습니다
    • yogg
      <table>
      <tr>
      <td>이름</td><td>좋아하는 음식</td> <td>좋아하는색깔</td>
      </tr>
      <tr>
      <td>yogg</td> <td>밀크티</td> <td>파란색</td>
      </tr>
      </table>
    • genie
      21.02.26 완료
    • 알고 있던거긴한데 설명으로 들으니까 더 머리에 쏙쏙 들어오고 좋네요
    • 전예진
      20.02.15 완료
    • loveahav
      완료!
    • dypar
      2021-02-06
    • Minint
      2021.02.04
    • 이현수
      2021.02.02(화)
    • 임태경
      완료했어요 감사해요
    • 이오
      2021.1.31 감사합니다^^
    • 비둘기의 깃털
      2021.01.30
    • 스마일가이
      2021.01.24.완료 감사합니다
    • 아루미
      1 22 금 완료 감사합니다!!!
    • 엘리심
      1/20 완료
    • 주니어개발자
      복잡한 예약 화면 등에서 특정 이벤트나 조건마다 옵션 메뉴 항목의
      rowspan, colspan 수치와 다른 속성들을 동적으로 변경해서 table이 짜부되지 않도록 해야할때 요령이 없어서 힘들었던 기억이 나네요. 회사가 작다보니 백단 개발자임에도 프론트, 디자인 가릴 거 없이 유지보수를 전담해야하는 슈퍼파워 잡부가 되야 할때... 일단 코딱지만한 프론트엔드 밑천과 지식으로 급한 불은 끄더라도 뭔가 알고 접근했다면 간단한 문제에 오랜 시간을 잡아먹지도, 이렇게 멍텅구리처럼 비효율적으로 자질구레하게 자바스크립트 코드를 만들진 않았을텐데 속상하던 기억이 많이 나네요 ㅎㅎ
    • 201209
    • 티치
      2020.12.07
    • 김지원
      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">합계 이것은 열을 합칠때
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기