728x90
반응형
table은 웹사이트에 표/엑셀 같은 데이터를 넣기 위해 고안되었다.
td 태그
항목 하나하나를 묶어준다. table data 의 약자
하지만 이렇게 하면
구분이 안된다. 이럴 때 행을 구분하기 위해서는 tr태그가 필요하다.
tr태그
같은행을 grouping 해줘야한다. 또한 table 태그를 바깥에 감싸줘야 행이 구분된다.
table border 태그
table border 태그는 테두리를 지정해준다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html>
<body>
<table border="2">
<tr>
<td>이름 </td><td>성별</td><td>주소</td>
</tr>
<tr>
<td>최진혁</td><td>남자</td><td>청주</td>
</tr>
<tr>
<td>최유빈</td><td>여자</td><td>경주</td>
</tr>
</table>
</body>
</html>
|
cs |
++) 웹사이트의 레이아웃을 만들기 위해 table이 사용되기도 하였다.
<thead> ,<tbody> 태그
카테고리와 본문을 구별해준다. 태그를 쓰지 않아도 브라우저가 알아서 처리해주지만 웬만하면 쓰는게 좋다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<html>
<body>
<table border="1">
<thead>
<tr>
<th>이름 </th><th>성별</th><th>주소</th>
</tr>
</thead>
<tbody>
<tr>
<td>최진혁</td><td>남자</td><td>청주</td>
</tr>
<tr>
<td>최유빈</td><td>여자</td><td>경주</td>
</tr>
</tbody>
</table>
</body>
</html>
|
cs |
<th>태그
카테고리 셀을 볼드체로 구별시켜주고 싶을 때 사용한다.
<tfoot> 태그
말그대로 표의 꼬리부분이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<html>
<body>
<table border="1">
<thead>
<tr>
<th>이름 </th><th>성별</th><th>주소</th><th>회비</th>
</tr>
</thead>
<tbody>
<tr>
<td>최진혁</td><td>남자</td><td>청주</td><td>1000원</td>
</tr>
<tr>
<td>최유빈</td><td>여자</td><td>경주</td><td>500원</td>
</tr>
</tbody>
<tfoot>
<td>합계</td><td></td><td></td><td>1500</td>
</tfoot>
</table>
</body>
</html>
|
cs |
'회비'에 해당하는 카테고리 셀을 추가하고, 합계 행을 tfoot 태그 안에 넣는다.
셀 병합
rowspan ="2" 는 두개의 행이 병합된다는것
colspan ="3" 은 세개의 열이 병합된다는것
728x90
반응형
'HTML > 생활코딩' 카테고리의 다른 글
| [HTML 기초] 입력양식 - form (2) 콤보박스/체크박스/radio/버튼/hidden (0) | 2021.11.10 |
|---|---|
| [HTML기초] 입력양식 - form (0) | 2021.11.05 |
| [HTML기초] p태그,br태그,img태그 (0) | 2021.10.22 |
| [HTML기초] 웹사이트 만들기 (0) | 2021.10.11 |
| [HTML 개념] 태그의 중첩과 목록 ,문서의 구조,DOCTYPE (0) | 2021.10.06 |
댓글