logo image
메인
기술
HOME
기술

Table의 숨은기능(?) Caption

목록
#html

  • Table의 숨은기능(?) Caption

  • 많은분들이 Table에 Caption이 있다는걸 모르시거나 잊어버리고 계시죠.(사실.. 방금까지 잊어먹고 있었음)
  • caption의 사전의미는 표제, 제목, 설명문, 머릿만, 캡션 , 자막 등등으로 실제 내용을 꾸며주는 글이 되겠습니다.
  • caption은 HTML 3.2 이상에서 지원되며 DOM Level 1에 정의되어있습니다.
    즉, 요즘브라우저는 모두 지원됩니다.
  • caption은 table의 자식요소로 존재해야합니다.
  • 기본모양
    • 캡션
      실험
    • 소스
      • <table width="200" border="1" cellpadding="0" cellspacing="0">
        <caption style="background-color:#33CC33 ">캡션</caption>
        <tr><td bgcolor="#FFCCCC">실험</td></tr>
        </table>
  • 캡션은 자신의 부모인 table과 같은 너비를 가집니다.
  • caption의 align
    • bottom : 테이블 밑
    • center : 테이블 중앙(top과 같음)
    • left : 테이블 왼쪽
    • right : 테이블 오른쪽
    • top : 테이블 상단 중앙
  • align에 따라서 캡션은 자동 줄바꿈으로 세로쓰기로 바뀔 수 있습니다.
  • caption의 align의 차이
    • dtd나 브라우저등의 차이에 의해서 left와 right의 동작이 다를 수 있습니다.
      FF에서 확인해보면 left의 경우 상단 왼쪽 정렬이 아니라 캡션의 위치자체가 테이블의 왼쪽에 위치하고 글은 세로쓰기로 보여집니다.
  • 테이블에 제목을 한줄 적기위해서 테이블 밖에 테이블을 만들거나 하는 것보다, caption을 사용해서 훨씬 더 보기 좋고 관리하기도 좋도록 만들 수 있습니다.

 

목록
댓글
  • / /
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📅 달력형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
css grid repeat 사용법. (동적 컬럼)
#grid #auto-fit #auto-fill
pointerrawupdate event
1
#pointer
scroll-snap 사용시 주의 사항
#scroll-snap
현재 폴더 기준 이미지 파일의 너비 높이 알아오기
#php #image
motion. A modern animation library for JavaScript, React and Vue
1
#animation #motion
canvas에서 문자열 측정값. baseline 기준 하단 상단 높이 측정. fontBoundingBoxAscent, fontBoundingBoxDescent
1
#canvas #measuretext
개발용 테스트 웹 서버 띄우는 방법
#web #server
vite + react
#vite #react
wampserver
1
#amp
HTML 에서 중앙에 위치하게 할 때 center
#html #center #grid
git submodule 사용법 (서브모듈 속 서브모듈도)
#git #submodule
ui-input-stepper
2
#stepper #input
윈도우용 계정 폴더의 temp 에 계속 파일이 쌓이는 것 정리하는 배치파일
#temp #bat
ui-transform-tool
1
#ui #transform
<script type="importmap">
1
#js #importmap
tag