[HTML] Day3

[작성일: 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

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

 

 

 

 

 

 

 

 

 

 

---

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