html/css 독학하기

코스 전체목록

닫기

표 - 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. kdb5869
    table 태그 - 표를 생성할 때 사용
    tr(table row) 태그 - 표에서 행을 생성
    th(table header) 태그 - 표에서 제목을 나타내는 열을 생성
    td(table data) 태그 - 표에서 일반적인 데이터를 나타내는 열을 생성

    thead, tfoot, tbody 그룹화 하여 가독성을 높여주고 웹 접근성을 향상시켜줌.
    검색해보니 thead > tfoot > tbody 순으로 사용

    rowspan - 행을 병합할 때 사용
    colspan - 열을 병합할 때 사용

    24.04.22
  2. 마우스오른쪽버튼
    완료
  3. 굿모닝
    감사합니다!
  4. 김돕희
    열을 합치는 방법 = rowspan (세로)
    행을 합치는 방법 = colspan (가로)
    table 태그와 tr = table row 의 줄임말로 열을 만들어준다.
    th = table head 의 줄임말로 글씨가 자동으로 굵어진다.
    td= table body 의 줄임말로 본문 내용, 글씨가 굵어지지는 않는다.
    각 행마다 tr 을 써주어야 한다.
    thead, tbody, tfoot 을 안 쓴다고 해서 지장이 가지는 않지만, 써주면 좋다.
  5. 미래도비
    1.4
  6. JiHyun
    2023년 12월 15일 금요일 학습완료!
  7. 원지영
    table > tr > td
    w3c 웹표준 정보 등
  8. 다겸란
    감사합니다.
  9. DreamBoy
    2023.09.06. HTML - 주요태그 - 표 - table 파트 완료했습니다.
  10. 코린이
    퇴출될 속성이라서 그럴겁니다. 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.완료 감사합니다
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기