[HTML] 테이블
html에 대한 게시글들은 최종적인 html 결과물을 보여드리고 어떻게 만들어가는지를 설명해드릴꺼예요.
눈으로 하는 코딩 말고!! 직접 타이핑하는 코딩을 하시면 실력향상에 무척이나 도움이 된답니다.^^7
기본 태그 소개
<table>
표 형태의 데이터를 표시하는 데 사용되는 태그이다.
<tr>
Table Row의 약자. 하나의 행을 표현한다.
<td>
Table Data의 약자. 행 안의 데이터를 표현(하나의 셀이라 봐도 무방)
<th>
Table Header의 약자. 테이블 열제목. 첫 번째<tr>~</tr> 사이에 위치한다.
<caption>
테이블의 제목을 삽입하는 태그.
border 속성
테이블에 경계선을 만드는 속성
colspan 속성
열을 병합한다.
rowspan 속성
행을 병합한다.
안녕하세요 정선생이예요~ 이번 게시글에서는 표를 표시해주는 테이블 태그에 대해 알아볼꺼예요.
테이블은 초기의 웹페이지에서는 전체 페이지 레이아웃을 지정할 때 많이 사용했어요.
그렇지만 HTML5로 넘어오면서 부터는 단순히 표를 표현 할 때만 사용하는 것 같아요.
오늘의 결과물입니다!!
결과물의 코드예요.
일단 표는 <table>~</table> 로 표현을 합니다.
그리고 각 하나의 행을 표현해주는 태그는 <tr>~</tr>예요.
하나의 행을 표시했다면 그 행에 데이터를 넣어줘야겠죠? 그 데이터를 넣게 해주는 태그는 <td>~</td>예요.
그렇다면 기본적인 틀은 아래와 같겠죠?
<table> <tr> <td>데이터!!!</td> </tr> </table> |
그리고 table 태그 속에서 속성이 몇 가지가 있는데 자주 쓰이는 것을 소개해드릴꺼예요. ( 그렇지만 css로 정의하는 것이 원칙이예요. )
<table border=?> 이 속성은 테이블(표)의 라인, 즉 경계선을 얘기해요. 이 경계선 크기를 ?로 설정해주겠다는 것이예요. ?에는 숫자가 들어가요.
<table width=?> 이 속성은 표 전체의 가로길이를 ?로 지정하겠다. 이구요
그렇다면 세로도 있겠죠? <table height=?> 예요. ^^
그리고 테이블에서 가장 중요한 내용!!
rowspan 속성과 colspan 속성이예요.
rowspan은 현재 위치에서 아래로 가면서 행을 합쳐버려요. 예제를 봐보시면 아하! 하실꺼예요
colspan은 rowspan의 반대니까, 열을 합쳐버리는거겠죠? 이건 아래로 갈 수 없으니 현재 위치에서 오른쪽으로 가요.
셀들을 합친다는 얘기를 병합한다. 라고해요. 엑셀류에서 많이 쓰는 용어죠? :)
각 셀들에 다른 태그들을 넣을 수도 있어요.
예를들면 사진을 넣을 수도 있죠.
<table> <tr> <td><img src="경로"></td> </tr> </table> |
리스트도 가능하고, 추후에 배울 비디오라던지, 오디오라던지, 등등. 다른 태그들을 사용 할 수 있어요.
활용 할 수 있는 부분이 되게 많죠?? 그만큼 기본적인 구조만 잘 알아두면 어디든 활용 할 수 있다는 사실!
테이블은 여기까지 준비해봤어요. 어렵지 않은 부분이라 직접 코딩 해보면서 결과물 확인하시면 금방 이해하실거예요!!
모두 고생하셨습니다 ^^7
게시글을 보시다가 궁금한 내용, 이게 맞나? 하는 내용, 이건 틀렸어!하는 내용들은 과감하게 댓글 달아주시면 감사하겠습니다.
이론적인 내용에 대한 궁금증은 검색을 통해 궁금증을 해결하는 것이 좋아요!!
실습적인 내용에 대한 궁금증은 최대한 생각을 해보고 검색을 하는 것이 좋아요!!