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