<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
th, td{
padding: 15px;
}
</style>
</head>
<body>
<!--"border"는 표 테두리의 두께를 지정한다.(CSS 의 border property 를 사용하는게 더 좋은 방법)-->
<table border="1">
<!--"tr"은 표 내부의 행 (table row)-->
<tr>
<!--"th"는 행 내부의 제목 셀 (table heading)-->
<th>First name</th>
<th>Last name</th>
<th>Score</th>
</tr>
<tr>
<!--"td"는 행 내부의 일반 셀 (table data)-->
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<h2>2개의 culumn을 span</h2>
<table>
<tr>
<th>Name</th>
<!--"colspan"은 해당 셀이 점유하는 열의 수를 지정합니다.-->
<!--한사람당 전화번호를 두개 출력하기 위해서 telephone 에는 2개의 속성값이 존재-->
<th colspan="2">Telephone</th>
</tr>
<tr>
<!--열 값이 차례대로 들어가는데 두번째와 세번째 값은 telephone 에 들어가는 것처럼 보임-->
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h2>2개의 row를 span</h2>
<table>
<!--첫번째 줄-->
<tr>
<th>Name:</th>
<!--헤더 값들이 열로 들어가기 때문에 Name 의 속성을 바로 적어줌.-->
<td>Bill Gates</td>
</tr>
<!--두번째 줄-->
<tr>
<!--"rowspan"은 해당 셀이 점유하는 행의 수를 지정합니다.-->
<th rowspan="2">Telephone:</th>
<!--여기는 두번째 줄 자리이기 때문에 "555 77 854" 만 적어줍니다.-->
<td>555 77 854</td>
</tr>
<!--세번째 줄-->
<tr>
<!--세번째 줄 자리에 와서 새로운 속성값을 적어줍니다.-->
<td>555 77 855</td>
</tr>
</table>
</body>
</html>