기본적인 테이블 요소 태그
tr | 표 내부의 행 |
th | table header의미 , 행 내부의 제목 태그 |
td | table data의미, 행 내부의 일반 셀 태그 |
간단한 테이블 만들어보기
<!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>Document</title>
</head>
<body>
<table>
<tr>
<th>제목 1</th>
<th>제목 2</th>
</tr>
<tr>
<td>제목1 관련 데이터</td>
<td>제목2 관련 데이터</td>
</tr>
<tr>
<td>제목1 관련 데이터</td>
<td>제목2 관련 데이터</td>
</tr>
</table>
</body>
</html>
<tr> 태그를 통해서 가로로 한 줄씩 생성되는 것을 확인할 수 있다.
근데 지금 상태로는 테이블에 선이 없어서 구별하기가 어렵다.
border | 표의 테두리 두께를 지정 |
<!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>Document</title>
</head>
<body>
<table border="2">
<tr>
<th>제목 1</th>
<th>제목 2</th>
</tr>
<tr>
<td>제목1 관련 데이터</td>
<td>제목2 관련 데이터</td>
</tr>
<tr>
<td>제목1 관련 데이터</td>
<td>제목2 관련 데이터</td>
</tr>
</table>
</body>
</html>
테이블 속성에 border를 추가해 줌으로써 조금 더 보기 간편해졌다.
'Web > HTML 기본 개념' 카테고리의 다른 글
[HTML]입력양식 태그 (1) | 2021.03.05 |
---|---|
[HTML]이미지, 오디오 , 비디오 삽입하기 (0) | 2021.03.05 |
[HTML]테이블 열,행 합치기 (0) | 2021.03.05 |
[HTML]글자 태그(2) (0) | 2021.03.02 |
[HTML]글자 태그(1) - h 태그 (0) | 2021.03.02 |