안녕하세요.
콤퓨타 학원에 원장을 하고 있는 이프로입니다. 헤헴 ^^
여러분 엑셀 아세요?
엑셀을 보면 마치 표처럼 생겼는데요.
여러 데이터를 체개적으로 보여주기에 좋은 구조인데요.
html에서도 많은 데이터를 효율적으로 표현한다거나 화면 구조을 표형태로 구성해야하는 경우들이 있는데요.
이때 table 태그를 사용합니다.
table 태그 문법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<th>구분</th>
<th>수학</th>
<th>영어</th>
</tr>
<tr>
<td>A반 평균</td>
<td>80</td>
<td>81</td>
</tr>
<tr>
<td>B반 평균</td>
<td>80</td>
<td>81</td>
</tr>
</table>
</body>
</html>
tr태그는행(로우)을 표현해요. tr태그가 3번 반복되니 행이 3개가 된다고 할수 있어요.
th, td태그는 열(컬럼)을 표현해요. tr안에 th나 td가 3개씩 들어가 있는 걸로 판단했을때 열이 3개라는 걸 알수 있어요.
자세히 보시면 특징이 있는데요. 첫번재 tr태그 안쪽은 th이고 나머지 tr태그 안쪽은 td로 구성되어 있는데요.
th가 헤더(머리)부분을 의미하기 때문이에요.
현재 기준으로 볼때에는 th와 td는 차이가 없어요.
하지만 style(css)이나 javascript같은 다른 기능들을 사용했을때에는 th와 td는 확연하게 달라져요.
이부분은 style(css)이나 javascript 강의에서 좀 더 다루도록 할께요.
style(css)를 이용하면 표의 형태만이 아니라 선을 끄어서 정말 표같은 느낀을 줄수도 있는데요.
이부분도 뒤로 미루도록 할게요.
table 태그는 간단하게 끝나지만 style, javascript부분에서 이야기할 것들이 많은 태그에요.
지금은 body안에 태그를 둘러보는 것이니 조금만 남고 넘어가도록 할께요.
이번 강의는 여기까지에요.
여러분들의 관심과 사랑이 있다면 좀 더 좀은 컨텐츠를 제공해줄 수 있을거 같습니다.
많은 관심과 사랑 부탁드립니다.
감사합니다.
그럼 콤빠~
'웹개발 > HTML 간단태그소개' 카테고리의 다른 글
| 11. Body - div (1) | 2024.01.02 |
|---|---|
| 10. Body - 목록 (0) | 2024.01.02 |
| 08. Body - 이미지 (0) | 2024.01.02 |
| 07. Body - 하이퍼링크 (Hyperlinks) (0) | 2024.01.01 |
| 06. Body - style(스타일) (0) | 2024.01.01 |
