테이블태그는 행과 열에 의해 만들어진 격차가 연속적으로 이어지는 구조이다.
table 태그로 전체를 감싼다.
행은 tr 태그로 감싼다.
열(td)은 콘텐츠를 저장하며 td 태그로 감싼다
td 는스타일레이아웃을 제일 잘 먹는다. tr은 스타일 레이아웃을 잘 안먹는다. table은 반반
tr 과 td태그에는 속성을 지정할 수 있다.
실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 태그</title>
<style>
table {width:100%; border:1px solid #0F0;}
td {border:1px solid #36F;}
</style>
</head>
<body>
<table>
<tr><!-- 행 -->
<td>1행 1열</td><!-- 열 -->
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 1열2행 1열2행 1열2행 1열2행 1열2행 1열2행 1열2행 1열2행 1열2행 1열2행 1열2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
</table>
<table>
<thead>
<tr>
<th>1행 1열</th>
<th>1행 2열</th>
<th>1행 3열</th>
</tr>
</thead>
<tbody>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
</tbody>
</table>
<table>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
</tr>
</table>
</body>
</html>결과물
'Html' 카테고리의 다른 글
| 08. 입력양식태그 (0) | 2022.09.20 |
|---|---|
| 07. 공간분할태그 (0) | 2022.09.20 |
| 05. 하이퍼링크 태그 (0) | 2022.09.20 |
| 04.시맨틱태그 (0) | 2022.09.20 |
| 03.웹 콘텐츠를 저장하는 태그 (0) | 2022.09.20 |