HTML - Table, Media

22 Oct 2020 in Dev on HTML, Table, Media, Etctag

HTML Table

tr = Table Row
th = Table Header
td = Tabel Data

Table Header1	Table Header2	Table Header3	Table Header4
Tabel Data 1	Tabel Data 2	Tabel Data 3	Tabel Data 4
Tabel Data 5	Tabel Data 6	Tabel Data 7

<table>
<tr>
<th> Table Header1 </th>
<th> Table Header2 </th>
<th> Table Header3 </th>
<th> Table Header4 </th>
</tr>
<tr>
<td> Tabel Data 1 </td>
<td> Tabel Data 2 </td>
<td> Tabel Data 3 </td>
<td> Tabel Data 4 </td>
</tr>
</table>
</tr>
<tr>
<td> Tabel Data 5 </td>
<td> Tabel Data 6 </td>
<td> Tabel Data 7 </td>
<td></td>
</tr>

시간 표 만들기

rowspan=”n” n만큼 세로 cell 차지
colspan=”n” n만큼 가로 cell 차지
scope = “col” / scope = row (th에만 사용 가능. 브라우저에 전달)
thead, tbody, tfoot 태그 (브라우저에 전달)

	평일	주말
08:00~09:00	기상+식사+달리기+샤워
09:00~10:00	명상
12:00~13:00	식사
13:00~14:00	개발	휴식
14:00~15:00		복습
15:00~16:00		복습
16:00~17:00		복습
17:00~18:00		복습
18:00~19:00		복습
19:00~20:00	식사
20:00~21:00	운동
21:00~22:00	요가
22:00~23:00	샤워+일기
23:00~24:00	독서+취침
23:00~24:00	독서+취침

<table>
<thead>
  <tr>
    <th></th>
    <th scope = "col">평일</th>
    <th scope = "col">주말</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope = "row">08:00~09:00</th>
    <td colspan="2"> 기상+식사+달리기+샤워 </td>
  </tr>
  <tr>
    <th scope = "row">09:00~10:00</th>
    <td colspan="2"> 명상 </td>
  </tr>
  <tr>
    <th scope = "row">12:00~13:00</th>
    <td colspan="2"> 식사 </td>
  </tr>
  <tr>
    <th scope = "row">13:00~14:00</th>
    <td rowspan="6"> 개발 </td>
    <td> 휴식 </td>
  </tr>
  <tr>
    <th scope = "row">14:00~15:00</th>
    <td> 복습 </td>
  </tr>
  <tr>
    <th scope = "row">15:00~16:00</th>
    <td> 복습 </td>
  </tr>
  <tr>
    <th scope = "row">16:00~17:00</th>
    <td> 복습 </td>
  </tr>
  <tr>
    <th scope = "row">17:00~18:00</th>
    <td> 복습 </td>
  </tr>
  <tr>
    <th scope = "row">18:00~19:00</th>
    <td> 복습 </td>
  </tr>
  <tr>
    <th scope = "row">19:00~20:00</th>
    <td colspan="2"> 식사 </td>
  </tr>
  <tr>
    <th scope = "row">20:00~21:00</th>
    <td colspan="2"> 운동 </td>
  </tr>
  <tr>
    <th scope = "row">21:00~22:00</th>
    <td colspan="2"> 요가 </td>
  </tr>
  <tr>
    <th scope = "row">22:00~23:00</th>
    <td colspan="2"> 샤워+일기 </td>
  </tr>
  <tr>
    <th scope = "row">23:00~24:00</th>
    <td colspan="2"> 독서+취침 </td>
  </tr>
  <tr>
    <th scope = "row">23:00~24:00</th>
    <td colspan="2"> 독서+취침 </td>
  </tr>
</tbody>
</table>

HTML media

img

<img src = "" alt=""/>

audio

<audio src="" controls></audio>

[attribute]
src : 경로 (필수)
controls : 컨트롤 설정(소리,재생)
autoplay : 자동재생
loop : 반복 재생

video

<video src="" controls></video>

iframe

<iframe width="560" height="315" src="https://www.youtube.com/embed/Jg9NbDizoPM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

기타 태그

abbr(ABBReviation:약자)

<abbr title="별걸 다 줄인다">별다줄</abbr>

별다줄

adress ~~~

https://creamereos.github.io</address> ~~~ https://creamereos.github.io</address> - pre(PREfomatted text) : 작성한 그대로 표시 ~~~

  ㅇ ㅏ ㄴ ㅕ 하 세 ㅇ
   ㄴ    ㅇ       ㅛ

~~~

  ㅇ ㅏ ㄴ ㅕ 하 세 ㅇ
   ㄴ    ㅇ       ㅛ

~~~ - code : 코드를 표시 console.log('hello world!') ~~~ - code : 코드를 표시 console.log('hello world!')