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. 김돕희
    열을 합치는 방법 = rowspan (세로)
    행을 합치는 방법 = colspan (가로)
    table 태그와 tr = table row 의 줄임말로 열을 만들어준다.
    th = table head 의 줄임말로 글씨가 자동으로 굵어진다.
    td= table body 의 줄임말로 본문 내용, 글씨가 굵어지지는 않는다.
    각 행마다 tr 을 써주어야 한다.
    thead, tbody, tfoot 을 안 쓴다고 해서 지장이 가지는 않지만, 써주면 좋다.
  2. 미래도비
    1.4
  3. JiHyun
    2023년 12월 15일 금요일 학습완료!
  4. 원지영
    table > tr > td
    w3c 웹표준 정보 등
  5. 다겸란
    감사합니다.
  6. DreamBoy
    2023.09.06. HTML - 주요태그 - 표 - table 파트 완료했습니다.
  7. 코린이
    퇴출될 속성이라서 그럴겁니다. 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이 짜부되지 않도록 해야할때 요령이 없어서 힘들었던 기억이 나네요. 회사가 작다보니 백단 개발자임에도 프론트, 디자인 가릴 거 없이 유지보수를 전담해야하는 슈퍼파워 잡부가 되야 할때... 일단 코딱지만한 프론트엔드 밑천과 지식으로 급한 불은 끄더라도 뭔가 알고 접근했다면 간단한 문제에 오랜 시간을 잡아먹지도, 이렇게 멍텅구리처럼 비효율적으로 자질구레하게 자바스크립트 코드를 만들진 않았을텐데 속상하던 기억이 많이 나네요 ㅎㅎ
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기