728x90
오늘은 html table태그의 기본적인 사용방법에 대해 알아보도록 하겠습니다.
table 태그 안에 열 이름은 th 태그로
행 데이터는 td 태그로 지정할 수 있습니다.
각각을 tr 태그로 감싸 주어야 합니다.
예제를 통해 여러 가지 속성들에 대해 알아보도록 하겠습니다.
1.html 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>코딩 마스터</td>
<td>html 마스터</td>
<td>table tag학습</td>
</tr>
</table>
</body>
</html>
위와 같은 결과가 나옵니다.
2.html table colgroup
colgroup와 col태그로 background color를 지정할 수 있습니다.
<!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>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>장기목표</th>
<th>단기목표</th>
<th>계획</th>
</tr>
<tr>
<td>코딩 마스터</td>
<td>html 마스터</td>
<td>table</td>
</tr>
</table>
</body>
</html>
col의 span속성은 몇 번째 열까지를 결정하는 속성입니다.
span을 1로 하면 빨간색 이 첫 번째 열까지만 적용되고 두 번째는 노란색 세 번째는 background color가 지정되지 않습니다.
첫 번째 col의 span속성을 3으로 하면 뒤에 다른 col이 있어도 모두 빨간색이 됩니다.
3.html table scroll
scroll을 추가하는 방법에 대해 알아보도록 하겠습니다.
table 태그를 div 태그로 묶어주고 overflow : auto; 속성을 줍니다. 그리고 크기를 정해주면 됩니다.
<!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>
<div style="overflow: auto; width: 200px; height:100px;">
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>장기목표</th>
<th>단기목표</th>
<th>계획</th>
</tr>
<tr>
<td>코딩 마스터</td>
<td>html 마스터</td>
<td>table</td>
</tr>
<tr>
<td>코딩 마스터</td>
<td>html 마스터</td>
<td>table</td>
</tr>
<tr>
<td>코딩 마스터</td>
<td>html 마스터</td>
<td>table</td>
</tr>
<tr>
<td>코딩 마스터</td>
<td>html 마스터</td>
<td>table</td>
</tr>
<tr>
<td>코딩 마스터</td>
<td>html 마스터</td>
<td>table</td>
</tr>
<tr>
<td>코딩 마스터</td>
<td>html 마스터</td>
<td>table</td>
</tr>
<tr>
<td>코딩 마스터</td>
<td>html 마스터</td>
<td>table</td>
</tr>
<tr>
<td>코딩 마스터</td>
<td>html 마스터</td>
<td>table</td>
</tr>
</table>
</div>
</body>
</html>
4.html table caption
쉽게 생각하면 제목을 지정하는 속성입니다.
caption태그 안에 제목을 넣어주시면 됩니다.
<!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>
<div style="overflow: auto; width: 200px; height:100px;">
<table>
<caption>목표</caption>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>장기목표</th>
<th>단기목표</th>
<th>계획</th>
</tr>
<tr>
<td>코딩 마스터</td>
<td>html 마스터</td>
<td>table</td>
</tr>
<tr>
<td>코딩 마스터</td>
<td>html 마스터</td>
<td>table</td>
</tr>
<tr>
<td>코딩 마스터</td>
<td>html 마스터</td>
<td>table</td>
</tr>
<tr>
<td>코딩 마스터</td>
<td>html 마스터</td>
<td>table</td>
</tr>
<tr>
<td>코딩 마스터</td>
<td>html 마스터</td>
<td>table</td>
</tr>
<tr>
<td>코딩 마스터</td>
<td>html 마스터</td>
<td>table</td>
</tr>
<tr>
<td>코딩 마스터</td>
<td>html 마스터</td>
<td>table</td>
</tr>
<tr>
<td>코딩 마스터</td>
<td>html 마스터</td>
<td>table</td>
</tr>
</table>
</div>
</body>
</html>
728x90
'기타 > html' 카테고리의 다른 글
| [HTML] meta tag 사용법 및 예제 (0) | 2020.12.09 |
|---|---|
| [HTML] nav tag 사용법 및 예제 (0) | 2020.12.07 |
| [HTML] a tag 사용법 및 예제 (0) | 2020.12.04 |
| [HTML] link 태그 사용법 및 예제 (0) | 2020.12.03 |
| [HTML] html form 태그 사용하는 방법 (0) | 2020.12.02 |
