Table 태그

2023. 6. 21. 00:17·Development/HTML
반응형

 

HTML table 태그
HTML table 태그

1. Table 태그 : 명확한 표의 형식에만 사용하는 태그

사용 예시 ) 

<table>

  <caption> 선물용과 가정용 상품 구성</caption>

  <thead>

    <tr>

      <th>용도</th>

      <th>중량</th>

      <th>개수</th>

      <th>가격</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>선물용</td>

      <td>3kg</td>

      <td>11~16과</td>

      <td>35,000원</td>

    </tr>

    <tr>

      <td>가정용</td>

      <td>4kg</td>

      <td>11~16과</td>

      <td>21,000원</td>

    </tr>

  </tbody>

</table>

 

 

2. caption

<caption></caption> : 표 제목 , 위쪽 중앙에 표시, 생략가능

 

3. scope 

<scope></scope> : 열 제목, 행 제목 셀<th>에 정의하는 속성

행 제목 : <th scope="row">

열 제목 : <th scope="col">

낭독기에선 scope가 정의된 셀과 함께 td를 읽어준다.

 

4. <tr></tr>

행을 만드는 태그

 

5. <td></td>

행안의 셀을 만드는 태그

colspan="n" 속성

 

6. <th></th>

제목 행에 셀을 만드는 태그

내용이 진하게 표시, 중앙 배열

 

7. 속성 rowspan, colspan 

속성 rowspan="n"  아래와 같이 행을 합칠 때 사용

     
   
     

속성 colspan="n" 아래와 같이 열을 합칠 때 사용

   
     
     

사용 예시 )  <td rowspan="합칠 셀의 개수">셀의 내용</td>

 

8. 열을 묶는 태그

<colgroup>, <col> : 배경, 너비 등을 특정 열에 지정할 때 사용

 

사용예시 )

<table>

  <caption>선물용과 가정용 상품 구성</caption>

  <colgroup>

    <col style="background-color:#eee;">

    <col>

    <col span="2" style="width:150px;"> // 스타일 속성이 같은 세번째, 네번째 열을 묶어서 너비 지정

  <colgroup>

  <thead>

(... 이하 생략)

반응형
저작자표시 비영리 변경금지
'Development/HTML' 카테고리의 다른 글
  • HTML, CSS 에서의 문자셋 설정 charset, UTF-8
  • HTML form 관련 태그 / button태그와 input type=button 의 차이
  • 웹 디자인 및 프로그래밍 시 자주 활용되는 주요 플러그인 사이트 5
  • HTML의 기본 구조와 개념
DREYA
DREYA
한발 한발 나아가는 Delight(기쁨) 개발일지는 이곳에서 → https://velog.io/@jaidy/posts
  • DREYA
    Delight
    DREYA
    • 분류 전체보기
      • Algorithm
      • Psychology
      • Development
        • HTML
        • CSS
        • JavaScript
        • TypeScript
        • React
        • Vue.js
        • Spring
        • SQL
        • 웹 최적화
      • Design
  • 블로그 메뉴

    • 개발일지🍀
  • 공지사항

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
DREYA
Table 태그
상단으로

티스토리툴바