HyunJun 기술 블로그

HTML <table> Element 본문

HTML

HTML <table> Element

공부 좋아 2023. 6. 9. 08:46
728x90
반응형

1. <table>

HTML에서 표를 만들기 위한 엘리먼트.

 

  • <table>: 테이블(표) 임을 명시
    • <thead>: 테이블의 헤더 부분 작성 (첫 행)
      • <tr>: 1개의 row(행) 생성
        • <th>: 1개의 헤더 column(열) 생성
    • <tbody>: 테이블의 내용 부분 작성
      • <tr>: 1개의 row(행) 생성
        • <td>: 1개의 내용 column(열) 생성
  <table>
    <thead>
      <tr>
        <th>번호</th>
        <th>이름</th>
        <th>성별</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <!-- tbody안에 th 가능. -->
        <th>1</th>
        <td>홍길동</td>
        <td>남자</td>
      </tr>

      <tr>
        <th>2</th>
        <td>ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ</td>
        <td>남자</td>
      </tr>

      <tr>
        <th>3</th>
        <td>ㅇㅇㅇ</td>
        <td>여자</td>
      </tr>
    </tbody>
  </table>
  <head>
    <title>HTML 문서</title>
    <style>
      table {
        border-collapse: collapse;
      }

      tr,
      th,
      td {
        border: 1px solid black;
      }
    </style>
  </head>

728x90
반응형
저작자표시 비영리 변경금지
'HTML' Related Articles more
Comments