기본 테이블(table)
테이블 행에 대한 컨테이너를 제공하는 태그는 <table></table>이다.
이 테이블 태그 안에 행은 <tr></tr> 태그를 이용하여 행 태그를 만들 수 있다.
그리고 이 행 태그 안에 <td></td> 태그를 사용하면 된다.
테이블 예로 어떻게 구성되는지 알아보자
예)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
table{
border:solid 1px #000;
width:500px;
padding:30px;
text-align:center;
}
td{
border:solid 2px red;
padding:50px;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
결과화면
검은색 외각의 테두리선은 <table></table> 태그이고,
그 안에 1,2,3, 의 3개의 열(3개의 셀)을 하나로 묶은 한 줄(파란색 박스)의 한 행은 <tr></tr> 태그로 묶여있다.
이렇게 <tr> 태그는 한 행의 여러 개의 열(셀)을 하나로 묶는 컨테이너로서 작용을 하고
<td> 태그는 사용하는 개수만큼 열(셀)로 화면에 나타나 지게 된다.
결과 화면을 보면 <td> 태그는 총 3개가 작성을 했고 3개의 열로 화면에 보이고 있다.
이렇게 기본적인 테이블을 구성하는 태그를 다시 요약하면
<table></table> 태그는 <tr>과 <td>를 사용하기 위한 테이블의 컨테이너 태그이며,
<tr></tr> 태그는 열을 한 줄로 묶어 한 행을 표현하는 컨테이너 태그이며,
<td></td> 태그는 열(셀)을 나타내기 위한 태그이다.
반응형
'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글
| HTML5 - 테이블(꾸미기 - 특수머리글, 바닥글) <thead>, <tfoot>, <tbody> (0) | 2022.02.27 |
|---|---|
| HTML5 - 테이블(table) - 2 (셀 합치기, 칸 합치기, 열 합치기, 행합치기) (0) | 2022.02.26 |
| HTML5 - (설명 리스트 list) <dl>, <dt>, <dd> (0) | 2022.02.26 |
| HTML5 - (리스트 list) <ul>, <ol>, <li> (0) | 2022.02.25 |
| HTML5 - 텍스트(링크 link) 페이지링크, 조각링크, 프로토콜링크 (0) | 2022.02.24 |