<table> 태그
홈페이지에서 정보를 표로 만들어서 보여주기 위해서 사용하는 태그이다.
예전에는 table 태그를 이용해서 홈페이지의 골격을 만들었다고 하지만, 지금은 <div> 태그로 인해서 골격으로는 사용하지 않는다.
<table> 태그 사용법
table.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1px">
<thead>
<tr>
<td>이름</td> <td>기능</td> <td>글쓴이</td>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td> <td>웹페이지 구성</td> <td rowspan ="2">ludeno</td>
</tr>
<tr>
<td>CSS</td> <td>웹페이지 이쁘게 만들기</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">병합</td>
</tr>
</tfoot>
</table>
</body>
</html>
(실행결과)
<table border="1px">
</table>table 태그 내부의 코드들이 테이블 형식이라는 것을 알려주기 위해 사용한다.
table 태그에서 border 속성을 이용하여 각 테이블 마다 구분선을 넣어줄 수 있다.
<thead>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>thead 태그는 각 하위 컬럼들의 제목에 해당하는 부분이다.
tbody 태그는 테이블의 값, 내용에 해당하는 부분이다.
tfoot 태그는 테이블의 끝부분 표현한다. 이 태그로 감싸져 있으면 이 태그가 table 태그 어디에 있든지 무조건 테이블에서 끝 부분에 위치한다.
위의 태그들은 사용하지 않아도 실행은 잘 된다. 대신 태그를 이용해서 구분하면 나중에 CSS를 이용해서 스타일링 하기 쉬워진다.
<table border="1px">
<tr>
<th>0example</th> <td rowspan="2">0example1</td>
</tr>
<tr>
<td>1example</td>
</tr>
<tr>
<td colspan="2">2example0</td>
</tr>
</table>tr 태그는 Table row의 약자이며, 테이블의 각 행을 구분할때 사용한다.
td 태그는 Table data의 약자, 테이블 안에 값을 나타낸다. td 태그 속성으로는 rowspan 과 colspan이 있는데
rowspan은 행(세로)으로 셀 병합이 가능하고,
colspan은 열(가로)으로 셀 병합이 가능하다.
단, 병합할 때 병합할 셀에 값이 없어야된다.
thead 태그 내의 td 태그 대신에 th 태그를 사용해도 된다. 대신 th 태그를 사용하면 셀의 내용이 가운데 정렬에, 볼드체로 바뀐다.
'HTML_CSS > HTML' 카테고리의 다른 글
| 사용자의 입력 값을 받을 수 있는 <input> 태그 (0) | 2021.06.05 |
|---|---|
| 서버로 원하는 데이터를 보내기 위한 <form> 태그 (0) | 2021.06.01 |
| HTML 주석 기능 (0) | 2021.02.28 |
| 줄바꿈 기능이 있는 <br> 태그 (0) | 2021.02.28 |
