HTML 표(테이블)와 멀티미디어 삽입하기

<!-- 표테두리는 스타일시트를 이용하여 그려주어야 함-->
  <!--표 만들기-->
  <table>
    <caption> 표제목 </caption>
    <!--col:테이블의 열별 스타일 지정하기-->
    <colgroup>
      <col>
      <!--1열 스타일. 스타일을 지정하지 않아도 빈칸을 채워주어야함-->
      <col style="width:300px;">
      <!--2열 스타일-->
      <col style="width:200px; background-color: chartreuse;">
      <!--3열 스타일-->
    </colgroup>
    <thead>
      <!-- 테이블을 head,body,foot구역으로 분류-->
      <tr>
        <!--table row (행)-->
        <!--th: 표제목, 볼드로 표현, 중앙정렬-->
        <th>표제목 1행 1열</th>
        <th>표제목 1행 2열</th>
        <th>표제목 1행 3열</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <!--td : 셀 추가-->
        <td>2행1열</td>
        <td>2행2열</td>
        <td>2행 3열</td>
      </tr>
      <tr>
      	<!--행,열 합치기-->
        <td rowspan="2">3행,4행 1열</td>
        <td colspan="2">3행 2,3열</td>
      </tr>
      <tr>
        <td>4행 2열</td>
        <td>4행 3열</td>
      </tr>
      <tr>
        <td>5행 1열</td>
        <td rowspan="2" colspan="2">5,6행 2,3열</td>
      </tr>
      <tr>
        <td>6행 1열</td>
      </tr>
    </tbody>


  </table>

  <!--멀티미디어 삽입 (하위폴더에 있으면 폴더명까지 기재)-->
  <img src="하위폴더명/파일명.jpg" alt="대체 텍스트">
  <!--alt = 대체 텍스트(엑박시,tts시)-->
  <br>
  <audio src="medias/spring.mp3" controls></audio> <!-- controls 재생 컨트롤바 삽입-->
  <br>
  <video src="medias/salad.mp4" controls width="450"></video>
  <!--width 너비 지정-->
  <br>

  <!--하이퍼링크 삽입(대체텍스트에 밑줄생김, 기본: 같은페이지에서 열림)-->
  <a href="열 링크(동일폴더에 존재, 이미지도 가능).html"> 대체텍스트 </a>
  <br>
  <a href="링크.html" target="_blank"> 새탭으로 열기 </a>

 

audio, video 속성

controls	컨트롤 바 표시
autoplay	오디오나 비디오를 자동 실행
loop	오디오나 비디오를 반복 재생
muted	오디오나 비디오의 소리를 제거
preload	(auto, metadata, none) 비디오파일 로딩 방법 지정
width, height	비디어 플레이어의 너비와 높이 지정
poster	"파일이름" : video가 재생되기 전까지 화면에 표시될 포스터 이미지 지정

Hola!

표제목

표제목 1행 1열	표제목 1행 2열	표제목 1행 3열
2행1열	2행2열	2행 3열
3행,4행 1열	3행 2,3열
	4행 2열	4행 3열
5행 1열	5,6행 2,3열
6행 1열

대체텍스트
새탭으로 열기

 

 

See the Pen Untitled by Javaiary (@javaiary) on CodePen.