[HTML] 자주 사용되는 HTML 태그정리2 - 표, 멀티미디어

1. 표 관련 태그 

• table: 표를 나타낸다
• caption: 표의 제목을 넣는다.
• tr: 표의 행을 만든다.
• td: 표의 셀을 만든다.
• th: 제목 셀을 만든다.
• thead: 표 구조에서 제목 부분을 나타낸다.
• tbody: 표 구조에서 내용 부분을 나타낸다.
• tfoot: 표 구조에서 요약이나 정리 부분을 나타낸다.
• col: 표에서 열의 스타일을 지정한다.
• colgroup: 표에서 여러 열을 함께 묶어서 스타일을 지정한다.
• rowspan: 표에서 셀들을 행으로 합친다.
• colspan: 표에서 셀들을 열로 합친다. 

<td rowspan="합칠 셀의 개수">셀의 내용</td>

<td colspan="합칠 셀의 개수">셀의 내용</td>

 

코드 구조화

<table>
    <caption>표 제목</caption>
    <thead> /* 표의 제목 부분 */
        <tr> /* 표의 행을 만든다. *
            <th>제목1</th> /* 제목 셀을 만든다. *
            <th>제목2</th>
            <th>제목3</th>
            <th>제목4</th>
        </tr>
    </thead>
    <tbody> /* 표의 내용 부분 *
        <tr> 
            <td>내용1.1</td> /* 내용 셀을 만든다. *
            <td>내용1.2</td>
            <td>내용1.3</td>
            <td>내용1.4</td>
        </tr>
        <tr>
            <td>내용2.1</td>
            <td>내용2.2</td>
            <td>내용2.3</td>
            <td>내용2.4</td>
        </tr>
        <tr>
            <td>내용3.1</td>
            <td>내용3.2</td>
            <td>내용3.3</td>
            <td>내용3.4</td>
        </tr>
        <tr>
            <td>내용4.1</td>
            <td>내용4.2</td>
            <td>내용4.3</td>
            <td>내용4.4</td>
        </tr>
    </tbody>
</table>

 

2. 이미지 태그

<img src="이미지 파일 경로" alt="대체용 텍스트">

 

3. 오디오와 비디오 태그

• object: 멀티미디어, PDF 파일 등 다양한 형식의 파일을 삽입한다.
• audio: 오디오 파일을 삽입한다.
• video: 비디오 파일을 삽입한다.
• embed: audio, video, object 태그들이 지원하지 않을 경우 멀티미디어 파일을 삽입한다. 

/* 1. object */
<object width="너비" height="높이" data="파일"></object>

/* 2. embed */
<embed src="파일 경로" width="너비" height="높이"></embed>

/* 3. audio, video */
<audio src="파일 경로"></audio>
<video src="파일 경로"></video>

 

4.  하이퍼 링크

<a href="링크할 주소">텍스트 또는 이미지</a>

<a href="링크할 주소" target="_blank">텍스트 또는 이미지</a> /* 새탭에서 링크를 열어준다 */