<body>
태그<body>
태그의 안에 들어갈 내용들은 실제 브라우저에 표시될 내용이다.
내용을 표현하는 여러 태그가 있는데, 이번에는 테이블 관련 태그들을 알아보자.
Table
을 만드는 태그를 알기 전에 먼저 Table
의 구성을 알아보자
Table
은 row
와 column
으로 구성된다.
그리고 row
와 column
이 교차하는 지점을 cell
이라고 한다.
<table>
: table을 사용을 선언하는 태그. 이후 table 관련 태그들을 감싸준다.<tr>
: 행의 역할을 하는 태그<th>
: 제목 셀의 역할을 하는 태그굵은 글씨
로 표현된다.<td>
: 일반 셀의 역할을 하는 태그열은 셀의 역할을 하는 태그를 여러번 사용하여 추가한다.
<table>
<tr>
<th>1행 1열의 제목 셀</th>
<th>1행 2열의 제목 셀</th>
<th>1행 3열의 제목 셀</th>
</tr>
<tr>
<td>2행 1열의 일반 셀</td>
<td>2행 2열의 일반 셀</td>
<td>2행 3열의 일반 셀</td>
</tr>
<tr>
<td>3행 1열의 일반 셀</td>
<td>3행 2열의 일반 셀</td>
<td>3행 3열의 일반 셀</td>
</tr>
</table>
1행 1열의 제목 셀 1행 2열의 제목 셀 1행 3열의 제목 셀 2행 1열의 일반 셀 2행 2열의 일반 셀 2행 3열의 일반 셀 3행 1열의 일반 셀 3행 2열의 일반 셀 3행 3열의 일반 셀
colspan
: 해당 행에서 입력한 값만큼의 열까지의 셀을 병합한다.rowspan
: 해당 열에서 입력한 값만큼의 행까지의 셀을 병합한다.❗ 주의 ❗
colspan
이나rowspan
을 사용 시, 시작 셀을 제외한 병합에 포함되는 셀들은 셀 태그들을 사용하지 말아야 한다.
<table border ="1">
<tr>
<th>이름</th>
<td></td>
<th>연락처</th>
<td></td>
</tr>
<tr>
<th>주소</th>
<td colspan="3"></td>
<!-- colspan="3" 이기 때문에 해당 셀 테그 미사용 -->
<!-- colspan="3" 이기 때문에 해당 셀 테그 미사용 -->
</tr>
<tr>
<th>자기소개</th>
<td colspan="3"></td>
<!-- colspan="3" 이기 때문에 해당 셀 테그 미사용 -->
<!-- colspan="3" 이기 때문에 해당 셀 테그 미사용 -->
</tr>
</table>
이름 연락처 주소 자기소개
<caption>
아래와 같이 사용된다.
<table border="1">
<cation>
<p>국내에서 자주 사용하는 브라우저들</p>
</cation>
<tr>
<td>브라우저</td>
<td>제조사</td>
<td>다운로드 사이트</td>
</tr>
<tr>
<td>Chrome</td>
<td>Google</td>
<td>https://www.google.com/chrome/</td>
</tr>
<tr>
<td>Firefox</td>
<td>Mozilla</td>
<td>https://www.mozilla.org/ko/firefox/</td>
</tr>
<tr>
<td>Edge</td>
<td>Edge</td>
<td>https://www.microsoft.com/ko-kr/windows/microsoft-edge/</td>
</tr>
</table>
국내에서 자주 사용하는 브라우저들
브라우저 제조사 다운로드 사이트 Chrome https://www.google.com/chrome/ Firefox Mozilla https://www.mozilla.org/ko/firefox/ Edge Edge https://www.microsoft.com/ko-kr/windows/microsoft-edge/
<figure>
, <figcaption>
<caption>
과 다른 점은, <table>
태그를 <figure>
태그로 감싸 사용한다.<figcaption>
의 위치에 따라 제목의 위치가 틀려진다.아래와 같이 사용된다.
<!-- figcaption을 테이블보다 위에 사용 -->
<figure>
<figcaption>
<p>국내에서 자주 사용하는 브라우저들</p>
</figcaption>
<table border="1">
<tr>
<td>브라우저</td>
<td>제조사</td>
<td>다운로드 사이트</td>
</tr>
<tr>
<td>Chrome</td>
<td>Google</td>
<td>https://www.google.com/chrome/</td>
</tr>
</table>
</figure>
<!-- figcaption을 테이블보다 아래에 사용 -->
<figure>
<table border="1">
<tr>
<td>브라우저</td>
<td>제조사</td>
<td>다운로드 사이트</td>
</tr>
<tr>
<td>Chrome</td>
<td>Google</td>
<td>https://www.google.com/chrome/</td>
</tr>
</table>
<figcaption>
<p>국내에서 자주 사용하는 브라우저들</p>
</figcaption>
</figure>
국내에서 자주 사용하는 브라우저들
브라우저 제조사 다운로드 사이트 Chrome https://www.google.com/chrome/
브라우저 제조사 다운로드 사이트 Chrome https://www.google.com/chrome/ 국내에서 자주 사용하는 브라우저들
<thead>
, <tbody>
, <tfoot>
<thead>
: 제목<tbody>
: 본문<tfoot>
: 요약<table>
태그와 row를 나타내는 <tr>
태그 사이에 사용한다.아래와 같이 사용된다.
<table>
<thead>
<tr align="center">
<td>제목1</td>
<td>제목2</td>
<td>제목3</td>
<td>제목4</td>
</tr>
</thead>
<tbody>
<tr align="center">
<td>본문1</td>
<td>본문2</td>
<td>본문3</td>
<td>본문4</td>
</tr>
<tr align="center">
<td>본문1</td>
<td>본문2</td>
<td>본문3</td>
<td>본문4</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<td colspan="4">요약1</td>
</tr>
</tfoot>
</table>
제목1 제목2 제목3 제목4 본문1 본문2 본문3 본문4 본문1 본문2 본문3 본문4 요약1
제작자 : wonkooklee