[HTML] Day3

2024. 9. 7. 02:06·Back-End/Front-End
목차
  1. 테이블
  2. 테이블
  3. 병합(merge)
  4. caption
  5. colgroup
  6. thead, tbody, tfoot
  7. a 심화
  8. iframe

[작성일: 2023. 02. 09]

 

테이블

  • 여러 종류의 데이터가 행과 열로 정리된 표
  • <table> 태그 사용

 

 

 

테이블

<table border="선굵기" align="정렬위치" width="너비">
<tr> height="행높이">
<th>컬럼명</th>
<td>데이터</td>
<td>데이터</td>
<td>데이터</td>
...
<td>데이터</td>
</tr>
<tr>...</tr>
...
<tr>...</tr>
</table>

 

 

 

병합(merge)

  • 열병합
  • colspan="합칠 열의 개수"
<tr><td><td><td><td><td></tr>
<tr><td><td colsapn="3"><td></tr>

 

  • 행병합
  • rowspan="합칠 행의 개수"
<tr><td rowspan="2"><td><td><td><td></tr>
<tr><td><td><td><td></tr>

 

 

 

caption

  • <caption> 태그로 테이블 상단에 짧은 설명을 붙일 수 있음.
  • table 1개 당 한 번만 사용 가능

 

 

 

colgroup

  • 뒤에 나오는 컬럼(td)에 적용할 스타일을 미리 적용함.

 

 

 

thead, tbody, tfoot

  • 행을 묶어서 스타일 지정
  • 하나의 테이블에 하나씩 사용 가능
  • 시각 장애인을 위한 화면 판독기 가능(웹 접근성 보장)

 

 

 

 

 

a 심화

link         아직 방문한 적 없음.

visited   한 번이라도 가본 적 있음.

hover     마우스를 올려 놓으면?

active    마우스를 누르고 있으면?

페이지 책갈피  

  •  현재 페이지에서 이동하고 싶은 곳으로 이동하는 법
  • <a> 태그의 name 속성을 이용하여 책갈피 생성

 

 

 

 

 

iframe

  • 외부 페이지를 가져와서 링크함.
  • 내 페이지 안에 외부 페이지가 있는 것처럼 표현 가능함.

 

 

 

 

 

 

 

 

 

 


🐣 해당 게시글은 입문 개발자가 요약/정리한 글이므로 틀린 내용이나 오타가 있을 수 있습니다.

 

저작자표시 비영리 변경금지 (새창열림)
  1. 테이블
  2. 테이블
  3. 병합(merge)
  4. caption
  5. colgroup
  6. thead, tbody, tfoot
  7. a 심화
  8. iframe
'Back-End/Front-End' 카테고리의 다른 글
  • [Bootstrap] Day5
  • [CSS] Day4
  • [HTML] Day2
  • [HTML] Day1
뚜비
뚜비
1년차 백엔드&iOS 개발자의 감자 탈출 블로그 🥔🥔
  • 뚜비
    뚜비의 개발로그
    뚜비
  • 전체
    오늘
    어제
  • 글쓰기     관리
    • Devlog
      • Back-End
        • Java
        • Spring
        • JPA
        • HTTP
        • Security
        • Back-End
        • Front-End
      • 알고리즘
      • iOS
        • Swift
      • Database
      • Tips
        • Git & GitHub
        • A to Z
      • 프로젝트
      • 생각정리
  • 태그

    MVC
    자바
    김영한
    의존성주입
    프로그래머스
    Database
    스프링
    Spring Security
    게시판만들기
    sql
    생성자
    JPA
    javascript
    spring
    변수
    다형성
    Swift
    최주호
    DB
    백준
    객체
    Security
    Java
    html
    성능최적화
    자바스크립트
    jsp
    데이터베이스
    HTTP
    알고리즘
  • hELLO· Designed By정상우.v4.10.0
뚜비
[HTML] Day3
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.