728x90
반응형
웹 페이지에 표 출력하기
- <table> : 표 전체의 범위를 의미하는 태그
- <tr> : table row, 표의 한 줄을 의미하는 태그
- <th> : table header, 해당 줄에 제목 칸을 추가하는 태그
- <td> : table data, 해당 줄에 일반 칸을 추가하는 태그
<!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>
<h3># 웹 페이지에 표 출력하기</h3>
<p>
- <table> : 표 전체의 범위를 의미하는 태그 <br>
- <tr> : table row, 표의 한 줄을 의미하는 태그 <br>
- <th> : table header, 해당 줄에 제목 칸을 추가하는 태그 <br>
- <td> : table data, 해당 줄에 일반 칸을 추가하는 태그 <br>
</p>
<table border="3">
<tr>
<th>국어</th>
<th>영어</th>
<th>수학</th>
<th>총합</th>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
<td>60</td>
</tr>
</table>
<table border="3">
<tr>
<th>회원이름</th>
<th>받는곳</th>
<th colspan="2">전화번호</th> <!-- 2 column을 차지하게 된다. -->
</tr>
<tr>
<td>김철수</td>
<td>서울시 무슨구 무슨동</td>
<td>02-123-1234</td>
<td>010-1234-1234</td>
</tr>
<tr>
<td>박철수</td>
<td rowspan="2">경기도 구리시 무슨동</td> <!-- 2 row를 차지하게 된다. -->
<td colspan="2">010-3333-3333</td>
</tr>
<td>박민수</td>
<td colspan="2">010-3333-3334</td>
<tr>
</tr>
</table>
<table border="1">
<tr>
<th colspan="6">Time Table</th>
</tr>
<tr>
<th rowspan="6">Hours</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
</tr>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
<td>Arts</td>
</tr>
<tr>
<td>Social</td>
<td>History</td>
<td>English</td>
<td>Social</td>
<td>Sports</td>
</tr>
<tr>
<th colspan="5">Lunch</th>
</tr>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
<td rowspan="2">Project</td>
</tr>
<tr>
<td>Social</td>
<td>History</td>
<td>English</td>
<td>Social</td>
</tr>
</table>
</body>
</html>728x90
반응형
'HTML' 카테고리의 다른 글
| [HTML] 입력 (2) | 2023.06.02 |
|---|---|
| [HTML] 리스트 (0) | 2023.06.02 |
| [HTML] 이미지 (0) | 2023.06.01 |
| [HTML] 링크 (0) | 2023.06.01 |
| [HTML] 속성(Attribute) (0) | 2023.06.01 |
