초보개발자의 성장블로그
HTML 21 <table>,<tr>,<th>,<td> 태그로 테이블 만들기
프론트엔드/HTML2021. 3. 19. 11:25
<table> : 테이블 전체를 만들 때 사용
<tr> : 테이블 행을 생성한다. 'table row'의 약자
<th> : 테이블 열의 최상단 머리를 생성한다. 글자 강조됨. th는 'table header'의 약자
<td> : 테이블 열을 생성한다. td는 'table data'의 약자
오늘의 날씨
| 지역 | 현재기온 | 불쾌지수 | 습도(%) | 풍속(m/s) |
|---|---|---|---|---|
| 서울 | 23 | 60 | 80 | 4.7 | 경기도 | 20 | 60 | 80 | 5.0 |
| 제주도 | 21 | 65 | 85 | 3.6 |
<!DOCTYPE html>
<html lang="en">
<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>
<style>
table, th, tr, td{
border:solid 1px black;
/* collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다.
겹치는 부분은 한 줄로 나타냅니다. */
border-collapse: collapse;
padding:8px;
}
</style>
</head>
<body>
<h3>오늘의 날씨</h3>
<table>
<tr>
<th>지역</th>
<th>현재기온</th>
<th>불쾌지수</th>
<th>습도(%)</th>
<th>풍속(m/s)</th>
</tr>
<tr>
<td>서울</td>
<td>23</td>
<td>60</td>
<td>80</td>
<td>4.7</td>
</tr>
<td>경기도</td>
<td>20</td>
<td>60</td>
<td>80</td>
<td>5.0</td>
</tr>
<tr>
<td>제주도</td>
<td>21</td>
<td>65</td>
<td>85</td>
<td>3.6</td>
</tr>
</table>
</body>
</html>'프론트엔드 > HTML' 카테고리의 다른 글
| HTML 23 <input type="text"> 태그로 텍스트 입력 창 만들기 (0) | 2021.03.19 |
|---|---|
| HTML 22 colspan과 rowspan으로 테이블의 셀 병합하기 (0) | 2021.03.19 |
| HTML 20 <video> 태그로 비디오 파일 재생하기 (0) | 2021.03.18 |
| HTML 19 <audio>태그로 오디오 파일 재생하기 (0) | 2021.03.18 |
| HTML 18 <img>태그의 속성 사용하기 (0) | 2021.03.18 |
댓글()