Front-End/HTML
[HTML] table 태그(tr 태그, th 태그, td 태그, table 속성)
찐코딩
2021. 10. 26. 00:13
table(테이블) 태그 : 데이터 표를 만드는 태그.
- tr 태그 : 테이블의 행을 만드는 태그.
- th 태그 : 테이블의 열(타이틀-제목)을 만드는 태그.
- td 태그 : 테이블의 열을 만드는 태그.
table 속성 : colspan, rowspan, border, bgcolor, width, height, cellpadding, cellspacing, align, valign 등
● colspan : column span 약자로, 셀(가로줄)을 합치는 개수를 지정
● rowspan : row span이란 뜻으로 셀(세로줄)을 합치는 개수를 지정
● border : 테이블 경계선 굵기를 지정(예: border="10")
● width : 너비를 지정(픽셀이나, %)
● height : 높이를 지정(픽셀이나, %)
● cellpadding : 셀과 경계선 사이의 여백
● cellspacing : 셀과 셀 사이의 여백
● align : 셀의 가로줄을 오른쪽(right), 왼쪽(left), 중앙(center) 등으로 정렬
● valign : 셀의 세로줄의 위(top), 중앙(middle), 아래(bottom)를 정렬
● bgcolor : 배경색 지정
bgcolor 속성값으로는 색상 이름(예:green)이나, 색상코드(#ff0000) 등을 쓸 수 있음
● bordercolor: 경계선 색깔 지정
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>테이블 태그(아주 중요함)</title>
</head>
<body>
<!--
table(테이블) 태그 : 데이터 표를 만드는 태그.
- tr 태그 : 테이블의 행을 만드는 태그.
- th 태그 : 테이블의 열(타이틀-제목)을 만드는 태그.
- td 태그 : 테이블의 열을 만드는 태그.
-->
<table border="1" cellspacing="0">
<tr> <!-- 1행 -->
<td>1행1열</td>
<td>1행2열</td>
<td>1행3열</td>
<td>1행4열</td>
</tr>
<tr> <!-- 2행 -->
<td>2행1열</td>
<td>2행2열</td>
<td>2행3열</td>
<td>2행4열</td>
</tr>
<tr>
<td>3행1열</td>
<td>3행2열</td>
<td>3행3열</td>
<td>3행4열</td>
</tr>
</table>
</body>
</html>
<!-- cellspacing : 셀 간의 간격-->
<!-- cellpadding : 셀과 글자 사이의 간격 -->
<table border="1" cellspacing="0" width="250">
<tr>
<th>아이디</th>
<th>이 름</th>
<th>나 이</th>
</tr>
<tr>
<td>hong</td>
<td>홍길동</td>
<td>27</td>
</tr>
<tr>
<td>lee</td>
<td>이순신</td>
<td>32</td>
</tr>
<tr>
<td>you</td>
<td>유관순</td>
<td>25</td>
</tr>
</table>
<!--
테이블 태그에서 행 또는 열 병합
- rowspan 속성 : 테이블에서 행을 병합하는 속성
- colspan 속성 : 테이블에서 열을 병합하는 속성
형식) rowspan = "병합할 행의 수 " / colspan = "병합할 열의 수"
-->
<table border="1" cellspacing="0">
<tr>
<td colspan="4">4열 병합</td> <!-- <td colspan="n"> : n개의 열이 병합 -->
<!-- <td>1행2열</td>
<td>1행3열</td>
<td>1행4열</td> -->
</tr>
<tr>
<td rowspan ="3">3행 병합</td> <!-- <td rowspan ="n"> : n개의 행이 병합-->
<td>2행2열</td>
<td>2행3열</td>
<td>2행4열</td>
</tr>
<tr>
<!-- <td>3행1열</td> -->
<td>3행2열</td>
<td>3행3열</td>
<td>3행4열</td>
</tr>
<tr>
<!-- <td>4행1열</td> -->
<td>4행2열</td>
<td>4행3열</td>
<td>4행4열</td>
</tr>
</table>
테이블에 사진 넣기
<table border="1" cellspacing="0">
<tr>
<th>차종</th>
<th>이미지</th>
<th>배기량</th>
<th>연료</th>
<th>연식</th>
<th>제조사</th>
</tr>
<tr>
<td>제네시스(쿠페)</td>
<td><img src="images/car1.gif" width="188" height = "60"></td>
<td rowspan="2">2,000</td>
<td rowspan="2">가솔린</td>
<td>2015</td>
<td rowspan="5">현대자동차</td>
</tr>
<tr>
<td>소나타</td>
<td><img src="images/car2.gif" width="188" height = "60"></td>
<td>2014</td>
</tr>
<tr>
<td>그랜져(HG)</td>
<td><img src="images/car3.gif" width="188" height = "60"></td>
<td>3,000</td>
<td>디젤</td>
<td>2015</td>
</tr>
<tr>
<td>아반떼</td>
<td><img src="images/car4.gif" width="188" height = "60"></td>
<td>1,800</td>
<td rowspan="2">가솔린</td>
<td rowspan="2">2014</td>
</tr>
<tr>
<td>i30</td>
<td><img src="images/car5.gif" width="188" height = "60"></td>
<td>1,500</td>
</tr>
</table>