table, tr, th, td
- <table> : 표를 만들 때 사용
- <tr> : 표 내부의 행을 나타냄
- <th> : 표의 첫번째 행에서 사용되며 각 열의 제목
- <td> : 표의 행 내에 있는 각각의 셀을 표현
|
<!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></title>
</head>
<body>
<table border = "1px">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 1</td>
</tr>
<tr>
<td>Data 2</td>
<td>Data 2</td>
</tr>
</table>
</body>
</html>
|
cs |
table Semantic Tag
- <caption> : 표의 제목을 설정, <table> 당 하나의 <caption>만 사용 가능
- <thread> : 표의 머리글
- <tbody> : 표의 본문
- <tfoot> : 표의 바닥글
- 기본적으로 테이블의 레이아웃에 영향을 주지 않음
<th>, <td>
| 속성 | 의미 |
| abbr | 열에 대한 간단한 설명 |
| headers | 관련된 하나 이상의 다른 머리글 칸 |
| colspan | 확장하려는 열의 수(병합) |
| rowspan | 확장하려는 행의 수(병합) |
| scope | 자신이 누구의 머리글 칸인지 명시 ( col : 자신의 열 / colgroup : 모든 열 row : 자신의 행 / rowgroup : 모든 행 auto) |
실습
1
|
<!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>table 태그 연습</title>
</head>
<body>
<table border="1px" width="400">
<tr>
<th>이름</th>
<th>성별</th>
<th>주소</th>
<th>회비</th>
</tr>
<tr>
<td>김봄</td>
<td>여자</td>
<td>서울</td>
<td>1000</td>
</tr>
<tr>
<td>김여름</td>
<td>여자</td>
<td>서울</td>
<td>5000</td>
</tr>
<tr>
<td colspan="3">합계</td>
<td>6000</td>
</tr>
</table>
</body>
</html>
|
cs |
2
|
<!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>table 태그 연습</title>
</head>
<body>
<table border="1px" width="400">
<tr>
<td rowspan="2">가</td>
<td colspan="2">나</td>
</tr>
<tr>
<td>라</td>
<td rowspan="2">마</td>
</tr>
<tr>
<td colspan="2">바</td>
</tr>
</table>
</body>
</html>
|
cs |
'DEV > HTML' 카테고리의 다른 글
| HTML | 폼 태그 (0) | 2021.12.30 |
|---|---|
| HTML | 텍스트 태그 (0) | 2021.12.30 |
| HTML | 기초 (0) | 2021.12.28 |
