04 HTML 텍스트 관련 태그(2)
html 배우기
04 HTML 텍스트 관련 태그(2) _ 표 만들기
안녕하세요?
지난 시간에 이어 HTML 텍스트 관련 태그를 정리해 봤는데요.
텍스트 태그 중에서 가장 어려운 표 만들기 태그입니다. 어렵다고 해도 익숙해지면 금방 만들어요.
표는 알다시피 행과 열로 이루어져 있잖아요.
행과 열 구분만 할 줄 알면 사실 그렇게 어려울 건 없어요.
원하는 대로 열을 합치고 행을 합치고 하는 게 조금 헷갈려서 그렇지 나머지는 태그만 알면 금방 뚝딱!
그럼 자세히 살펴볼까요.
표를 만드는 태그
1. 기본적인 표 만들기
<table>
<tr> // 행
<th>내용</th> // 제목 셀
<td>내용</td> // 열
<td>내용</td>
</tr>
</table>
ex)
<table border="1"> // 2행 3열 표이고 border="1"을 적어서 표가 보이도록 함
<tr>
<th>html</th> // 제목 셀이라 굵은 글자로 표시
<th>css</th>
<th>제이쿼리</th>
</tr>
<tr>
<td>90점</td>
<td>80점</td>
<td>70점</td>
</tr>
</table>
border 값 외에는 아무것도 적용한 게 없으면 위의 결과처럼 나와요.
표에 대한 스타일은 HTML에서 지정할 수 있지만, 웹 표준에 맞게 CSS에서 적용하는 게 좋아요.
몰랐는데, 웹 표준검사를 하다 보니, 표에 대한 스타일은 CSS로 지정하라고 하더라고요.
2. 행/열 합치기
: 열 합치기 <td colspan="합칠 열의 개수">내용</td>, <th colspan="합칠 열의 개수">내용</th>
: 행 합치기 <td rowspan="합칠 행의 개수">내용</td>, <th rowspan="합칠 행의 개수">내용</th>
ex)
<table border="1"> // 4행 4열의 표를 가지고 행과 열을 합치기 함.
<tr>
<th>이름</th> // 제목 셀이라 굵은 글자로 표시
<td>류준열</td>
<th>생년월일</th>
<td>1986.9.25</td>
</tr>
<tr>
<th>소속사</th>
<td colspan="3">씨제스엔터테인먼트</td> // 열 3개를 합함. 열을 합치는 만큼 <td>를 삭제 함.
</tr>
<tr>
<th rowspan="2">소개</th> // 행 2개를 합함.
<td>학력</td>
<td colspan="2">수원대학교 연극영화 학사</td> // 열 2개를 합함.
</tr>
<tr>
<td>데뷔</td>
<td colspan="2">2015년 영화 '소셜포비아'</td> // 열 2개를 합함
</tr>
</table>
얼마 전 꿈속에 류준열이 나와서 정말 설렜거든요. ㅎㅎ
그래서 예시는 류준열로~ㅎㅎ
(늘 말하지만 자신이 좋아하는 걸 접목해서 공부하는 아주 즐겁게 할 수 있어요~)
행과 열을 합칠 때 중요한 것은 합친 열과 행만큼 <td>태그를 삭제를 해줘야 해요.
3. 표의 제목 붙이기
: 표의 위쪽 중앙에 표시 <caption>표 제목</caption> // <table>태그 다음에 바로 사용
: 표의 위/ 아래 표시(중앙 정렬되지 않는다.)
ex)
<table border="1">
<caption> // 표의 제목이 가운데에 표시 된다.
<p>내가 좋아하는 스타</p>
</caption>
<tr>
<th>이름</th>
<td>류준열</td>
<th>생년월일</th>
<td>1986.9.25</td>
</tr>
...
<figure> // 설명 글을 붙이고 싶은 대상을 감싼다.
<figcaption> // 제목이나 설명 글
<p>텍스트</p>
</figcaption>
<table>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
</tabe>
</figure>
ex)
<figure>
<figcaption>
<p>내가 좋아하는 스타</p>
</figcaption>
<table border="1">
<tr>
<th>이름</th>
<td>류준열</td>
<th>생년월일</th>
<td>1986.9.25</td>
</tr>
<tr>
<th>소속사</th>
<td colspan="3">씨제스엔터테인먼트</td>
</tr>
<tr>
<th rowspan="2">소개</th>
<td>학력</td>
<td colspan="2">수원대학교 연극영화 학사</td>
</tr>
<tr>
<td>데뷔</td>
<td colspan="2">2015년 영화 '소셜포비아'</td>
</tr>
</table>
<figure>
<caption> 태그와 <figcaption> 태그는 표의 제목을 붙일 때 사용하면 되는데요.
차이점은 <caption> 태그는 표의 상단에 중앙 정렬되는 반면 <figcaption>은 중앙 정렬은 되지 않고 표의 위와 아래에 붙일 수 있다는 거예요.
4. 표 구조
: 제목과 자료가 표시되는 셀 이외에 표의 아래쪽에 합계나 요약 내용을 표시할 경우 <thead>, <tbody>,<tfoot>구조로 나누어서 표기하는 것이 좋다. 이렇게 하면 시각장애인도 화면낭독기를 통해 표를 쉽게 이해할 수 있고, 스타일을 지정하거나 자바스크립으로 본문을 스크롤 하게 만들 수도 있다.
<thead> // 표의 제목
<tr>
<th></th>
<th></th>
<tr>
</thead>
<tbody> // 본문
<tr>
<th></th>
<td></td>
<tr>
</tbody>
<tfoot> // 요약
<tr>
<th></th>
<td></td>
<tr>
</tfoot>
ex)
<table border="1"> // 5행 4열의 표
<thead>
<tr>
<th>구분</th>
<td>은환기</td>
<td>강우일</td>
<td>장세종</td>
</tr>
</thead>
<tbody>
<tr>
<th>html</th>
<td>90</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<th>css</th>
<td>70</td>
<td>80</td>
<td>60</td>
</tr>
<tr>
<th>제이쿼리</th>
<td>50</td>
<td>70</td>
<td>60</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>합계</th>
<td>210</td>
<td>230</td>
<td>210</td>
</tr>
</tfoot>
</table>
5. 여러 열 묶기 (스타일 지정시 사용)
: <caption>태그 뒤와 <tr>, <td>태그 전에 사용
: <col>태그의 개수와 표의 열의 개수가 같아야 한다.
<colgroup>
<col>
<col>
</colgroup>
ex)
<table border="1">
<colgroup>
<col style="background-color:#yellow;" > // 1열은 제목열로 노란색으로 표시
<col>
<col style="background-color:red;"> // 3열은 빨강으로 표시
<col>
</colgroup>
<thead>
<tr>
<th>구분</th>
<td>은환기</td>
<td>강우일</td>
<td>장세종</td>
</tr>
</thead>
...
어때요?
그렇게 간단하지는 않지요. 그래도 계속 연습하다 보면 자기 것으로 만들 수 있어요.
그리고 표에 대한 스타일 지정도 css로 할 수 있어서 복잡하면 그 부분은 패스해도 되고요.
스타일 지정에 대해서는 CSS편에서 자세히 다룰 예정이고요.
다음에는 이미지를 삽입하고 링크를 연결하는 방법을 배울 거예요.
그럼 모두 열공하세요^^
