table 태그는 html 웹페이지에서 데이터를 표 형식으로 표현하기에 적합한 태그이다. 테이블은 행과 열로 이루어지고 데이터는 셀에 표시한다. tr 태그는 행을 의미하고 th 태그와, td 태그는 열을 의미하는데, th 와 td 각각은 표형식인 테이블에서 엑셀의 셀과 같은 의미를 가진다.
html table 행과 열 사용하기
using html table rows and columns
웹페이지를 만들 때 컨텐츠 정보를 일목요연하게 나열하기 위한 방법 중 하나가 테이블이다.
테이블은 행과 열로 이루어진 표형식이며 엑셀의 시트와 같은 모양을 가지고 있다.
html의 테이블을 사용하기 위해 table 태그를 사용하고 행을 추가할 때는 tr 태그를 열을 추가할 때는 td 태그를 사용한다.
td 태그는 각각 엑셀처럼 셀이라 불리기도 한다.
추가로 td 태그처럼 사용되는 것 중 하나가 th 인데 이것은 td 태그와 같지만 제목을 뜻하고 테이블의 가장 첫 부분에 위치한다.
html 테이블, 행과 열
html 에서 표와 같은 형식을 만들기 위해 table 태그를 사용한다.
행과 열을 이용하여 표를 작성하는 것으로 보통 게시판의 목록을 표현하는데 자주 사용되기도 한다.
한 때는 레이아웃을 사용하는데도 사용되기도 했는데 권고하지는 않는다. 반응형에 맞지도 않기 때문이다.
table 태그는 행을 의미하는 tr 태그, 열을 의미하는 td 태그와 함께 사용하고 열이면서 제목을 의미하는 th 태그와 함께 사용한다.
아래는 테이블 태그를 사용하는 방법을 나타낸다.
- table
- 표 양식의 데이터를 표시하도록 한다. - tr
- 행을 추가한다. - th
- 컬럼을 추가하며 제목을 의미한다. table 태그의 가장 첫 줄에 사용한다. - td
- 컬럼을 추가하며 데이터를 의미한다.
<table>
<tr>
<th>제목컬럼</th>
</tr>
<tr>
<td>데이터컬럼</td>
</tr>
</table>샘플코드
위의 table 태그 사용 방법으로 html 예제를 만들어 본다.
table 태그는 행을 나타내는 tr 태그와 th 태그로 제목을 나타내고 td 태그로 데이터를 나타낸다.
table 태그는 이 4가지의 태그들과 함께 사용하기 때문에 같이 익혀두도록 한다.
테이블 태그는 엑셀의 시트와 비슷한 개념이기 때문에 이해하기 쉽다.
아래의 코드를 보자.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style></style>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body id="bgBody">
<table>
<tr>
<th>회사명</th>
<th>차명</th>
<th>배기량</th>
</tr>
<tr>
<td>현대자동차</td>
<td>아반떼</td>
<td>1600</td>
</tr>
<tr>
<td>기아자동차</td>
<td>K3</td>
<td>1600</td>
</tr>
</table>
</body>
<!-- // -->
</html>
<!-- // -->코드가 길지만 공통된 형식을 가지고 데이터를 표현하는 것이 table 태그이기도 하다.
표 형식으로 나타내기 때문에 엑셀의 그것과 비슷하다.
결과 화면을 보자.
코드는 길지만 화면에 표시되는 형태는 단순하다.
'programming > web' 카테고리의 다른 글
| html table 태그 header 사용하기 (0) | 2022.07.02 |
|---|---|
| html table 테두리 표시하기 using html table border (0) | 2022.06.24 |
| html 파비콘 link 태그 사용하기 using html link tag for favicon (0) | 2022.06.16 |
| html 이미지 picture 태그 사용 해상도별 여러 이미지 표시하기 using html picture tag (0) | 2022.06.13 |
| html 태그 배경 이미지 반복 속성하기 using html tag background image repeat attribute (0) | 2022.06.09 |
댓글