[HTML] img, table

img

: html 문서에 이미지를 넣습니다.

 

- 속성)

 

src	원본파일 경로	절대경로 또는 상대경로
alt	대체 텍스트	스크린 리더, 원본파일 무효시(텍스트 설명이며 필수X)
title	툴팁	alt의 대체제나 반복이 되어서는 안됨
width	너비	픽셀 단위의 정수
height	높이	픽셀 단위의 정수

 

table

: html 문서에 이미지를 넣습니다.

 

- 속성)

태그설명비고

<table>

테이블

<caption>

표 설명 또는 제목

선택사항

<tr>

테이블의 행

<td>

테이블의 데이터 셀

<thead>	테이블의 헤더 부분	<tbody> 앞에 와야 함
<tbody>	테이블의 본문	본 내용을 담음
<tfoot>	테이블의 푸터 부분	<tbody> 뒤에 와야 함
<th>	열 또는 행의 헤더	scope 속성으로 row, col 중 선택

 

colspan	열 병합
rowspan	행 병합

<colgroup>	표에 열을 묶어서 속성 부여	<caption>보다 뒤, 그 외 요소보다 앞에 와야 함
<col>	열의 묶음	span 속성으로 열 수 지정

 

- 기본 틀)

<table>

      <caption>설명</caption>

 

      <thead>

        <tr>

          <th span="col"></th>

          <th span="col"></th>

        </tr>

      </thead>

      <tbody>

        <tr>

          <th span="row"></th>

          <td></td>

          <td></td>

        </tr>

        <tr>

          <th span="row"></th>

          <td></td>

          <td></td>

        </tr>

      </tbody>

      <tfoot>

        <tr>

          <th scope="row"></th>

          <td></td>

          <td></td>

        </tr>

      </tfoot>

    </table>

 

- emmet) 

table>caption{설명}+thead>tr>th[span="col"]*2^^tbody>(tr>th[span="row"]+td*2)*2^tfoot>tr>th[scope="row"]+td*2 

 

 

 

- 일주일 table

<table>

      <cabtion></cabtion>

      <colgroup>

        <col class="weekend" />

        <col span="5" />

        <col class="weekend" />

      </colgroup>

      <thead>

        <tr>

          <th scope="col"></th>

          <th scope="col"></th>

          <th scope="col"></th>

          <th scope="col"></th>

          <th scope="col"></th>

          <th scope="col"></th>

          <th scope="col"></th>

        </tr>

      </thead>

      <tbody>

        <tr>

          <td></td>

          <td></td>

          <td></td>

          <td></td>

          <td></td>

          <td></td>

          <td></td>

        </tr>

        <tr>

          <td></td>

          <td></td>

          <td></td>

          <td></td>

          <td></td>

          <td></td>

          <td></td>

        </tr>

      </tbody>

    </table>

 

참고)

emmet을 이용하면 빠르게 작성 가능

emmet의 소개는 다음 포스트를 참고해주세요.