HTML 테이블 만들기
HTML에서 테이블을 만드는 방법..
간단히 <tr>태그와 <td>, <th>태그만 알고 있으면 됩니다.
그에따른 속성은 다음에 알아보기로 하구요.
아래는 테이블 코딩 입니다.
===========================================================================================
<body>
<table border="1">
<tr>
<th>번호</th><th>물품</th><th>가격</th><th>사진</th>
</tr>
<tr>
<th>1</th><td>TUMI백팩</td><td>580,000</td><td><img src="tumi.jsp"></td>
</tr>
<tr>
<th>2</th><td>아이패드</td><td>700,000</td><td><img src="ipad.jsp"></td>
</tr>
</table>
</body>
===========================================================================================
아래는 결과입니다.
코딩을 보시면 <table>태그를 사용하구요.
그 안에 <tr>, <td>, <th>를 사용한 것을 알 수 있습니다.
<table>코딩에 border=1 이라는 속성을 준 이유는
테이블 테두리의 굵기를 나타네기 위해서 입니다.
숫자를 크게 할수록 굵기는 굵어집니다.
그 다음에 나오는 것은 <tr> 태그 입니다.
<tr>태그와 <td><th>태그를 이해하는 것이 중요하니
여기서부턴 이해를 하셔야 합니다.
<tr>태그는 가로줄의 개수를 의미합니다.
코딩을 보시면 <tr>도 3개, 결과테이블의 가로줄도 3개 인것을 보실수 있습니다.
그럼 <td>,<th>태그는 무엇이냐?
눈치가 빠르신 분들을 아실텐데요.
<td>, <th> 태그는 표의 세로줄의 개수를 의미 합니다.
그럼 <td>와 <th>의 차이는 무엇일까요?
별거는 아니구요.
<td>는 왼쪽정렬...
<th>는 볼드, 가운데 정렬을 해주는 것입니다.
여기까지 HTML 에서 테이블을 만드는 방법에 대해 알아보았습니다.
중요한것은
세로줄을 늘리려면 <tr>태그를
가로줄을 늘리려면 <td>, <th>태그를 사용하라는것..!!
다음에는 좀더 자세하게 테이블 속성과 <thead>, <tbody> 에 대해서도 알아보도록 하겠습니다.
JSTL forEach if 사용범 table 테이블 만들기
'Programing > HTML' 카테고리의 다른 글
| 웹페이지 접근성 검사 방법, K-WAH, 웹접근성연구소 (0) | 2016.09.20 |
|---|---|
| HTML 글꼴 관련 태그 (0) | 2014.04.16 |
| HTML 문단 관련 태그 (0) | 2014.04.14 |
| HTML 목록 태그 <ul>, <ol>, <li> (0) | 2014.04.14 |
댓글