이번 포스팅에서는 표를 나타내는 요소인 Table 요소에 대해 설명을 드리겠습니다.
우선 테이블 요소는 표를 나타내주는데요, 우리가 흔히 볼 수있는 여러가지 표중에 다음 사이트에서 찾아 가져와 보았습니다.
사진출처 : 다음스포츠
위 표가 보이시나요? EPL 구단 순위를 나타내는 표인데요 지금 현재 상태는 표가 꽤나 보기쉽고 디자인이 되어있습니다.
하지만 이 테이블에서 CSS를 제거하면 바로 아래와 같은 사진이 나오게됩니다.
선이 없어서 보기가 더 힘들지만 위에 보이시면 순위 표 라고 기재가 되어있습니다.
이처럼 표를 만들어주는 요소인 table요소는 여러 부분에서 사용이 되고있습니다.
한가지 덧붙여 말씀드리자면 이 표를 나타내는 table요소로 예전엔 레이아웃을 배치하곤 했지만 요즘은 그렇지가 않습니다. 하지만 많은 분들이 이 표를 이용하여 크게 만들고 레이아웃을 배치하는데, 그렇게 사용을 하게되면 마크업이 상당이 길어지게됩니다.
레이아웃을 배치하는 방법은 여러 방법이 있지만 테이블 요소를 이용해서 배치하지 않는 다는 점 알아두시면 되겠습니다!
우선 코드를 한번 보고 그에따른 결과를 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표를 나타내는 table 요소</title>
</head>
<body>
<h1>테이블 요소의 사용</h1>
<table border="1" width="300" height = "200">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
<!--
1) table요소 : 표
2) tr(table row) 요소 : 한 개의 행
3) td(table data) 요소 : 한 개의 데이터 셀
-->
</body>
</html>
여기서 table에 border 및 width height 값을 주었는데 이 부분은 원래 css 에서 기재를 해야하지만 표를 설명하려고 보기 편하게 작성하였습니다.
결과를 보게되면
이런 결과가 나오게되는데요 위 주석에서 설명하진 않았지만 테이블은
thead, tbody, tfoot 으로 구성이 되어있지만 다른건 다 생략을 해도 tbody는 무조건 기재해야합니다. 테이블의 몸통을 나타내며 그 데이터를 보여주기 위함입니다. 하지만 thead, tfoot도 써주면 좋겠죠 웹접근성이나 웹표준을 위해서 !
테이블에 대한 감이 잡히셨을거라 생각합니다.
이번 포스팅은 여기까지 입니다. 다음 포스팅에선 테이블에 대해서 좀 더 자세히 알아보겠습니다.
'Front-end > HTML' 카테고리의 다른 글
| 9. 폼의기능(GET, POST 방식) (0) | 2018.07.31 |
|---|---|
| 8. 테이블(table) 예제 (0) | 2018.07.31 |
| 7. Font Awesome (0) | 2018.07.25 |
| 6. 파비콘과 내부링크 (0) | 2018.07.24 |
| 5. 다음 UI (솔루션 코드) (1) | 2018.07.23 |